study:php:jquery_mobile_page의_기본적_구조

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- study:php:jquery_mobile_page의_기본적_구조 [2011/08/11 11:27]
mrkayhyun 새로 만듦
+++ study:php:jquery_mobile_page의_기본적_구조 [2011/08/11 14:07] (현재)
mrkayhyun
@@ 줄 1: / 줄 1: @@
   - jQuery mobile 기본 구조
+    - 기본구조
   <code php>
 <!DOCTYPE html>
@@ 줄 28: / 줄 29: @@
 </div>
 </body>
-  </code>
+</code>
+    - 기본구조2(다중페이지를 한페이지에 구성하는 법)
+<code php>
+<body>
+<div data-role="page" id="foo">
+	<div data-role="header">
+		<h1>Foo</h1>
+	</div>
+	<div data-role="content">
+		<p>I'm first in the source order so I'm shown as the page.</p>
+		<p>View internal page called <a href="#bar">bar</a></p>
+	</div>
+	<div data-role="footer">
+		<h4>Page Footer</h4>
+	</div>
+</div>
+<div data-role="page" id="bar">
+	<div data-role="header">
+		<h1>Bar</h1>
+	</div>
+	<div data-role="content">
+		<p>I'm first in the source order so I'm shown as the page.</p>
+		<p><a href="#foo">Back to foo</a></p>
+	</div>
+	<div data-role="footer">
+		<h4>Page Footer</h4>
+	</div>
+</div>
+</body>
+</code>
+  * <meta name="viewport" content="width=device-width, initial-scale=1"> : 구성된 ui와 widget들이 해당 모바일 기기의 가로와 세로 폭에 맞게 확대 또는 축소될수 있게 해주는 메타 태그이다.
+  * 기본적인 페이지의 구성은 <div>를 통해서 묶어 준다. 또한 jquery mobile 프레임워크를 사용하기 위해서 data-role속성을 사용한다. 기본적으로는 data-role이 page인 <div>태그 안에 헤더 <div>, 콘텐츠 <div>, 푸터 <div>를 작성하여 페이지를 구성한다.

study/php/jquery_mobile_page의_기본적_구조.1313029628.txt.gz · 마지막으로 수정됨: 2011/08/11 11:27 저자 mrkayhyun