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

본문 바로가기
 
 
 
오늘 1,605
어제 2,343
최대 2,454
전체 3,198,861
비즈니스의 시작 비즈명함 ~ 가격, 품질, 배송 3가지 만족을 드리는 비즈명함 / 즉석명함 / 급행서비스 / 서울 전지역 수도권일부 3시간배송

온라인강좌 홈 > 온라인강좌 > 온라인강좌

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

페이지 정보

작성일2014-09-25 14:32 조회3,132회 댓글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 122건 1 페이지
온라인강의 목록
번호 제목
122
121
120
JavaScript 정보 복사 (write.2016-12-08)  Hit.885
119
118
JavaScript [jQuery] FASHION RESPONSIVE SLIDER (write.2016-10-18)인기글  Hit.1288
117
116
115
114
113
JavaScript url 복사 클립보드 (write.2016-09-09)인기글  Hit.1403
112
JavaScript [모바일] 왼쪽 푸시 메뉴 (write.2016-09-08)인기글  Hit.1315
111
110
JavaScript [jQuery] Mobile 버전 (write.2016-01-21)인기글  Hit.2022
109
108
107
JavaScript [jQuery] 글자수 체크 (write.2014-11-15)인기글  Hit.3454
106
JavaScript [jQuery] tr 이동시키기 (write.2014-09-27)인기글  Hit.6841
열람중
104
103
102
101
JavaScript 소수점 제어하기 (write.2013-07-02)인기글  Hit.7447
100
99
JavaScript 모바일 웹 주소창 숨기기 (write.2013-06-24)인기글  Hit.10169
98
게시물 검색
 
 
상호: 해피정닷컴 대표:정창용 사업자등록번호: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
 
모바일 버전으로 보기