[jQuery] Mobile 참고 - 다른 웹앱 실행, 데이터 링크 > 온라인강의

본문 바로가기
 
 
 
오늘 1,448
어제 1,706
최대 2,526
전체 3,395,967

최근 방문자

1011
1853
1775
1756
1706
1448
18 19 20 21 22 23
비즈니스의 시작 비즈명함 ~ 가격, 품질, 배송 3가지 만족을 드리는 비즈명함 / 즉석명함 / 급행서비스 / 서울 전지역 수도권일부 3시간배송

select * from g5_menu where me_use = '1' and me_link like '%lecture%'
온라인강좌 홈 > 온라인강좌 > 온라인강좌

JavaScript | [jQuery] Mobile 참고 - 다른 웹앱 실행, 데이터 링크

페이지 정보

작성일2014-09-25 14:32 조회3,386회 댓글0건

본문

다른 웹앱 실행


<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
  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기

댓글목록

등록된 댓글이 없습니다.


목록

Total 2,005건 1 페이지
온라인강의 목록
번호 제목
2005
2004
2003
2002
2001
2000
1999
1998
1997
1996
1995
1994
1993
1992
1991
1990
1989
1988
1987
1986
1985
1984
1983
1982
1981
게시물 검색
 
 
상호: 해피정닷컴 대표:정창용 사업자등록번호:119-05-36414 (08394) 서울시 구로구 디지털로 242 한화비즈메트로1차 1502호
전화: 070-7600-3500 팩스:02-865-3528 개인정보관리:정창용 mail@happyjung.com 에스크로확인
개인정보취급방침
COPYRIGHT 2001~2017 해피정닷컴. All rights reserved. 부가통신사업신고:서울체신청-1217 통신판매신고:2014-서울구로-0074
 
모바일 버전으로 보기