반응형
JQueryMobile은 우선 SPI(Single Page Interface)를 중점으로 설계되었다. SPI가 무엇이냐?
html페이지 하나에 여러 페이지를 다 작성하겠다는 것이다. html4의 #을 통한 즐겨찾기와 유사한데 틀린 점은 각 내부 페이지가 별개의 페이지로 보여진다는 것이다.
<a href="#about" data-role="button" data-transition="slide">slide</a>
<a href="#about" data-role="button" data-icon="delete" data-iconpos="left">about</a>
[Source 5]
html페이지 하나에 여러 페이지를 다 작성하겠다는 것이다. html4의 #을 통한 즐겨찾기와 유사한데 틀린 점은 각 내부 페이지가 별개의 페이지로 보여진다는 것이다.
...
<head>
...
<link rel="stylesheet" href="./libs/jquery.mobile-1.0a4.1.min.css" />
<head>
...
<link rel="stylesheet" href="./libs/jquery.mobile-1.0a4.1.min.css" />
<script src="./libs/jquery-1.5.2.min.js"></script>
<script src="./libs/jquery.mobile-1.0a4.1.min.js"></script>
</head>
...
...
[source 1] 초기 로드
<div data-role="page" id="home">
<div data-role="content">
...
소스 작성
...
소스 작성
...
</div>
</div>
</div>
[Source 2] SPI형태의 페이지 작성
[Source 3] 버튼
[그림 1] 버튼
[Source 4] 삭제 버튼
[그림 2] 삭제 버튼
<div data-role="controlgroup" data-type="horizontal">
<a href="#about" data-role="button">YES</a>
<a href="#about" data-role="button">NO</a>
<a href="#about" data-role="button">AAA</a>
</div>
반응형
'Devlopment > Mobile' 카테고리의 다른 글
| Android Drawing (0) | 2011.06.21 |
|---|---|
| 안드로이드 OS Version 및 이름 (0) | 2011.06.20 |
| Eclipse에서 안드로이드 개발시 Device가 안 잡힐 경우 (0) | 2011.06.17 |
| Mobile UI Framework (0) | 2011.06.16 |
| Mobile Browser Header 분석 (0) | 2011.06.16 |
| Hybrid App (0) | 2011.06.16 |
| Mobile UI/UX Guideline (0) | 2011.06.15 |
| App 개발 환경 (0) | 2011.06.13 |
| 구글맵 API 받기 (0) | 2010.08.31 |
| WebView - Web page not available (3) | 2010.08.30 |