http://d.hatena.ne.jp/pikotea/20101019/1287484040
Page
| 요소 | 특성 | 값 | 개요 |
|---|---|---|---|
| div | data - role | page | 페이지 |
| 설정 | 값 | 기본 | 비고 |
|---|---|---|---|
| data - fullscreen | true | 전체 화면 | |
| false | * | ||
| data - theme | 임의 | a | 기본 테마는 a ~ c |
Header
| 요소 | 특성 | 값 | 개요 |
|---|---|---|---|
| div | data - role | header | 헤더 Page 포함 |
| 설정 | 값 | 기본 | 비고 |
|---|---|---|---|
| data - nobackbtn | true | Back 버튼 자동 표시 (되지 않는 것) | |
| false | * | ||
| data - position | inline | * | |
| fixed | 화면 하단에 고정 표시 | ||
| data - theme | 임의 | a | 기본 테마는 a ~ c |
Content
| 요소 | 특성 | 값 | 개요 |
|---|---|---|---|
| div | data - role | content | 페이지 내용 Page 포함 |
| 설정 | 값 | 기본 | 비고 |
|---|---|---|---|
| data - theme | 임의 | a | 기본 테마는 a ~ c |
Footer
| 요소 | 특성 | 값 | 개요 |
|---|---|---|---|
| div | data - role | footer | 바닥글 Page 포함 |
| 설정 | 값 | 기본 | 비고 |
|---|---|---|---|
| data - position | inline | * | |
| fixed | 화면 하단에 고정 표시 | ||
| data - id | 임의 | 여러 Page에 동일한 Footer을 정의한다. 화면 전환시 화면이 사라지지 않는다. 동일한 data - id를 가진 Footer를 자식 요소없이 정의한다. (필수 data - position : fixed) ※ 자식 요소는 동일한 data - id를 가진 HTML 마지막으로 정의한다. (다른 좋은 방법이 있는지 알 수 없음) | |
| class | ui - bar | 바닥글 요소의 자동 패딩 | |
| data - theme | 임의 | a | 기본 테마는 a ~ c |
Navigation Bar
| 요소 | 특성 | 값 | 비고 |
|---|---|---|---|
| div | data - role | navbar | 화면 전환시 화면이 사라지지 않는다. Footer 요소에 포함한다. data - id의 차이점은 Footer 내용을 미묘하게 바꾸는 것이 가능 (필수 data - position : fixed) |
Page Link
| 요소 | 특성 | 값 | 개요 |
|---|---|---|---|
| a | - | - |
효과와 함께 화면 전환한다. 링크된 Page 요소를 # id로 지정하거나 URL을 상대 경로 지정으로한다. 다음 중 하나를 지정하면 일반 링크된다. rel : external target : _blank data - request - type : http |
| 설정 | 값 | 기본 | 비고 |
|---|---|---|---|
| data - transition | slide | * | 화면 전환 효과 |
| slideup | |||
| slidedown | |||
| pop | |||
| fade | |||
| flip | |||
| data - request - type | http | 일반 링크 |
Dialog
| 요소 | 특성 | 값 | 개요 |
|---|---|---|---|
| a | data - rel | dialog | 링크를 대화로 표시한다. Page 요소를 # id로 지정하거나 URL을 상대 경로 지정으로한다. |
| 설정 | 값 | 기본 | 비고 |
|---|---|---|---|
| data - transition | slideup | 대화 효과 | |
| pop | * | ||
| flip |
Button
| 요소 | 특성 | 값 | 개요 |
|---|---|---|---|
| input | type | button | 버튼 |
| submit | |||
| reset | |||
| image | |||
| a | data - role | button |
| 설정 | 값 | 기본 | 비고 |
|---|---|---|---|
| data - icon | arrow - l | 아이콘 종류 | |
| arrow - r | |||
| arrow - u | |||
| arrow - d | |||
| delete | |||
| plus | |||
| minus | |||
| check | |||
| gear | |||
| refresh | |||
| forward | |||
| back | |||
| grid | |||
| star | |||
| alert | |||
| info | |||
| data - iconpos | left | * | 아이콘 위치 |
| right | |||
| notext | |||
| class | ui - btn - left | * | 버튼 위치 |
| ui - btn - right | |||
| ui - btn - active | 선택 상태 | ||
| data - theme | 임의 | a | 기본 테마는 a ~ c |
Inline
| 요소 | 특성 | 값 | 개요 |
|---|---|---|---|
| div | data - inline | true | 여러 요소를 1 줄로 표시한다. |
| false |
Control Group
| 요소 | 특성 | 값 | 개요 |
|---|---|---|---|
| div | data - role | controlgroup | 여러 요소를 그룹화한다. Button, Radio, Checkbox 요소 등 |
| 설정 | 값 | 기본 | 비고 |
|---|---|---|---|
| data - type | vertical | * | 세로로 그룹화 |
| horizontal | 가로로 그룹핑 |
Grid
| 요소 | 특성 | 값 | 비고 |
|---|---|---|---|
| div | class | ui - grid - a | ui - grid - a는 가로 2 분할, ui - grid - b는 가로 3 분할. 자식으로 div 요소의 class : ui - block - a - ui - block - c에 대응한다. |
| ui - grid - b | |||
| fieldset | class | ui - grid - a | |
| ui - grid - b | |||
| data - theme | 임의 | a | 기본 테마는 a ~ c |
Collapsible
| 요소 | 특성 | 값 | 비고 |
|---|---|---|---|
| div | data - role | collapsible | 개폐 가능한 블록. 제목이 필수 (h1 ~ h6 요소) |
| 설정 | 값 | 기본 | 비고 |
|---|---|---|---|
| data - state | collapsed | 초기 표시를 닫은 상태로 | |
| data - theme | 임의 | a | 기본 테마는 a ~ c |
Fieldcontain
| 요소 | 특성 | 값 | 비고 |
|---|---|---|---|
| div | data - role | fieldcontain | Form의 자식 요소를 묶으면 외형이 약간 변화하지만 상세 불명. (화면 크기가 바뀌었을 때 위치 조정?) |
| fieldset |
Form Elements
| 요소 | 특성 | 값 | 비고 |
|---|---|---|---|
| input | type | text | 텍스트 입력 |
| password | 암호 입력 | ||
| search | 검색창 | ||
| range | 범위 입력 | ||
| radio | 라디오 버튼 label 요소가 필요합니다. label의 for 속성 radio 요소의 id를 설정한다. | ||
| checkbox | 확인란 label 요소가 필요합니다. label의 for 속성에 checkbox 요소의 id를 설정한다. | ||
| select | - | - | 셀렉트 박스 입력 모든 option 요소가 Dialog 형식으로 표시되지 않는 경우 Page 형식으로 표시한다. |
| data - role | slider | 플립 토글 스위치 option 요소를 2 개를 필요가있다. | |
| textarea | - | - | 텍스트 영역 입력 |
| 설정 | 값 | 기본 | 비고 |
|---|---|---|---|
| data - theme | 임의 | a | 기본 테마는 a ~ c |
List
| 요소 | 특성 | 값 | 비고 |
|---|---|---|---|
| ul | data - role | listview | 목록 (List / Read - only List) |
| ol | data - role | listview | 번호 매기기 목록 (Numbered List) |
| 설정 | 값 | 기본 | 비고 |
|---|---|---|---|
| data - inset | true | 목록 화면 너비로 포장하지 않는다 | |
| false | * | ||
| data - filter | true | 목록에서 검색을 검색 상자 표시 | |
| false | * | ||
| data - theme | 임의 | a | 기본 테마는 a ~ c |
기타 ※ li 요소 등에 대한 지정. 여러 조합 가능
| 목록 형식 | 조건 | 비고 |
|---|---|---|
| 링크 매기기 목록 (Linked List) |
자식 요소 a 요소를 포함 | 링크 표시 |
| 상자 목록 (Nested List) |
자식 요소 ul 요소를 포함 | 목록을 중첩 |
| 구분 단추 목록 Split button List |
자식 요소 a 요소 img 요소, h1 ~ h6 요소, p 요소 등 | 목록에 여러 요소를 표시하는 |
| 분할 목록 | li 요소 data - role : list - divider를 지정한다. | 목록 제목보기 |
| 카운트 버블 | 자식 요소 span 요소를 마신다. span 요소에 class : ui - li - count를 지정한다. | 카운트보기 |
| 파일 | 자식 요소에 img 요소를 포함 | 파일보기 |
| 아이콘 | 자식 요소에 img 요소를 포함한다. img 요소에 class : ui - li - icon을 지정한다. | 아이콘 더보기 |
| 레이블 | 자식 요소 h1 ~ h6 요소를 포함한다. | 레이블을 표시하려면 |
| 비고 | 자식 요소 p 요소를 포함한다. | 레이블 아래 비고보기 |
| 보충 | 자식 요소 p 요소를 포함한다. p 요소에 class : ui - li - aside를 지정한다. | 오른쪽 상단에 보충보기 |
'영삼이의 IT정보' 카테고리의 다른 글
| 자바스크립트 명령어 (0) | 2011.11.04 |
|---|---|
| 아이폰에 카메라 렌즈를 장착하게 된다면? (0) | 2011.11.02 |
| jQueryMobile 일본 글 [출처] (0) | 2011.10.31 |
| 데이터베이스와 테이블생성 (0) | 2011.10.28 |
| 블루투스 통신을 이용한 숫자 키패드 앱(app) 출시 - 블루키패드 (0) | 2011.10.26 |
