Jquery 모바일
Jquery 모바일 (http://jquerymobile.com/)
모바일 페이지를 앱(application)처럼 만드는 JQuery 기반 프로그램이다.
네이티브 앱(native app) & 웹 앱(web app)
모바일의 UI를 완제품의 형태로 제공하기 때문에 디자인과 코딩에 대한 부담이 없거나 적다.
HTML 태그에 속성을 추가하는 방식으로 UI를 생성하기 때문에 자바스크립트와 같은 동적인 언어에 대한 이해가 없이도 사용할 수 있다.
상기 이유로 검색엔진 최적화와 같은 효과를 얻을 수 있다.
JQuery 모바일 사이트에서 직접 모듈을 다운받거나 CDN 방식으로 헤더에 링크를 시켜놓아도 된다.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
하나의 페이지는 html5 형태로 section 태그를 사용하여 구성할 수 있다.
즉, 하나의 html 파일 안에 여러 개의 section 태그를 사용하여 여러 개의 페이지를 구성할 수 있다.
data-role : HTML 요소에 직접 정의하여 태그와 데이터의 연관성을 준다. page, header, content, footer 등의 속성값이 있다.
- page : 지정한 영역이 하나의 페이지로 간주된다.
- header : 페이지의 header 영역을 정의
- footer : 페이지의 footer 영역을 정의
- content : 실제 페이지의 컨텐츠를 기술하는 영역
태그마다 data-role 형식으로 JQuery 모바일에서 태그를 JQuery 모바일용으로 인식하게 한다.
예제1) 하나의 html 파일로 2개의 모바일 페이지 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery Mobile 프레임워크 삽입하기</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- 첫 번째 페이지 -->
<section id="page1" data-role="page">
<header data-role="header">
<h1>JQuery Mobile</h1>
</header>
<div class="content" data-role="content">
<p>첫 번째 페이지</p>
<a href="#page2">두 번째 페이지로 이동</a>
</div>
<footer data-role="footer">
<h2>ⓒcopyright 2016</h2>
</footer>
</section>
<!-- 두 번째 페이지 -->
<section id="page2" data-role="page">
<header data-role="header">
<h1>JQuery Mobile</h1>
</header>
<div class="content" data-role="content">
<p>두 번째 페이지</p>
</div>
<footer data-role="footer">
<h2>ⓒcopyright 2016</h2>
</footer>
</section>
</body>
</html>
1) 첫 번째 페이지
2) 링크를 클릭하면 두 번째 페이지로 이동한다.
예제2) 2개의 html 파일로 내부 및 외부로 페이지 이동하기
1) 03_JQueryMobileExternalPage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery Mobile 내부 및 외부로 연결</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- 첫 번째 페이지 -->
<section id="page1" data-role="page">
<header data-role="header">
<h1>JQuery Mobile</h1>
</header>
<div class="content" data-role="content">
<p>첫 번째 페이지</p>
<a href="#page2">두 번째 페이지로 이동</a>
</div>
<footer data-role="footer">
<h2>ⓒcopyright 2016</h2>
</footer>
</section>
<!-- 두 번째 페이지 -->
<section id="page2" data-role="page">
<header data-role="header">
<h1>JQuery Mobile</h1>
</header>
<div class="content" data-role="content">
<p>두 번째 페이지</p>
<a href="#page3">세 번째 페이지로 이동</a>
</div>
<footer data-role="footer">
<h2>ⓒcopyright 2016</h2>
</footer>
</section>
<!-- 세 번째 페이지 -->
<section id="page3" data-role="page">
<header data-role="header">
<h1>JQuery Mobile</h1>
</header>
<div class="content" data-role="content">
<p>세 번째 페이지</p>
<a href="external.html">외부의 네 번째 페이지로 이동</a>
</div>
<footer data-role="footer">
<h2>ⓒcopyright 2016</h2>
</footer>
</section>
</body>
</html>
2) external.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery Mobile 프레임워크 외부 페이지</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- 네 번째 페이지 -->
<section id="page4" data-role="page">
<header data-role="header">
<h1>JQuery Mobile</h1>
</header>
<div class="content" data-role="content">
<p>네 번째 페이지</p>
<a href="#page1">외부의 첫 번째 페이지로 이동</a>
</div>
<footer data-role="footer">
<h2>ⓒcopyright 2016</h2>
</footer>
</section>
</body>
</html>
'jQuery Mobile' 카테고리의 다른 글
| Jquery 모바일: 트랜지션(Transition) (0) | 2016.05.31 |
|---|---|
| Jquery 모바일: 버튼 그룹 (0) | 2016.05.31 |
| Jquery 모바일: 버튼 아이콘 (0) | 2016.05.31 |
| Jquery 모바일: 다이얼로그(dialog) (0) | 2016.05.31 |
| Jquery의 동적 효과 (0) | 2016.05.27 |
