adminschool.net wiki

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.

  - jQuery mobile 기본 구조
    - 기본구조
  <code php>
<!DOCTYPE html> 
<html> 
	<head> 
	<title>jquery list</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 	 	
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head> 
<body>
<!--page-->	 
<div data-role="page" id="j_list">
	<!--header-->
	<div data-role="header">
		<h1>header part</h1>
	</div>
	<!--content-->
	<div data-role="content">	
		<h1>content part</h1>
	</div>
	<!--footer-->
	<div data-role="footer">
		<h4>footer part</h4>
	</div>
</div>
</body>
</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>를 작성하여 페이지를 구성한다.

adminschool.net wiki

사용자 도구

사이트 도구

문서 도구