jQuery Mobile 일본글

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