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

본문 바로가기
 
 
 
오늘 1,151
어제 1,770
최대 2,526
전체 3,571,712

최근 방문자

1016
1862
1835
1777
1770
1151
15 16 17 18 19 20
비즈니스의 시작 비즈명함 ~ 가격, 품질, 배송 3가지 만족을 드리는 비즈명함 / 즉석명함 / 급행서비스 / 서울 전지역 수도권일부 3시간배송

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

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

페이지 정보

작성일2014-09-25 14:32 조회3,605회 댓글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,093건 1 페이지
온라인강의 목록
번호 제목
2093
Search 네이버 검색등록 삭제하기 (write.2017-10-20)새글  Hit.18
2092
Search 접속자 로그 분석 서비스 (write.2017-10-19)  Hit.21
2091
2090
2089
2088
2087
2086
2085
2084
2083
2082
2081
2080
2079
2078
2077
2076
2075
2074
Editor [CKEeditor] Emojione 추가하기 (write.2017-09-18)  Hit.311
2073
2072
2071
ClassicASP 파일 다운로드 소스 (write.2017-09-13)  Hit.410
2070
일반 무료 음악 사이트 (write.2017-09-09)  Hit.472
2069
호스팅 이미지 호스팅 (update.2017-09-07)  Hit.476
게시물 검색
 
 
상호: 해피정닷컴 대표:정창용 사업자등록번호:119-05-36414 (08394) 서울시 구로구 디지털로 242 한화비즈메트로1차 1502호
전화: 070-7600-3500 팩스:02-865-3528 개인정보관리:정창용 mail@happyjung.com 에스크로확인
개인정보취급방침
COPYRIGHT 2001~2017 해피정닷컴. All rights reserved. 통신판매신고:2014-서울구로-0074
 
모바일 버전으로 보기