본문 바로가기
카테고리 없음

JQUERY MOBILE WEB 예제로 알아보기(1)

by 둥바 2022. 7. 8.
스마트 페이지 링크를 처리하기 위한 예제
sms ) a href="sms:번호"
tel) a href="tel:번호"
mail) a href="mailto:이메일주소"
지도)a href="지도주소"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

 <div data-role="page" id="page1">
 	<div data-role="header">
 		<h1>머리말영역(header)</h1>
 	</div>
 	<div data-role="content">
 		<p>컨텐츠영역(content)</p>
 		<ul data-role="listview" data-inset="true">
 			<li><a href="tel:01012345678" target="_blank">Tel</a></li>
 			<li><a href="sms:01012345678">SMS</a></li>
 			<li><a href="mailto:mong@naver.com">Mail</a></li>
 			<li><a href="https://map.naver.com/v5/entry/place/18485168?c=14121661.6752033,4509527.2925745,15,0,0,0,dh">지도</a></li>
 		</ul>
 	</div>
 	<div data-role="footer" data-position="fixed">
 		<h4>꼬리말영역(footer)</h4>
 	</div>
 </div>
</body>
</html>

 

컨텐츠 영역에서 리스트뷰, 버튼만들기, 버튼에 아이콘 넣기, 레인지바
- data-inset="true" 는 리스트뷰에서 모서리를 둥글게 만들어주는 효과를 가진다.
- data-filter="true" 는 리스트뷰에서 검색(필터링)효과를 보여준다.
- 기존의 HTML에서의 <title></title>의 역할을 data-title="타이틀"이 한다.
- label의 for과 그 다음 input의 id를 일치시켜서 연동하여 range바의 위치에 따른 값을 자동으로 연결할 수 있다.
중요!
- content영역에서는 (헤더와 푸터 영역과 달리) <a href="#" data-role="button"></a> 처럼 data-role="button"이라고 반드시 명시해주어야 버튼을 만들 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

 <div data-role="page" id="page1" data-title="타이틀용">
 	<div data-role="header">
 		<h1>머리말영역(header)</h1>
 	</div>
 	<div data-role="content">
 		<p>컨텐츠영역(content)</p>
 		<ul data-role="listview" data-inset="true" data-filter="true">
	<!-- data-role="listview" 리스트뷰효과
	data-inset: 모서리 라운드 효과, data-filter : 검색기능 -->
 			<li><a href="#">리스트1</a></li>
 			<li><a href="#">리스트2</a></li>
 			<li><a href="#">리스트3</a></li>
 			<li><a href="#">리스트4</a></li>
 		</ul>
 		<form>
 			<label for="slid">슬라이더 : </label>
 			<input type="range" name="silder" id="slid" value="20" min="1" max="100">
 			<!-- label의 for과 range의 id를 일치시켜 연동 -->
 			<a href="#" data-role="button" data-icon="check">확인</a>
 			<a href="#" data-role="button" data-icon="star">중요</a>
 			<a href="#" data-role="button" data-icon="search">검색</a>
 			<a href="#">그저 a링크일뿐</a>
 	<!-- content영역에서는 data-role="button"선언해야 버튼화
 	data-icon="아이콘"  -->	
 		</form>
 	</div>
 	<div data-role="footer" data-position="fixed">
 		<h4>꼬리말영역(footer)</h4>
 	</div>
 </div>
</body>
</html>

 

링크 연결에 따른 차이
외부페이지/ 외부 링크 방식 - 외부의 사이트,도메인 연결에 보다 효과적이다.
- Ajax를 사용하지 않기 때문에 부드러운 전환효과는 없다.
-<data-ajax="false> 또는 <rel="external"> 또는 <target="_blank">와 함께 사용된다.


외부페이지/내부 링크 방식 
- Ajax를 사용하여 애니메이션 전환효과가 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

 <div data-role="page" id="page1" data-title="타이틀용">
 	<div data-role="header">
 		<h1>머리말영역(header)</h1>
 	</div>
 	<div data-role="content">
 	<!-- 외부페이지/외부링크 방식 : Ajax 사용하지 않고 단순히 전체페이지를 새로고치면서 전환
 	rel="external", data-ajax="false" target="_blank" -->
 		<p>외부페이지/외부링크</p>
 		<a href="page2.html#page2" data-ajax="false" data-role="button">페이지2</a>
 		<p>외부페이지/내부링크</p>
 	<!-- 외부페이지/내부링크 : 내부적으로 자연스럽게 ajax사용하여 애니메이션 전환효과 가진다.  -->
 		<a href="page3.html" data-role="button">페이지3</a>
 	</div>
 	<div data-role="footer" data-position="fixed">
 		<h4>꼬리말영역(footer)</h4>
 	</div>
 </div>
