jQueryMobile 일본 글 [출처]

http://d.hatena.ne.jp/pikotea/20101019/1287484040

jQuery Mobile 참조적인 것을 만들었습니다.

급히 叩き台에서 태클 등이 있으면 댓글주세요!

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