jQuery Mobile Data 속성

jQuery 데이터 속성

jQuery Mobile은 HTML5 data-* 속성을 사용하여 모바일 장치에 "触摸友好"한美观的外观를 만듭니다.

아래의 참조 목록에서 굵은 값이 기본 값을 지정합니다.

버튼

data-role="button"를 가진 슈퍼 링크. 툴바의 버튼 요소와 링크 및 입력 필드는 자동으로 버튼 스타일을 설정되며 data-role="button"는 필요하지 않습니다.

Data 속성 값 설명
data-corners true | false 버튼에 둥근 모서리가 있는지 없는지 지정합니다.
data-icon 아이콘 참조 버튼의 아이콘을 지정합니다. 기본적으로 아이콘은 없습니다.
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" 속성을 가진 컨테이너를 사용하여 수평 또는 수직 조합 버튼을 지정하세요.

체크박스

label과 type="checkbox"의 input은 짝입니다. 자동으로 버튼 스타일로 설정되며 data-role가 필요하지 않습니다.

Data 속성 값 설명
data-mini true | false 체크박스가 소형인지 일반 크기인지 결정.
data-role none jQuery Mobile가 체크박스를 버튼 스타일로 설정하지 않도록 방지.
data-theme letter (a-z) 체크박스의 주제 색상을 결정.

훌륭:여러 체크박스를 조합하려면 data-role="controlgroup" 및 data-type="horizontal|vertical"를 사용하여 수직 또는水平的 조합 체크박스를 결정.

Collapsible

제목 요소, 이후에는 data-role="collapsible" 속성을 가진 컨테이너 내의 어떤 HTML 태그도 포함.

Data 속성 값 설명
data-collapsed true | false 내용이 닫혀야 할지 펼쳐져야 할지 결정.
data-collapsed-icon 아이콘 참조 고정 가능한 버튼의 아이콘. 기본적으로 "plus"입니다.
data-content-theme letter (a-z) 고정 가능한 내용의 주제 색상을 결정. 고정 가능한 내용에 둥글기도 추가.
data-expanded-icon 아이콘 참조 내용이 펼쳐졌을 때 고정 가능한 버튼의 아이콘. 기본적으로 "빗금"입니다.
data-iconpos left | right | top | bottom 아이콘의 위치를 정의합니다.
data-inset true | false 고정 가능한 버튼이 둥글고 마argins를 가지는 스타일을 가지는지 결정.
data-mini true | false 고정 가능한 버튼이 소형인지 일반 크기인지 결정.
data-theme letter (a-z) 고정 가능한 버튼의 주제 색상을 결정.

Collapsible Set

data-role="collapsible-set" 속성을 가진 컨테이너 내의 고정 가능한 내용 블록.

Data 속성 값 설명
data-collapsed-icon 아이콘 참조 고정 가능한 버튼의 아이콘. 기본적으로 "플러스"입니다.
data-content-theme letter (a-z) 고정 가능한 내용의 주제 색상을 결정.
data-expanded-icon 아이콘 참조 내용이 펼쳐졌을 때 고정 가능한 버튼의 아이콘. 기본적으로 "빗금"입니다.
data-iconpos left | right | top | bottom | notext 아이콘의 위치를 정의합니다.
data-inset true | false 고정 가능한 버튼이 둥글고 마argins를 가지는 스타일을 가지는지 결정.
data-mini true | false 고정 가능한 버튼이 소형인지 일반 크기인지 결정.
data-theme letter (a-z) 고정 가능한 집합의 주제 색상을 결정.

Content

data-role="content" 속성을 가진 컨테이너.

Data 속성 값 설명
data-theme letter (a-z) 컨텐츠의 주제 색상을 결정. 기본적으로 "c"입니다.

Controlgroup

data-role="controlgroup" 속성을 가진 <div> 또는 <fieldset> 컨테이너. 여러 버튼 스타일의 단일 유형 input을 조합합니다(링크 버튼, 단일 선택 버튼, 체크박스, 선택 메뉴 기반).

Data 속성 값 설명
data-mini true | false 소형 또는 일반 크기의 조합을 결정.
data-type horizontal | vertical 수직 또는水平的 표시를 결정.

Dialog

data-role="dialog"의 컨테이너나 data-rel="dialog"의 링크.

Data 속성 값 설명
data-close-btn-text sometext 대화 상자의 닫기 버튼에 사용할 텍스트를 정의합니다.
data-dom-cache true | false 个别 페이지에 대해 jQuery DOM 캐시를 지우기 위한지 정의합니다. (true로 설정되면, DOM 관리에 주의하고 모든 모바일 장치를 전면적으로 테스트할 필요가 있습니다.)
data-overlay-theme letter (a-z) 대화 페이지의 덮어쓰기(배경) 색상을 지정합니다.
data-theme letter (a-z) 대화 페이지의 주제 색상을 정의합니다.
data-title sometext 대화 페이지의 제목을 정의합니다.

