영삼이의 IT정보2011. 10. 31. 05:10

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를 지정한다. 오른쪽 상단에 보충보기

 

Posted by 다오나무