jQuery를 데이터 속성
jQuery를 모바일은 사용 HTML5는 data-* 속성 만들기 위해 "touch-friendly" 모바일 장치와 매력적인 모습을.
아래의 참조 목록은 bold value 기본 값을 지정합니다.
단추
버전 1.4에서 사용되지 않습니다. 사용 CSS 클래스 로 대신. 하이퍼 링크를 data-role="button" . 도구 모음 및 입력 필드에 버튼 요소와 링크는 자동으로 버튼으로 필요 스타일되지 않습니다 data-role="button" .
| 데이터 속성 | 값 | 기술 |
|---|---|---|
| data-corners | true | false | 버튼이 둥근 모서리가 없거나할지 여부를 지정합니다 |
| data-icon | Icons Reference | 버튼의 아이콘을 지정합니다. 기본값은 아이콘이 없다 |
| data-iconpos | left | right | top | bottom | notext | 아이콘의 위치를 지정합니다 |
| data-iconshadow | true | false | 버튼 아이콘 그림자이 없거나할지 여부를 지정합니다 |
| data-inline | true | false | 버튼 인라인 여부를할지 여부를 지정합니다 |
| data-mini | true | false | 버튼이 작거나 일정한 크기 여야할지 여부를 지정합니다 |
| data-shadow | true | false | 버튼 그림자이 없거나할지 여부를 지정합니다 |
| data-theme | letter (a-z) | 버튼의 테마 색상을 지정합니다 |
그룹 여러 버튼을 위해,와 용기 사용 data-role="controlgroup" 와 함께 속성 data-type="horizontal|vertical" 그룹 버튼에 대한 여부를 가로 또는 세로로 지정합니다.
확인란
레이블 및 입력 쌍 type="checkbox" .
| 데이터 속성 | 값 | 기술 |
|---|---|---|
| data-mini | true | false | 체크 박스가 작거나 일정한 크기 여야할지 여부를 지정합니다 |
| data-role | none | jQuery를 모바일 버튼과 같은 스타일의 체크 박스에 방지 |
| data-theme | letter (a-z) | 체크 박스의 테마 색상을 지정합니다 |
그룹 여러 확인란 위해, 사용 data-role="controlgroup" 와 함께 data-type="horizontal|vertical" 그룹이 수평 또는 수직으로 체크 박스에 있는지 여부를 지정할 수 있습니다.
접을 수 있는
와 컨테이너 내부의 HTML 마크 업 다음 헤더 요소 data-role="collapsible" .
| 데이터 속성 | 값 | 기술 |
|---|---|---|
| data-collapsed | true | false | 내용이 폐쇄 또는 확대할지 여부를 지정합니다 |
| data-collapsed-cue-text | sometext | 스크린 리더 소프트웨어 사용자를위한 음성 피드백을 제공하는 텍스트를 지정합니다. 기본값은 "내용을 축소합니다"입니다. |
| data-collapsed-icon | Icons Reference | 접을 수있는 버튼의 아이콘을 지정합니다. 기본값은 "플러스" |
| data-content-theme | letter (a-z) | 접을 수있는 콘텐츠의 테마 색상을 지정합니다. 또한 접을 수있는 콘텐츠에 둥근 모서리를 추가합니다 |
| data-expanded-cue-text | sometext | 스크린 리더 소프트웨어 사용자를위한 음성 피드백을 제공하는 텍스트를 지정합니다. 기본값은 "내용을 확장합니다"입니다. |
| data-expanded-icon | Icons Reference | 컨텐트가 확장 될 때 접힘 버튼 아이콘을 지정한다. 기본값은 "minus" |
| data-iconpos | left | right | top | bottom | 아이콘의 위치를 지정합니다 |
| data-inset | true | false | 접을 수있는 버튼이 둥근 모서리와 약간의 마진 여부와 스타일할지 여부를 지정합니다 |
| data-mini | true | false | 접을 수있는 버튼이 작거나 일정한 크기 여야할지 여부를 지정합니다 |
| data-theme | letter (a-z) | 접을 수있는 버튼의 테마 색상을 지정합니다 |
축소 설정
와 용기 내부의 축소 콘텐츠 블록 data-role="collapsibleset" .
| 데이터 속성 | 값 | 기술 |
|---|---|---|
| data-collapsed-icon | Icons Reference | 접을 수있는 버튼의 아이콘을 지정합니다. 기본값은 "플러스" |
| data-content-theme | letter (a-z) | 접을 수있는 콘텐츠의 테마 색상을 지정합니다 |
| data-expanded-icon | Icons Reference | 컨텐트가 확장 될 때 접힘 버튼 아이콘을 지정한다. 기본값은 "마이너스"입니다 |
| data-iconpos | left | right | top | bottom | notext | 아이콘의 위치를 지정합니다 |
| data-inset | true | false | collapsibles가 둥근 모서리와 약간의 마진 여부와 스타일할지 여부를 지정합니다 |
| data-mini | true | false | 접을 수있는 버튼이 작거나 일정한 크기 여야할지 여부를 지정합니다 |
| data-theme | letter (a-z) | 접을 세트의 테마 색상을 지정합니다 |
함유량
버전 1.4에서 사용되지 않는, 및 1.5. 컨테이너에서 제거 될 예정입니다 data-role="content" .
| 데이터 속성 | 값 | 기술 |
|---|---|---|
| data-theme | letter (a-z) | 콘텐츠의 테마 색상을 지정합니다 |
Controlgroup
<div> 또는 <fieldset> 와 컨테이너 data-role="controlgroup" . 그룹 단일 유형 (링크 기반의 버튼, 라디오 버튼, 체크 박스, 선택 요소)의 여러 버튼 스타일의 입력을. 폼 체크 박스와 라디오 버튼을 그룹화를 들어, <fieldset> 용기는 내부에 권장 <div> 로 "ui-fieldcontain" 레이블 스타일을 개선하기 위해, 클래스입니다.
| 데이터 속성 | 값 | 기술 |
|---|---|---|
| data-exclude-invisible | true | false | 둥근 모서리의 할당에 보이지 않는 아이들을 제외할지 여부를 지정합니다 |
| data-mini | true | false | 그룹이 작거나 일정한 크기 여야할지 여부를 지정합니다 |
| data-theme | letter (a-z) | controlgroup의 테마 색상을 지정합니다 |
| data-type | horizontal | vertical | 그룹이 수평 또는 수직으로 표시할지 여부를 지정합니다 |
대화
와 컨테이너 data-dialog="true" .
| 데이터 속성 | 값 | 기술 |
|---|---|---|
| data-close-btn | left | right | none | 닫기 버튼의 위치를 지정합니다 |
| data-close-btn-text | sometext | 닫기 버튼의 텍스트를 지정합니다 |
| data-corners | true | false | 대화 상자가 둥근 모서리이 없거나할지 여부를 지정합니다 |
| data-dom-cache | true | false | (가) 개별 페이지에 대한 jQuery를 DOM 캐시 또는하지를 취소할지 여부를 지정합니다 (true로 설정하면, 모든 모바일 장치에서 철저하게 DOM을 직접 테스트를 관리하는데주의를 기울여야 할 필요) |
| data-overlay-theme | letter (a-z) | 대화 상자 페이지의 오버레이 (배경) 색상을 지정합니다 |
| data-theme | letter (a-z) | 대화 상자 페이지의 테마 색상을 지정합니다 |
| data-title | sometext | 대화 페이지의 제목을 지정합니다 |
상승
와 컨테이너 data-enhance="false" 또는 data-ajax="false"
| 데이터 속성 | 값 | 기술 |
|---|---|---|
| data-enhance | true | false | 로 설정하면 "true" , (기본) jQuery를 모바일 자동으로 모바일 기기에 적합하다 페이지의 스타일을 것입니다. 프레임 워크가 페이지를 "false"로 스타일을하지 않습니다로 설정하는 경우 |
| data-ajax | true | false | 아약스를 통해 여부 페이지를로드할지 여부를 지정합니다 |
참고 : data-enhance="false" 와 함께 사용해야합니다 $.mobile.ignoreContentEnabled=true" 자동 스타일 페이지에 jQuery를 모바일을 중지 할 수 있습니다.
내부에 링크 또는 양식 요소 data-ajax="false" 할 때 용기는 프레임 워크의 탐색 기능에 의해 무시됩니다 $.mobile.ignoreContentEnabled true로 설정됩니다.
필드 컨테이너
버전 1.4에서 사용되지 않는, 1.5에서 제거 될 예정입니다. 사용 class="ui-fieldcontain instead" .와 컨테이너 data-role="fieldcontain" 라벨 / 폼 요소 쌍을 감싸합니다.
고정 도구 모음
와 컨테이너 data-role="header" 또는 data-role="footer" 함께와 data-position="fixed" 속성을.
| 데이터 속성 | 값 | 기술 |
|---|---|---|
| data-disable-page-zoom | true | false | 사용자가 / 확장 페이지를 확대하거나하지 할 수 있는지 여부를 지정합니다 |
| data-fullscreen | true | false | 툴바는 항상 위쪽 및 / 또는 아래쪽에 위치하도록 지정 |
| data-tap-toggle | true | false | 사용자가 탭 / 클릭 여부에 도구 모음 - 가시성을 전환 할 수 있는지 여부를 지정합니다 |
| data-transition | slide | fade | none | 탭 / 클릭이 발생할 때 전환 효과를 지정합니다 |
| data-update-page-padding | true | false | 모두 상단과 페이지 하단의 패딩 크기 조정, 전환 및 업데이트 할 지정 "updatelayout" 이벤트 (jQuery를 모바일은 항상에 패딩을 업데이트 "pageshow" 이벤트) |
| data-visible-on-page-show | true | false | 상위 페이지가 표시 될 때 도구 모음 - 가시성을 지정합니다 |
플립 토글 스위치
<input type="checkbox"> 의 데이터 역할 "flipswitch" :
| 데이터 속성 | 값 | 기술 |
|---|---|---|
| data-mini | true | false | 스위치가 작거나 일정한 크기 여야할지 여부를 지정합니다 |
| data-on-text | sometext | (기본값은 플립 스위치 텍스트 "의"지정 "On" ) |
| data-off-text | sometext | (기본값은 플립 스위치의 "오프"텍스트를 지정 "Off" ) |
보행인
와 컨테이너 data-role="footer" .
| 데이터 속성 | 값 | 기술 |
|---|---|---|
| data-id | sometext | 고유 ID를 지정합니다. 지속적인 바닥 글에 필요한 |
| data-position | inline | fixed | 바닥 글은 페이지의 콘텐츠와 인라인해야 또는 하단에 위치를 유지할지 여부를 지정합니다 |
| data-fullscreen | true | false | 바닥 글 항상 하단에있는 및 페이지 내용 위에 위치해야하는지 여부를 지정합니다 (약간 관통 참조) 여부 |
| data-theme | letter (a-z) | 바닥 글의 테마 색상을 지정합니다 |
참고 : 사용 전체 화면 위치 설정하려면 data-position="fixed" 다음 추가 data-fullscreen 요소에 속성을.
머리글
와 컨테이너 data-role="header" .
| 데이터 속성 | 값 | 기술 |
|---|---|---|
| data-id | sometext | 고유 ID를 지정합니다. 지속적인 헤더에 필요한 |
| data-position | inline | fixed | 헤더는 페이지 콘텐츠와 인라인해야 또는 상단에 위치를 유지할지 여부를 지정합니다 |
| data-fullscreen | true | false | 헤더는 항상 상단 및 페이지 내용 위에 위치해야하는지 여부를 지정합니다 (약간 관통 참조) 여부 |
| data-theme | letter (a-z) | 헤더의 테마 색상을 지정합니다 |
참고 : 사용 전체 화면 위치 설정하려면 data-position="fixed" 다음 추가 data-fullscreen 요소에 속성을.
입력
와 입력 type="text|search|etc." 또는 textarea elements .
| 데이터 속성 | 값 | 기술 |
|---|---|---|
| data-clear-btn | true | false | 입력이되는지 여부를 지정합니다 "clear" 버튼을 |
| data-clear-btn-text | text | 은 "명확한"버튼의 텍스트를 지정합니다. 기본값은 "clear text" |
| data-mini | true | false | 입력이 작거나 일정한 크기 여야할지 여부를 지정합니다 |
| data-role | none | jQuery를 모바일 버튼과 같은 스타일의 입력 / 텍스트 영역에 방지 |
| data-theme | letter (a-z) | 입력 필드의 테마 색상을 지정합니다 |
링크
모든 링크.
| 데이터 속성 | 값 | 기술 |
|---|---|---|
| data-ajax | true | false | 향상된 사용자 경험 및 전환에 대한 아약스를 통해 페이지를로드할지 여부를 지정합니다. false로 설정하면, jQuery를 모바일 정상적인 페이지 요청을 할 것입니다. |
| data-direction | reverse | 역 전환 애니메이션 (만 페이지 또는 대화에 대한) |
| data-dom-cache | true | false | (가) 개별 페이지에 대한 jQuery를 DOM 캐시 또는하지를 취소할지 여부를 지정합니다 (true로 설정하면, 모든 모바일 장치에서 철저하게 DOM을 직접 테스트를 관리하는데주의를 기울여야 할 필요) |
| data-prefetch | true | false | 그들이 사용할 수 있도록 사용자가 그들을 방문 할 때 DOM에 페이지를 프리 페치할지 여부를 지정합니다 |
| data-rel | back | dialog | external | popup | 링크가 작동하는 방법에 대한 옵션을 지정합니다. 위로 - 한 단계 다시 역사로 이동합니다. 대화 상자 - 역사에 추적되지 대화 상자와 같은 링크를 엽니 다. 외부 - 다른 도메인에 연결하십시오. 팝업 - 팝업 창을 엽니 다. |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | 한 페이지에서 다음으로 전환하는 방법을 지정합니다. 우리의 참조 jQuery를 모바일 전환 장을. |
| data-position-to | origin | jQuery selector | window | 팝업 상자의 위치를 지정합니다. 원산지 - 기본. 를 여는 링크를 통해 팝업을 배치합니다. jQuery를 선택 - 지정된 요소를 통해 팝업을 배치합니다. 윈도우 - 윈도우 화면의 중간에 팝업을 배치합니다. |
명부
<ol> 또는 <ul> 와 data-role="listview" .
| 데이터 속성 | 값 | 기술 |
|---|---|---|
| data-autodividers | true | false | 자동으로 목록 항목 여부를 분할할지 여부를 지정합니다 |
| data-count-theme | letter (a-z) | 카운트 거품의 테마 색상을 지정합니다 |
| data-divider-theme | letter (a-z) | 목록 디바이더의 테마 색상을 지정합니다 |
| data-filter | true | false | 목록의 여부를 검색 상자를 추가할지 여부를 지정합니다 |
| data-filter-placeholder | sometext | 버전 1.4에서 사용되지 않습니다. 대신 HTML 자리 속성을 사용합니다. 검색 상자 안의 텍스트를 지정합니다. 기본값은 "필터 항목 ..."입니다 |
| data-filter-theme | letter (a-z) | 검색 필터의 테마 색상을 지정합니다 |
| data-icon | Icons Reference | 목록의 아이콘을 지정합니다 |
| data-inset | true | false | 목록이 둥근 모서리와 약간의 마진 여부와 스타일할지 여부를 지정합니다 |
| data-split-icon | Icons Reference | 분할 버튼의 아이콘을 지정합니다. 기본값은 "화살표-R"입니다 |
| data-split-theme | letter (a-z) | 분할 버튼의 테마 색상을 지정합니다 |
| data-theme | letter (a-z) | 목록의 테마 색상을 지정합니다 |
목록 항목
<li> 내부 <ol> 또는 <ul> 와 data-role="listview" .
| 데이터 속성 | 값 | 기술 |
|---|---|---|
| data-filtertext | sometext | 요소를 필터링 할 때 검색 할 텍스트를 지정합니다. 이 텍스트는 다음 대신 실제 목록 항목 텍스트의 필터링됩니다 |
| data-icon | Icons Reference | 리스트 아이템의 아이콘을 지정 |
| data-role | list-divider | 목록 항목에 대한주기를 지정합니다 |
| data-theme | letter (a-z) | 목록 항목의 테마 색상을 지정합니다 |
참고 : 데이터 아이콘이 링크 목록 항목에서만 작업 때문이다.
Navbar의
<li> 와 컨테이너 내부 요소 data-role="navbar" .
| 데이터 속성 | 값 | 기술 |
|---|---|---|
| data-icon | Icons Reference | 리스트 아이템의 아이콘을 지정 |
| data-iconpos | left | right | top | bottom | notext | 아이콘의 위치를 지정합니다 |
Navbars는 자신의 부모 컨테이너에서 테마 견본을 상속합니다. 이는 네비게이션 바로 데이터 테마 속성을 설정하는 것은 불가능하다. 데이터-테마 속성은 Navbar의 내부 각 링크에 개별적으로 설정할 수 있습니다.
페이지
와 컨테이너 data-role="page" .
| 데이터 속성 | 값 | 기술 |
|---|---|---|
| data-dom-cache | true | false | (가) 개별 페이지에 대한 jQuery를 DOM 캐시 또는하지를 취소할지 여부를 지정합니다 (true로 설정하면, 모든 모바일 장치에서 철저하게 DOM을 직접 테스트를 관리하는데주의를 기울여야 할 필요) |
| data-overlay-theme | letter (a-z) | 대화 페이지 오버레이 (배경) 색상을 지정합니다 |
| data-theme | letter (a-z) | 페이지의 테마 색상을 지정합니다 |
| data-title | sometext | 페이지 제목을 지정합니다 |
| data-url | url | URL이 페이지를 요청하는 데 사용하는 대신 상기 URL의 갱신 값 |
팝업
와 컨테이너 data-role="popup" .
| 데이터 속성 | 값 | 기술 |
|---|---|---|
| data-corners | true | false | 팝업이 둥근 모서리가 없거나할지 여부를 지정합니다 |
| data-dismissible | true | false | 팝업은 팝업의 외부를 클릭 여부에 의해 폐쇄할지 여부를 지정합니다 |
| data-history | true | false | 열 때 팝업이 브라우저 기록 항목을 생성할지 여부를 지정합니다. false로 설정하면 역사 항목을 생성하지 않으며, 다음 브라우저의 "뒤로"버튼을 통해 닫혀 수 없습니다 |
| data-overlay-theme | letter (a-z) | 팝업 상자의 오버레이 (배경) 색상을 지정합니다. 기본값은 투명한 배경 (없음)입니다. |
| data-shadow | true | false | 팝업 상자가 그림자이 없거나할지 여부를 지정합니다 |
| data-theme | letter (a-z) | 팝업 상자의 테마 색상을 지정합니다. 기본 상속는 "none" 투명 팝업을 설정하지 |
| data-tolerance | 30, 15, 30, 15 | 윈도우의 가장자리까지의 거리를 지정합니다 ( top, right, bottom, left ) |
와 앵커 data-rel="popup" :
| 데이터 속성 | 값 | 기술 |
|---|---|---|
| data-position-to | origin | jQuery selector | window | 팝업 상자의 위치를 지정합니다. 원산지 - 기본. 를 여는 링크를 통해 팝업을 배치합니다. jQuery를 선택 - 지정된 요소를 통해 팝업을 배치합니다. 윈도우 - 윈도우 화면의 중간에 팝업을 배치합니다. |
| data-rel | popup | 팝업 상자를 여는 |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | 한 페이지에서 다음으로 전환하는 방법을 지정합니다. 우리의 참조 jQuery를 모바일 전환 장을. |
라디오 버튼
레이블 및 입력 쌍 type="radio" .
| 데이터 속성 | 값 | 기술 |
|---|---|---|
| data-mini | true | false | 버튼이 작거나 일정한 크기 여야할지 여부를 지정합니다 |
| data-role | none | jQuery를 모바일 스타일에 방지 radiobuttons 향상된 버튼으로 |
| data-theme | letter (a-z) | 라디오 버튼의 테마 색상을 지정합니다 |
그룹 여러 라디오 버튼까지, 사용 data-role="controlgroup" 와 함께 data-type="horizontal|vertical" 가로 또는 세로 여부를 그룹에 버튼을 지정할 수 있습니다.
고르다
모든 <select> 요소를.
| 데이터 속성 | 값 | 기술 |
|---|---|---|
| data-icon | Icons Reference | 선택 요소의 아이콘을 지정합니다. 기본값은 "arrow-d" |
| data-iconpos | left | right | top | bottom | notext | 아이콘의 위치를 지정합니다 |
| data-inline | true | false | 선택 요소가 인라인 여부를할지 여부를 지정합니다 |
| data-mini | true | false | 선택이 작거나 일정한 크기 여야할지 여부를 지정합니다 |
| data-native-menu | true | false | false로 설정하면 (당신이 선택 메뉴는 모든 모바일 기기에서 동일하게 표시 할 경우 권장) jQuery의 사용자 정의 선택 메뉴를 사용하여 |
| data-overlay-theme | letter (a-z) | jQuery의 사용자 정의 선택 메뉴의 테마 색상 지정 (와 함께 사용 data-native-menu="false" ) |
| data-placeholder | true | false | 온 설정할 수 있습니다 <option> 비 네이티브 선택의 요소 |
| data-role | none | jQuery를 모바일 버튼과 스타일을 선택 요소 방지 |
| data-theme | letter (a-z) | 선택 요소의 테마 색상을 지정합니다 |
그룹 배수로, 요소를 선택하고 사용하는 data-role="controlgroup" 와 함께 data-type="horizontal|vertical" 수평 또는 수직 여부를 그룹에 요소를 지정할 수 있습니다.
슬라이더
와 입력 type="range" .
| 데이터 속성 | 값 | 기술 |
|---|---|---|
| data-highlight | true | false | 슬라이더 트랙이 강조 표시 여부할지 여부를 지정합니다 |
| data-mini | true | false | 슬라이더가 작거나 일정한 크기 여야할지 여부를 지정합니다 |
| data-role | none | jQuery를 모바일 버튼과 같은 스타일의 슬라이더 컨트롤에 방지 |
| data-theme | letter (a-z) | 슬라이더 컨트롤의 테마 색상 지정 (입력을 처리하고 추적) |
| data-track-theme | letter (a-z) | 슬라이더 트랙의 테마 색상을 지정합니다 |