Enhancement

data-enhance="false" 또는 data-ajax="false" 속성을 가진 컨테이너.

Data 속성 값 설명
data-enhance true | false "true"로 설정되면 (기본값), jQuery Mobile가 페이지에 스타일을 추가하여 모바일 장치에 더 적합하게 만듭니다. "false"로 설정되면 프레임워크가 페이지 스타일을 설정하지 않습니다.
data-ajax true | false 페이지를 AJAX를 통해 로드할지 정의합니다.

주석:data-enhance="false"를 사용하여, 예를 들어 jQuery.mobile.ignoreContentEnabled=true와 함께 사용하여 jQuery Mobile가 페이지 스타일을 자동으로 추가하는 것을 방지합니다.

jQuery.mobile.ignoreContentEnabled이 true로 설정되면, data-ajax="false" 컨테이너 내의 모든 링크나 양식 요소가 프레임워크의 네비게이션 기능에 의해 무시됩니다.

Fieldcontainer

label/form 요소 쌍의 data-role="fieldcontain" 컨테이너를 포장합니다.

Fixed Toolbar

data-role="header" 또는 data-role="footer" 속성 및 data-position="fixed" 속성을 가진 컨테이너.

Data 속성 값 설명
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 resize, transition 및 "updatelayout" 이벤트가 발생할 때 페이지 상하 내간격을 업데이트합니다. (jQuery Mobile는 항상 "pageshow" 이벤트가 발생할 때 내간격을 업데이트합니다.)
data-visible-on-page-show true | false 부모 페이지에서 표시될 도구栏의可见성을 정의합니다.

플립 토글 스위치

data-role="slider" 속성을 가진 하나의 <select> 요소와 두 개의 <option> 요소.

Data 속성 값 설명
data-mini true | false 스위치가 소형인지, 일반 크기인지 정의합니다.
data-role none jQuery Mobile이 토글 스위치를 버튼 스타일로 설정하지 않도록 합니다.
data-theme letter (a-z) 토글 스위치의 주제 색상을 정의합니다.
data-track-theme letter (a-z) 트랙의 주제 색상을 정의합니다.

푸터

data-role="footer" 속성을 가진 컨테이너.

Data 속성 값 설명
data-id sometext 고유한 ID를 정의합니다. 영구 푸터에 필요합니다.
data-position inline | fixed 푸터와 페이지 내용이 행간 관계인지, 아니면 밑에 고정되는지 정의합니다.
data-fullscreen true | false 페이지가 항상 밑에 위치하고 페이지 내용을 덮어씁니다(약간 투명하게).
data-theme letter (a-z) 푸터의 주제 색상을 정의합니다. 기본적으로 "a"입니다.

주석:전체 화면 위치를 활성화하려면 data-position="fixed"를 사용한 후 해당 요소에 data-fullscreen 속성을 추가합니다.

헤더

data-role="header"의 컨테이너.

Data 속성 값 설명
data-id sometext 고유한 ID를 정의합니다. 영구 헤더에 필요합니다.
data-position inline | fixed 헤더와 페이지 내용이 행간 관계인지, 아니면 위에 고정되는지 정의합니다.
data-fullscreen true | false 페이지가 항상 위에 위치하고 페이지 내용을 덮어씁니다(약간 투명하게).
data-theme letter (a-z) 헤더의 주제 색상을 정의합니다. 기본적으로 "a"입니다.

주석:전체 화면 위치를 활성화하려면 data-position="fixed"를 사용한 후 해당 요소에 data-fullscreen 속성을 추가합니다.

링크

모든 링크, data-role="button"의 링크 및 양식 제출 버튼 포함.

