jQuery Mobile 템플릿을 사용하여 Layout 기본 구조를 파악해보자.
jQuery Mobile 에 대한 자세한 설명은 http://www.w3schools.com/jquerymobile/default.asp 에서 영문으로 찬찬히 읽어가면서 습득하면 도움된다.
jQuery Mobile 버전이 달라지면서 표시되는 색상도 변경될 수 있으므로 무조건 버전을 높은걸 사용하는게 좋지 않을 수도 있다. 높은 버전을 사용하면 변경된 부분을 파악해서 수정해주어야 한다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="pragma" content="no-cache" />
<!-- Include meta tag to ensure proper rendering and touch
zooming -->
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
<!-- Include jQuery Mobile stylesheets -->
<link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css" />
<!-- Include the jQuery library -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>Header title</h1>
</div>
<div id="content" data-role="content" data-theme="e">
<ul data-role="listview">
<?php
echo '<li>';
echo '<a href="#">목록이 없습니다.</a>';
echo '</li>';
?>
</ul>
</div>
<div data-role="footer" data-position="fixed" data-theme="d">
<table>
<tr>
<td width="15%"><a href="index.html" data-role="button" data-icon="plus" data-iconpos="left">추가</a>
</td>
<td width="70%" align=center>Footer Title</td>
<td width="15%"></td>
</tr>
</table>
</div>
</div>
</body>
</html>
일반적인 웹 사이트의 경우 1 페이지 = 1 HTML 파일이지만, jQuery Mobile 에서는 data-role 속성 'page'를 갖는 div 요소가 1페이지가 된다.
http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_pages
에서 보면 1 페이지 안에
<div data-role="page" id="pageone">
<div data-role="page" id="pagetwo">
로 구분하여 작성된 것을 실행해 볼 수 있다. 즉 HTML 페이지는 1Page이지만, jQuery Mobile 에서는 2Page 인 것처럼 만들 수 있다는 의미다.
data-theme="b" 를 사용하여 테마를 변경할 수 있다. (a ~ e 까지 5개 테마)
data-inset="true" 는 모서리를 둥글게 처리
data-split-icon="gear" : 스플릿된 우측모양이 기어모양
data-position="fixed" : 하단에 고정하는 기능
data-rel="dialog" : 다이얼로그 팝업창으로 띄워라
<div data-role="header" data-add-back-btn="true" data-back-btn-text="이전">data-add-back-btn="true" : Back 버튼 표시
data-back-btn-text="뒤로" : 라벨 변경
<ul data-role="listview" data-theme="e" data-inset="true">
data-theme="e" : 리스트 테마의 변경
data-inset="true" : 모서리를 둥글게 처리
<li data-theme="b" >
data-theme="b" : 해당 항목만 별도로 리스트 테마 변경
<li data-role="list-divider">
data-role="list-divider" : 리스트에 제목 설정
<span class="ui-li-count">10</span><!-- class="ui-li-count" 은 카운트 버블 표시 -->
<ul data-role="listview" data-count-theme="b" data-filter="true" data-filter-placeholder="검색어">
<!--data-count-theme="c" : 카운드 버블의 테마 변경 -->
<!--data-filter="true" : 검색 필터 => 일치하는 검색어만 표시됨 -->
<!--data-filter-placeholder="검색어" : 플레이스 홀더 변경 -->
<li><a href="#index" data-transition="slideup">
<!--data-transition="slideup" 위쪽으로 슬라이드되면서 페이지 전환 -->
<h3>메인 페이지</h3>
</a></li>
<li><a href="#about" data-transition="slide">
<!--data-transition="slide" 왼쪽으로 슬라이드되면서 페이지 전환 -->
data-transition="flip"
data-transition="flip" data-direction="reverse"
<li><a href="#access" data-transition="slide">
<p class="ui-li-aside">보충정보 표시</p>
<!--class="ui-li-aside" 속성 추가시 보충정보 표시됨 -->
<h3>오시는 길</h3>
<p>설명 내용</p> <!-- 설명문이 있는 리스트 표시됨 -->
<span class="ui-li-count">99</span>
<!-- class="ui-li-count" 은 카운트 버블 표시 -->
</a></li>
<li><a href="#contact" data-transition="pop">
<p class="ui-li-aside">보충정보 표시</p>
<!--class="ui-li-aside" 속성 추가시 보충정보 표시됨 -->
<h3>문의</h3>
<p>설명 내용</p> <!-- 설명문이 있는 리스트 표시됨 -->
</a></li>
<div data-role="content">
<form action="form.php" method="post">
<div data-role="fieldcontain">
<label for="name">이름</label>
<input type="text" id="name"><!-- id는 전체 소스 기준으로 중복되지 않게 처리해라. -->
</div>
<div data-role="fieldcontain">
<label for="gender">성별</label>
<select name="gender" id="gender" data-role="slider"><!--플립스위치 표시 -->
<option value="남자">남자</option>
<option value="여자">여자</option>
</select>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>주제별 문의</legend>
<input type="checkbox" name="type1" id="type1" value="수주">
<label for="type1">프로그램 수주</label>
<input type="checkbox" name="type2" id="type2" value="기획">
<label for="type2">프로그램 기획</label>
<input type="checkbox" name="type3" id="type3" value="개발">
<label for="type3">프로그램 개발</label>
<input type="checkbox" name="type4" id="type4" value="배포">
<label for="type4">프로그램 배포</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<label for="comment">문의 내용</label>
<textarea id="comment"></textarea>
</div>
<div data-role="fieldcontain">
<input type="button" value="취소" data-theme="a" data-icon="delete" data-inline="true">
<input type="submit" value="전송" data-theme="a" data-icon="arrow-r" data-inline="true">
</div>
</form>
</div>
jQuery 아이콘 모양은 http://demos.jquerymobile.com/1.4.5/icons/ 에서 참조하면 된다.
data-role 의 설명은 http://blog.naver.com/kimchangyoun/70184929188 참조
'Web 프로그램 > Layout' 카테고리의 다른 글
| bxslider 사용 예제 (폴더내 파일 자동 인식) (0) | 2017.04.28 |
|---|---|
| [PHP] 현재 디렉토리 경로 설정 (자동인식) (0) | 2017.02.20 |
| 모바일, PC 구분하는 코드 (0) | 2017.02.12 |
| 부트스트랩 테이블 Layout 구조 파악 (0) | 2017.02.01 |
| HTML5 템플릿 구조 (0) | 2016.10.30 |
Link2Me