JavaScript [jQuery] Mobile 참고 - 다른 웹앱 실행, 데이터 링크
페이지 정보
본문
다른 웹앱 실행
<a> 태그의 href 속성에 동일 도메인이 아닌 다른 도메인 경로가 오게되면 jQuery Mobile 은 AJAX 통신을 이용한 단일 HTML 모델로 동작하지 않고, 전통적인 풀브라우징 방법을 이용한다. 즉 화면 새로고침으로 동작한다.
명확히 하기 위해서 rel="external" 속성을 추가할 수도 있는데 href 속성값이 다른 도메인이라는 것을 알려주는 역할을 한다.
동일 도메인에서 다른 웹앱을 실행하기 위한 방법은 세가지가 있다.
<a href="otherWebApp.html" data-ajax="false">
<a href="otherWebApp.html" rel="external">
<a href="otherWebApp.html" target="_blank">
data-ajax="false" 와 rel="external" 은 현재 웹앱이 실행되고 있는 브라우저에서 다른 웹앱으로 교체시킨다.
data-ajax="false" 는 AJAX 통신을 끄고 풀브라우징하도록 지정하는 것이고,
rel="external" 은 다른 도메인일 경우 붙이는 것인데 동일 도메인일 경우라도 잘 동작한다.
targer="_blank" 은 새 브라우저를 열고 다른 웹앱을 실행시킨다.
<div id="home" data-role="page">
<div data-role="header">
<h1> 홈페이지</h1>
</div>
<div data-role="content">
<a href="http://www.naver.com" data-role="button"> 다른 도메인 웹앱</a>
<a href="framework/demos/index.html" data-role="button" data-ajax="false"> 동일 도메인 웹앱</a>
</div>
</div>
데이터 링크
웹앱 페이지 이동이 아니라 이메일이나 전화번호, 위치정보에 대한 링크를 말한다.
예를 들어 이메일 데이터는 이메일을 보낼수 있는 앱으로, 전화번호는 전화걸기 앱으로, 위치정보는 지도를 보여주는 앱으로 연결 시켜준다.
<body>
<div id="home" data-role="page">
<div data-role="header">
<h1>Data Link</h1>
</div>
<div data-role="content">
<a href="mailto:mydoubley@nate.com" data-role="button">Email Link</a>
<a href="tel:010-4594-0000" data-role="button">Phone Link</a>
<a href="geo:37.480349,126.882507?z=16" data-role="button">Map Link</a>
</div>
</div>
</body>
</html>
geo 데이터는 JavaScript 를 이용해서 지도를 표시해 줄 수도 있다. 이 방법은 웹앱 페이지내에서 지도를 종주기 때문에 안드로이드폰과 아이폰 모두 잘 실행된다.
구글 Maps JavaScript API를 이용하여 geo 데이터를 지도로 표시한다.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile</title>
<meta charset="euc-kr" />
<mate name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no"/>
<link rel="shortcut icon" href="ios_icon.png">
<link rel="apple-touch-icon" href="/ios_icon.png">
<link href="./framework/jquery.mobile-1.0.css" rel="stylesheet" type="text/css" />
<script src="./framework/jquery-1.6.4.js"></script>
<script src="./framework/jquery.mobile-1.0.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js-sensor=true"></script>
<script type="text/javascript">
function showMap(a,b){
var latlng = new google.maps.LatLng(a,b);
var myOptions = {
zoom: 16;
center: latlng,mapTypeControl: false,
navigationControlOptions: {style:google.maps.NavigationControlStyle.SMALL},
mapTypeID: google.maps.MapTypeId.ROADMAP
};
var mapView = document.getElementById("mapView");
mapView.style.width = $(window).width()-30 + "px";
mapView.sylte.width = $(window).height()-100 +"px";
var map =new google.maps.Map(mapView,myOptions);
var marker = new google.maps.Marker({
position:latlng,
map: map
});
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Data Link</h1>
</div>
<div data-role="content">
<a href="javascript:showMap(37.480349,126.882507);" data-role="button">
Map Link
</a>
<div id="mapView"></div>
</div>
</div>
</body>
</html>
자료출처
http://blog.naver.com/jjjhyeok/20168834111
<a> 태그의 href 속성에 동일 도메인이 아닌 다른 도메인 경로가 오게되면 jQuery Mobile 은 AJAX 통신을 이용한 단일 HTML 모델로 동작하지 않고, 전통적인 풀브라우징 방법을 이용한다. 즉 화면 새로고침으로 동작한다.
명확히 하기 위해서 rel="external" 속성을 추가할 수도 있는데 href 속성값이 다른 도메인이라는 것을 알려주는 역할을 한다.
동일 도메인에서 다른 웹앱을 실행하기 위한 방법은 세가지가 있다.
<a href="otherWebApp.html" data-ajax="false">
<a href="otherWebApp.html" rel="external">
<a href="otherWebApp.html" target="_blank">
data-ajax="false" 와 rel="external" 은 현재 웹앱이 실행되고 있는 브라우저에서 다른 웹앱으로 교체시킨다.
data-ajax="false" 는 AJAX 통신을 끄고 풀브라우징하도록 지정하는 것이고,
rel="external" 은 다른 도메인일 경우 붙이는 것인데 동일 도메인일 경우라도 잘 동작한다.
targer="_blank" 은 새 브라우저를 열고 다른 웹앱을 실행시킨다.
<div id="home" data-role="page">
<div data-role="header">
<h1> 홈페이지</h1>
</div>
<div data-role="content">
<a href="http://www.naver.com" data-role="button"> 다른 도메인 웹앱</a>
<a href="framework/demos/index.html" data-role="button" data-ajax="false"> 동일 도메인 웹앱</a>
</div>
</div>
데이터 링크
웹앱 페이지 이동이 아니라 이메일이나 전화번호, 위치정보에 대한 링크를 말한다.
예를 들어 이메일 데이터는 이메일을 보낼수 있는 앱으로, 전화번호는 전화걸기 앱으로, 위치정보는 지도를 보여주는 앱으로 연결 시켜준다.
<body>
<div id="home" data-role="page">
<div data-role="header">
<h1>Data Link</h1>
</div>
<div data-role="content">
<a href="mailto:mydoubley@nate.com" data-role="button">Email Link</a>
<a href="tel:010-4594-0000" data-role="button">Phone Link</a>
<a href="geo:37.480349,126.882507?z=16" data-role="button">Map Link</a>
</div>
</div>
</body>
</html>
geo 데이터는 JavaScript 를 이용해서 지도를 표시해 줄 수도 있다. 이 방법은 웹앱 페이지내에서 지도를 종주기 때문에 안드로이드폰과 아이폰 모두 잘 실행된다.
구글 Maps JavaScript API를 이용하여 geo 데이터를 지도로 표시한다.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile</title>
<meta charset="euc-kr" />
<mate name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no"/>
<link rel="shortcut icon" href="ios_icon.png">
<link rel="apple-touch-icon" href="/ios_icon.png">
<link href="./framework/jquery.mobile-1.0.css" rel="stylesheet" type="text/css" />
<script src="./framework/jquery-1.6.4.js"></script>
<script src="./framework/jquery.mobile-1.0.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js-sensor=true"></script>
<script type="text/javascript">
function showMap(a,b){
var latlng = new google.maps.LatLng(a,b);
var myOptions = {
zoom: 16;
center: latlng,mapTypeControl: false,
navigationControlOptions: {style:google.maps.NavigationControlStyle.SMALL},
mapTypeID: google.maps.MapTypeId.ROADMAP
};
var mapView = document.getElementById("mapView");
mapView.style.width = $(window).width()-30 + "px";
mapView.sylte.width = $(window).height()-100 +"px";
var map =new google.maps.Map(mapView,myOptions);
var marker = new google.maps.Marker({
position:latlng,
map: map
});
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Data Link</h1>
</div>
<div data-role="content">
<a href="javascript:showMap(37.480349,126.882507);" data-role="button">
Map Link
</a>
<div id="mapView"></div>
</div>
</div>
</body>
</html>
자료출처
http://blog.naver.com/jjjhyeok/20168834111
댓글목록
등록된 댓글이 없습니다.