Data 속성 값 설명
data-ajax true | false 페이지를 AJAX를 통해 로드하는지 정의합니다. 사용자 경험과 전환을 개선합니다. false로 설정되면 jQuery Mobile은 일반 페이지 요청을 합니다.
data-direction 역전 이동 애니메이션을 역으로 실행합니다(페이지나 대화 상자에만 사용)
data-dom-cache true | false 개별 페이지의 jQuery DOM 캐시를 지우는지 여부를 지정합니다. (true로 설정되면, DOM 관리에 주의하고 모든 모바일 장치를 전면적으로 테스트해야 합니다.).
data-prefetch true | false 페이지를 DOM에 미리 가져오는지 정의합니다. 사용자가 접근할 때 사용 가능하게 합니다.
data-rel 뒤로 | 대화 상자 | 외부 | 팝업 링크의 동작 방식에 대한 옵션을 정의합니다. 뒤로 - 히스토리 기록에서 한 단계 뒤로 이동합니다. 대화 상자 - 페이지를 대화 상자로 엽니다. 히스토리에 기록하지 않습니다. 외부 - 다른 도메인으로 연결합니다. 열기 - 팝업 창을 엽니다.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none 한 페이지에서 다음 페이지로 이동하는 방법을 지정합니다. jQuery Mobile 트랜지션을 참조하세요.
data-position-to origin | jQuery selector | window 팝업의 위치를 지정합니다. 출발 - 기본 설정. 링크를 열 때 팝업이 떠요. jQuery selector - 지정된 요소에弹出. 윈도우 - 화면 중앙에弹出.

List

data-role="listview" 속성을 가진 <ol> 또는 <ul>.

Data 속성 값 설명
data-autodividers true | false 리스트 항목을 자동으로 구분할지 여부를 정의합니다.
data-count-theme letter (a-z) 카운트 풍선의 주제 색상을 정의합니다. 기본 값은 "c"입니다.
data-divider-theme letter (a-z) 리스트 구분선의 주제 색상을 정의합니다. 기본 값은 "b"입니다.
data-filter true | false 리스트에 검색 상자를 추가할지 여부를 정의합니다.
data-filter-placeholder sometext 검색 상자에 텍스트를 정의합니다. 기본 값은 "Filter items..."입니다.
data-filter-theme letter (a-z) 검색 필터 프로그램의 주제 색상을 정의합니다. 기본 값은 "c"입니다.
data-icon 아이콘 참조 리스트의 아이콘을 정의합니다.
data-inset true | false 리스트에 둥글고 외곽 여백 스타일을 추가할지 여부를 정의합니다.
data-split-icon 아이콘 참조 구분 버튼의 아이콘을 정의합니다. 기본 값은 "arrow-r"입니다.
data-split-theme letter (a-z) 구분 버튼의 주제 색상을 정의합니다. 기본 값은 "b"입니다.
data-theme letter (a-z) 리스트의 주제 색상을 정의합니다.

List item

data-role="listview" 속성을 가진 <ol> 또는 <ul> 내의 <li>.

Data 속성 값 설명
data-filtertext sometext 필터 요소에서 검색할 텍스트를 정의합니다. 이 텍스트가 실제 리스트 항목 텍스트 대신 검색됩니다.
data-icon 아이콘 참조 리스트 항목의 아이콘을 정의합니다.
data-role list-divider 리스트 항목의 구분선을 정의합니다.
data-theme letter (a-z) 리스트 항목의 주제 색상을 정의합니다.

주석:data-icon 속성은 링크를 포함한 리스트 항목에만 적용됩니다.

Navbar

data-role="navbar" 속성을 가진 컨테이너 내부의 <li> 요소.

Data 속성 값 설명
data-icon 아이콘 참조 리스트 항목의 아이콘을 정의합니다.
data-iconpos left | right | top | bottom | notext 아이콘의 위치를 정의합니다.

훌륭:네비게이션 바는 부모 컨테이너에서 theme-swatch를 상속받습니다. 네비게이션 바에 data-theme 속성을 설정하는 것은 불가능합니다. 네비게이션 바의 각 링크에单独 data-theme 속성을 설정할 수 있습니다.

Page

data-role="page" 속성을 가진 컨테이너.

Data 속성 값 설명
data-add-back-btn true | false 자동으로 뒤로 가기 버튼을 추가합니다. 헤더에만 사용됩니다.
data-back-btn-text sometext 뒤로 가기 버튼의 텍스트를 정의합니다.
data-back-btn-theme letter (a-z) 뒤로 가기 버튼의 주제 색상을 정의합니다.
data-close-btn-text letter (a-z) 대화 상자의 닫기 버튼 텍스트를 정의합니다.
data-dom-cache true | false 개별 페이지의 jQuery DOM 캐시를 지우는지 여부를 지정합니다. (true로 설정되면, DOM 관리에 주의하고 모든 모바일 장치를 전면적으로 테스트해야 합니다.).
data-overlay-theme letter (a-z) 대화 페이지의 덮어쓰기(배경) 색상을 지정합니다.
data-theme letter (a-z) 페이지의 주제 색상을 지정합니다. 기본적으로는 "c"입니다.
data-title sometext 페이지의 제목을 지정합니다.
data-url url 이 값은 URL을 업데이트하는 데 사용되며, 페이지 요청에는 사용되지 않습니다.