</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

 <div data-role="page" id="page2">
 	<div data-role="header">
 		<h1>머리말영역(header)</h1>
 	</div>
 	<div data-role="content">
 	<!-- 외부사이트/외부링크 - 다른 사이트,도메인 연결에 좋다. -->
 		<a href="page3.html" data-role="button" rel="external">3페이지(외부)</a>
 	</div>
 	<div data-role="footer" data-position="fixed">
 		<h4>꼬리말영역(footer)</h4>
 	</div>
 </div>
</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

 <div data-role="page" id="page3">
 	<div data-role="header">
 		<h1>머리말영역(header)</h1>
 	</div>
 	<div data-role="content">
 		<p>컨텐츠영역(content)</p>
 		<!-- 외부페이지/내부링크 방식 - ajax가 사용되어 부드럽게 넘어감 -->
 		<a href="page1.html" data-role="button">페이지1(외부/내부)</a>
 		
 		<!-- 외부페이지/외부링크 방식 - rel="external"이나 target="_blank"로 ajax사용하지 않는다. -->
 		<a href="http://m.naver.com" data-role="button" target="_blank">네이버</a>
 	</div>
 	<div data-role="footer" data-position="fixed">
 		<h4>꼬리말영역(footer)</h4>
 	</div>
 </div>
</body>
</html>

 

페이지 전환 효과
- 내부페이지, 내부 링크 방식은 ajax 이 적용된다.
- data-transition = "전환효과"
slide / slideup / slidedown / flip / fade / pop / none 등의 효과가 있다.

- data-rel = "back"과 data-direction="reverse"의 차이는 다음과 같다. ( 둘다 뒤로가는 효과는 마찬가지지만 )
data-rel="back"은 이전 페이지의 상태를 복구하나, data-direction="reverse"는 이전 페이지 상태를 복구X
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- 페이지1 -->
 <div data-role="page" id="page1">
 	<div data-role="header">
 		<h1>첫번째 페이지</h1>
 	</div>
 	<div data-role="content">
 		<p>컨텐츠영역(content)</p>
 		<!-- 내부페이지, 내부 링크 방식 => ajax적용 -->
 		<a href="#page2" data-role="button">페이지2</a>
 	</div>
 	<div data-role="footer" data-position="fixed">
 		<h4>꼬리말영역(footer)</h4>
 	</div>
 </div>
 
 <!-- 페이지2 -->
 <div data-role="page" id="page2">
 	<div data-role="header">
 		<h1>두번째 페이지</h1>
 	</div>
 	<div data-role="content">
 		<p>페이지 전환 애니메이션 효과</p>
 		<!-- 내부페이지, 내부 링크 방식 => ajax적용 -->
 		<a href="#page1" data-role="button" data-direction="reverse">페이지1</a>
 		<a href="#page3" data-role="button" >기본 페이지3 전환</a>
 		<a href="#page3" data-role="button" data-transition="slide">페이지3(슬라이드)</a>
 		<a href="#page3" data-role="button" data-transition="slideup">페이지3(업)</a>
 		<a href="#page3" data-role="button" data-transition="slidedown">페이지3(다운)</a>
 		<a href="#page3" data-role="button" data-transition="flip">페이지3(뒤집어지기)</a>
 		<a href="#page3" data-role="button" data-transition="fade">페이지3(페이드)</a>
 		<a href="#page3" data-role="button" data-transition="pop">페이지3(팝)</a>
 		<a href="#page3" data-role="button" data-transition="none">페이지3(효과제거)</a>
 		
 	</div>
 	<div data-role="footer" data-position="fixed">
 		<h4>꼬리말영역(footer)</h4>
 	</div>
 </div>
 
 <!-- 페이지3 -->
 <div data-role="page" id="page3">
 	<div data-role="header">
 		<h1>세번째 페이지</h1>
 	</div>
 	<div data-role="content">
 		<p>컨텐츠영역(content)</p>
 		<!-- 내부페이지, 내부 링크 방식 => ajax적용 -->
 		<a href="#page1" data-role="button" class="ui-btn-right">페이지1</a>
 		<a href="#page2" data-role="button" data-rel="back" class="ui-btn-left">페이지2</a>
 		<!-- data-rel="back"과 data-direction="reverse"의 차이
 		data-rel="back"은 웹브라우저 뒤로가기(이전 상태 복원)
 		data-direction="reverse"는 이전 페이지 복원 안함.
 		 -->
 	</div>
 	<div data-role="footer" data-position="fixed">
 		<h4>꼬리말영역(footer)</h4>
 	</div>
 </div>
 
</body>
</html>

티스토리툴바