Hi Hi

'jQuery Mobile 지도'에 해당되는 글 1건

  1. jQuery Mobile - 다른 웹앱 실행 , 데이터 링크

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>