Popup

data-role="popup" 속성을 가진 컨테이너.

Data 속성 값 설명
data-corners true | false 팝업에 둥글거리는 모서리가 있는지 여부를 지정합니다.
data-overlay-theme letter (a-z) 팝업의 덮어쓰기(배경) 색상을 지정합니다. 기본적으로는 투명 배경(none)입니다.
data-shadow true | false 팝업에 그림자가 있는지 여부를 지정합니다.
data-theme letter (a-z) 팝업의 주제 색상을 지정합니다. 기본적으로는 상속됩니다. "none"은 투명으로 설정됩니다.
data-tolerance 30, 15, 30, 15 창 경계선과의 거리를 지정합니다. (top, right, bottom, left)

data-rel="popup" 속성을 가진 앵크:

Data 속성 값 설명
data-position-to origin | jQuery selector | window 팝업의 위치를 지정합니다. Origin - 기본. 팝업은 팝업을 엽니다. jQuery selector - 팝업이 지정된 요소에 위치합니다. Window - 팝업이 창 화면 중앙에 위치합니다.
data-rel popup 열릴 팝업을 엽니다.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none 한 페이지에서 다음 페이지로 이동하는 방법을 지정합니다. jQuery Mobile 트랜지션을 참조하세요.

라디오 버튼

label과 type="radio"의 input과 일치하는 것이 자동으로 버튼 스타일로 설정되며 data-role는 필요하지 않습니다.

Data 속성 값 설명
data-mini true | false 버튼이 소형인지 아니면 표준 크기인지 지정합니다.
data-role none jQuery Mobile을 사용하여 단일 선택 버튼을 강화된 버튼 스타일로 설정합니다.
data-theme letter (a-z) 단일 선택 버튼의 주제 색상을 지정합니다.

훌륭:여러 단일 선택 버튼을 조합하려면 data-role="controlgroup" 및 data-type="horizontal|vertical"를 사용하여 버튼을 수직 또는 수평으로 조합하는지 지정합니다.

Select

모든 <select> 요소. 자동으로 버튼 스타일로 설정되며 data-role가 필요하지 않습니다.

Data 속성 값 설명
data-icon 아이콘 참조 select 요소의 아이콘을 정의합니다. 기본적으로 "arrow-d"입니다.
data-iconpos left | right | top | bottom | notext 아이콘의 위치를 정의합니다.
data-inline true | false select 요소가 행 내에 있는지 여부를 정의합니다.
data-mini true | false select 요소가 소형인지 일반 크기인지를 정의합니다.
data-native-menu true | false false로 설정되면 jQuery 자신의 커스텀 선택 메뉴를 사용합니다(모든 모바일 장치에서 일관된 외관을 원하면 추천).
data-overlay-theme letter (a-z) jQuery가 사용하는 커스텀 선택 메뉴의 주제 색상을 정의합니다.(data-native-menu="false"와 함께 사용).
data-placeholder true | false 원시적 select의 <option> 요소에 설정할 수 있습니다.
data-role none jQuery Mobile을 사용하여 select 요소를 버튼 스타일로 설정합니다.
data-theme letter (a-z) select 요소의 주제 색상을 정의합니다.

훌륭:여러 select 요소를 조합하려면 data-role="controlgroup" 및 data-type="horizontal|vertical"를 사용하여 요소를 수평이나 수직으로 조합합니다.

Slider

type="range"의 input 요소입니다. 자동으로 버튼 스타일로 설정되며 data-role가 필요하지 않습니다.

Data 속성 값 설명
data-highlight true | false 슬라이더 트랙을 강조 표시할지 여부를 정의합니다.
data-mini true | false 슬라이더가 소형인지 일반 크기인지를 정의합니다.
data-role none jQuery Mobile을 사용하여 슬라이더 설정 버튼의 스타일을 배치합니다.
data-theme letter (a-z) 슬라이더 컨트롤(input, handle, track)의 주제 색상을 정의합니다.
data-track-theme letter (a-z) 슬라이더 트랙의 주제 색상을 정의합니다.

Text input & Textarea

type="text|search|etc."의 input 요소나 textarea 요소입니다. 자동으로 스타일이 설정되며 data-role가 필요하지 않습니다.

Data 속성 값 설명
data-mini true | false input 요소가 작은 크기인지 일반 크기인지를 정의합니다.
data-role none jQuery Mobile를 사용하여 input/textarea를 버튼 스타일로 설정하는 방법을 설명합니다.
data-theme letter (a-z) 입력 필드의 주제 색상을 정의합니다.