1. 단일 페이지와 다중 페이지에서 페이지 전환
14-01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>14-01</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="js/jquery-1.11.2.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<!-- 첫 번째 페이지 시작 -->
<div data-role="page" id="page1">
<div data-role="header">
<h3>첫 번째 페이지 헤더</h3>
</div>
<div data-role="content">
<p>첫 번째 페이지 내용</p>
<p><a href="#page2">두 번째 (내부)페이지 전환</a></p>
<p><a href="14-02.html">세 번째 (외부)페이지 전환</a></p>
</div>
<div data-role="footer">
<h4>첫 번째 페이지 풋터</h4>
</div>
</div>
<!-- 첫 번째 페이지 끝 -->
<!-- 두 번째 페이지 시작 -->
<div data-role="page" id="page2" data-add-back-btn="true"><!-- 백버튼이 자동으로 만들어 지게 함-->
<div data-role="header">
<h3>두 번째 페이지 헤더</h3>
</div>
<div data-role="content">
<p>두 번째 (내부)페이지 내용</p>
</div>
<div data-role="footer">
<h4>두 번째 페이지 풋터</h4>
</div>
</div>
<!-- 두 번째 페이지 끝 -->
</body>
</html>
14-02.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>14-02</title>
</head>
<body>
<p>이 내용은 jQuery Mobile에 의해 DOM에 추가되지 않습니다.</p>
<!-- 세 번째 페이지 시작 -->
<div data-role="page" id="page3" data-add-back-btn="true">
<div data-role="header">
<h3>세 번째 (외부)페이지 헤더</h3>
</div>
<div data-role="content">
<p>세 번째 (외부)페이지 내용</p>
</div>
<div data-role="footer">
<h4>세번째 (외부)페이지 풋터</h4>
</div>
</div>
<!-- 세 번째 페이지 끝 -->
</body>
</html>
출력 화면
2. 페이지 전환 애니메이션
14-03.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>14-03</title>
<link rel="stylesheet" href="js/jquery.mobile-1.4.5.css" />
<script src="js/jquery-1.11.2.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<!-- 첫 번째 페이지 시작 -->
<div data-role="page" id="page1">
<div data-role="header">
<h3>첫 번째 페이지 헤더</h3>
</div>
<div data-role="content">
<p>첫 번째 페이지 내용</p>
<p><a href="#page2" data-transition="slide">두 번째 페이지 전환</a></p>
</div>
<div data-role="footer">
<h4>첫 번째 페이지 풋터</h4>
</div>
</div>
<!-- 첫 번째 페이지 끝 -->
<!-- 두 번째 페이지 시작 -->
<div data-role="page" id="page2">
<div data-role="header">
<h3>두 번째 페이지 헤더</h3>
</div>
<div data-role="content">
<p>두 번째 페이지 내용</p>
<p><a href="#page1" data-transition="slide" data-direction="reverse">첫 번째 페이지 전환</a></p>
</div>
<div data-role="footer">
<h4>두 번째 페이지 풋터</h4>
</div>
</div>
<!-- 두 번째 페이지 끝 -->
</body>
</html>
출력 화면
3. 페이지 돌아가기
14-04.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>14-04</title>
<link rel="stylesheet" href="js/jquery.mobile-1.3.2.css" />
<script src="js/jquery-1.11.2.js"></script>
<script src="js/jquery.mobile-1.3.2.js"></script>
</head>
<body>
<!-- 첫 번째 페이지 시작 -->
<div data-role="page" id="page1">
<div data-role="header">
<h3>첫 번째 페이지 헤더</h3>
</div>
<div data-role="content">
<p>첫 번째 페이지 내용</p>
<p><a href="#page2" data-transition="slide">두 번째 페이지 전환</a></p>
</div>
<div data-role="footer">
<h4>첫 번째 페이지 풋터</h4>
</div>
</div>
<!-- 첫 번째 페이지 끝 -->
<!-- 두 번째 페이지 시작 -->
<div data-role="page" id="page2" data-add-back-btn="true">
<div data-role="header">
<h3>두 번째 페이지 헤더</h3>
</div>
<div data-role="content">
<p>두 번째 페이지 내용</p>
<p><a data-rel="back">첫 번째 페이지로 돌아가기</a></p>
</div>
<div data-role="footer">
<h4>두 번째 페이지 풋터</h4>
</div>
</div>
<!-- 두 번째 페이지 끝 -->
</body>
</html>
출력 화면
Back 버튼이 생긴걸 알 수 있습니다.
4. 기본 버튼과 옵션
14-05.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>14-05</title>
<link rel="stylesheet" href="js/jquery.mobile-1.3.2.css" />
<script src="js/jquery-1.11.2.js"></script>
<script src="js/jquery.mobile-1.3.2.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header">
<h3>jQuery Mobile : Button</h3>
</div>
<div data-role="content">
<a href="#" data-role="button">Link Button</a>
<a href="#" data-role="button" class="ui-disabled">Link Button (disabled)</a><!-- ui-disabled 는 ui가 좀 회색으로 바뀜-->
<a href="#" data-role="button" data-mini="true">Link Button (mini)</a>
<a href="#" data-role="button" data-inline="true">Link Button (inline)</a>
<button>Button element</button>
<input type="button" value="Button" />
<input type="submit" value="Submit Button" />
<input type="reset" value=" Reset Button" />
</div>
<div data-role="footer">
<h4>© 2014 T academy</h4>
</div>
</div>
</body>
</html>
출력 화면
5. 아이콘 적용하기
14-06.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>14-06</title>
<link rel="stylesheet" href="js/jquery.mobile-1.3.2.css" />
<script src="js/jquery-1.11.2.js"></script>
<script src="js/jquery.mobile-1.3.2.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header">
<h3>jQuery Mobile : Button</h3>
</div>
<div data-role="content">
<a href="#" data-role="button" data-icon="arrow-u" data-iconpos="top">
data-iconpos="top"</a>
<a href="#" data-role="button" data-icon="arrow-l" data-iconpos="left">
data-iconpos="left"</a>
<a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">
data-iconpos="right"</a>
<a href="#" data-role="button" data-icon="arrow-d" data-iconpos="bottom">
data-iconpos="bottom"</a>
<a href="#" data-role="button" data-icon="star" data-iconpos="notext">
data-iconpos="star"</a>
</div>
<div data-role="footer">
<h4>© 2014 T academy</h4>
</div>
</div>
</body>
</html>
출력 화면
6. 그룹버튼 만들기
14-07.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>14-07</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header">
<h3>jQuery Mobile : Button</h3>
</div>
<div data-role="content">
<div data-role="controlgroup">
<a href="#" data-role="button" data-icon="check">Yes</a>
<a href="#" data-role="button" data-icon="delete">No</a>
</div>
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" data-icon="check" data-inline="true">Yes</a>
<a href="#" data-role="button" data-icon="delete" data-inline="true">No</a>
</div>
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" data-icon="check" data-inline="true" data-mini="true">Yes</a>
<a href="#" data-role="button" data-icon="delete" data-inline="true" data-mini="true">No</a>
</div>
</div>
<div data-role="footer">
<h4>© 2014 T academy</h4>
</div>
</div>
</body>
</html>
출력 화면
7. 헤더 바와 풋터 바
finxed -> fixed임
14-08.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>14-08</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<style type="text/css">
.footer {
text-align: center;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header" data-position="fixed">
<h3>시인의 마을</h3>
<a href="#" data-icon="delete">취소</a>
<a href="#" data-icon="check">저장</a>
</div>
<div data-role="content">
<h3>희망을 만드는 사람이 되라</h3>
<p>
이 세상 사람들 모두 잠들고
어둠속에 갇혀서 꿈조차 잠이 들 때
홀로 일어난 새벽을 두려워말고
별을 보고 걸어가는 사람이 되라
희망을 만드는 사람이 되라
</p>
<p>
겨울밤은 깊어서 눈만 내리고
돌아갈 길 없는 오늘 눈오는 밤도
하루의 일을 끝낸 작업장 부근
촛불도 꺼져가는 어두운 방에서
슬픔을 사랑하는 사람이 되라
희망을 만드는 사람이 되라
</p>
<p>
절망도 없는 이 절망의 세상
슬픔도 없는 이 슬픔의 세상
사랑하며 살아가면 봄눈이 온다.
눈 맞으며 기다리던 기다림 만나
눈 맞으며 그리웁던 기다림 만나
얼씨구나 부등켜안고 웃어 보아라
절씨구나 뺨 부비며 울어 보아라
</p>
<p>
별을 보고 걸어가는 사람이 되어
희망을 만드는 사람이 되어
봄 눈 내리는 보리밭 길 걷는 자들은
누구든지 달려와서 가슴 가득히
꿈을 받아라
꿈을 받아라.
</p>
<p>정호승</p>
</div>
<div data-role="footer" data-position="fixed" class="footer">
<a href="#" data-icon="plus">추가</a>
<a href="#" data-icon="arrow-u">위로</a>
<a href="#" data-icon="arrow-d">아래로</a>
</div>
</div>
</body>
</html>
출력 화면
8. 네비게이션 바
14-09.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>14-09</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header" data-position="fixed">
<h3>header</h3>
<a href="#" data-icon="gear" class="ui-btn-right">Options</a>
<div data-role="navbar">
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="grid">Summary</a></li>
<li><a href="#" data-icon="star">Favs</a></li>
<li><a href="#" data-icon="gear">Setup</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
출력 화면
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| Javascript - jQuery Mobile 이벤트 (0) | 2015.02.02 |
|---|---|
| Javascript - jQuery Mobile 컴포넌트 - 컨텐트 서식 적용, 테마롤러 사용법 (0) | 2015.02.02 |
| Javascript - jQuery Mobile 컴포넌트 - 폼 (0) | 2015.01.30 |
| Javascript - jQuery Mobile 컴포넌트 - 리스트뷰 (0) | 2015.01.30 |
| Javascript - jQuery 기본 효과, 페이딩, 슬라이딩 (0) | 2015.01.29 |
| Javascript - 셀렉터 기본 개념 및 예제 (0) | 2015.01.28 |
| Javascript - jQuery와 jQuery Mobile 개요 및 aptana 개발환경 세팅 (0) | 2015.01.27 |
| Javascript - 간단한 가위바위보 게임 만들기 (2) | 2015.01.27 |