jQuery Mobile Data의 특징

jQuery 데이터 속성

jQuery Mobile은 HTML5 data-* 속성을 사용하여 모바일 장치에 더욱 터치 친화적이고 매력적인 모양을 만듭니다.

아래 참고 목록에서 굵은 글씨 로 표시된 값이 기본값입니다.

단추

버전 1.4 이후에는 더 이상 사용되지 않습니다. 대신 CSS 클래스를 사용하세요. 하이퍼링크는 data-role="button"입니다. 버튼 요소, 도구 모음의 링크 및 입력 필드는 data-role="button"을 추가하지 않고도 자동으로 버튼 스타일로 렌더링됩니다.

데이터 속성	값	설명하다
데이터 코너	사실 \| 거짓	버튼의 모서리가 둥근지 여부를 지정합니다.
데이터 아이콘	아이콘 참조 매뉴얼	버튼의 아이콘을 지정합니다. 기본적으로 아이콘이 없습니다.
데이터 아이콘포스	왼쪽 \| 오른쪽 상단 \|	아이콘의 위치를 지정합니다
데이터 아이콘 그림자	사실 \| 거짓	버튼 아이콘에 그림자가 있는지 여부를 지정합니다
데이터 인라인	사실 \| 거짓	버튼이 인라인인지 여부를 지정합니다
데이터 미니	사실 \| 거짓	버튼이 작은지 또는 보통 크기인지 지정합니다.
데이터 섀도우	사실 \| 거짓	버튼에 그림자가 있는지 여부를 지정합니다
데이터 테마	문자(a-z)	버튼의 테마 색상을 지정합니다

	여러 버튼을 결합하려면 data-role="controlgroup" 속성과 data-type="horizontal\|vertical"이 있는 컨테이너를 사용하여 버튼을 가로 또는 세로로 결합할지 여부를 지정하세요.

체크박스

type="checkbox"로 레이블과 입력을 페어링했습니다. 버튼 스타일로 자동 렌더링되며 데이터 역할은 필요하지 않습니다.

데이터 속성	값	설명하다
데이터 미니	사실 \| 거짓	확인란이 작은지 또는 일반 크기인지 지정합니다.
데이터 역할	없음	jQuery Mobile이 체크박스를 버튼으로 렌더링하지 못하도록 방지
데이터 테마	문자(a-z)	확인란의 테마 색상을 지정합니다

	여러 체크박스를 그룹화하려면 data-role="controlgroup" 속성과 data-type="horizontal\|vertical"이 있는 컨테이너를 사용하여 체크박스를 가로 또는 세로로 그룹화할지 여부를 지정하세요.

접이식 블록

data-role="collapsible"이 포함된 컨테이너 내부의 HTML 태그가 뒤에 오는 제목 요소입니다.

데이터 속성	값	설명하다
데이터가 축소되었습니다.	사실 \| 거짓	콘텐츠가 축소되거나 확장되는지 여부를 지정합니다.
데이터 축소 아이콘	아이콘 참조 매뉴얼	축소 가능한 버튼의 아이콘을 지정합니다. 기본값은 "플러스"입니다
데이터 콘텐츠 테마	문자(a-z)	축소 가능한 콘텐츠의 테마 색상을 지정합니다. 접을 수 있는 콘텐츠에 둥근 모서리를 추가할지 여부
데이터 확장 아이콘	아이콘 참조 매뉴얼	콘텐츠가 확장될 때 축소 가능한 버튼의 아이콘을 지정합니다.기본값은 "마이너스"입니다.
데이터 아이콘포스	왼쪽 \| 오른쪽 위쪽 \|	아이콘의 위치를 지정합니다
데이터 삽입	사실 \| 거짓	둥근 모서리와 여백을 사용하여 접을 수 있는 버튼을 렌더링할지 여부를 지정합니다.
데이터 미니	사실 \| 거짓	접을 수 있는 버튼이 작은지 또는 일반 크기인지 지정합니다.
데이터 테마	문자(a-z)	축소 가능한 버튼의 테마 색상을 지정합니다

접이식 컬렉션

data-role="collapsible-set"을 사용하는 컨테이너 내부의 축소 가능한 콘텐츠 블록입니다.

데이터 속성	값	설명하다
데이터 축소 아이콘	아이콘 참조 매뉴얼	축소 가능한 버튼의 아이콘을 지정합니다. 기본값은 "플러스"입니다
데이터 콘텐츠 테마	문자(a-z)	축소 가능한 버튼의 테마 색상을 지정합니다
데이터 확장 아이콘	아이콘 참조 매뉴얼	콘텐츠가 확장될 때 축소 가능한 버튼의 아이콘을 지정합니다.기본값은 "마이너스"입니다.
데이터 아이콘포스	왼쪽 \| 오른쪽 상단 \|	아이콘의 위치를 지정합니다
데이터 삽입	사실 \| 거짓	둥근 모서리와 여백을 사용하여 축소 가능한 블록을 렌더링할지 여부를 지정합니다.
데이터 미니	사실 \| 거짓	접을 수 있는 버튼이 작은지 또는 일반 크기인지 지정합니다.
데이터 테마	문자(a-z)	축소 가능한 컬렉션의 테마 색상을 지정합니다.

콘텐츠

버전 1.4에서는 폐기되었으며 버전 1.5 이후에는 더 이상 지원되지 않습니다. data-role="content"가 포함된 컨테이너를 사용하세요.

데이터 속성	값	설명하다
데이터 테마	문자(a-z)	콘텐츠의 테마 색상을 지정합니다.

대조군

data-role="controlgroup"이 포함된 <div> 또는 <fieldset> 단일 유형(링크 기반 버튼, 라디오 버튼, 체크박스, 선택 요소)의 여러 버튼 스타일 입력을 결합합니다. 결합된 양식 체크박스와 라디오 버튼의 경우 data-role="fieldcontain"이 있는 <div> 내부에 <fieldset> 컨테이너를 사용하여 라벨 스타일을 개선하는 것이 좋습니다.

데이터 속성	값	설명하다
데이터 미니	사실 \| 거짓	통제 그룹이 작은지 아니면 보통 크기인지 지정합니다.
데이터 유형	수평 \| 수직	컨트롤 그룹이 가로 또는 세로로 표시되는지 여부를 지정합니다.

대화 상자

data-role="dialog"가 포함된 컨테이너 또는 data-rel="dialog"이 포함된 링크.

데이터 속성	값	설명하다
데이터 닫기-btn-텍스트	텍스트	대화 상자 닫기 버튼의 텍스트를 지정합니다
데이터 돔 캐시	사실 \| 거짓	개별 페이지에 대한 jQuery DOM 캐시를 지울지 여부를 지정합니다. (true로 설정하면 DOM을 직접 관리하고 모든 모바일 장치에서 테스트해야 합니다.)
데이터 오버레이 테마	문자(a-z)	대화 페이지의 마스크(배경) 색상을 지정합니다.
데이터 테마	문자(a-z)	대화 페이지의 테마 색상을 지정합니다
데이터 제목	텍스트	대화 페이지의 제목을 지정합니다

향상시키다

data-enhance="false" 또는 data-ajax="false"인 컨테이너.

데이터 속성	값	설명하다
데이터 강화	사실 \|	"true"(기본값)로 설정하면 jQuery Mobile은 자동으로 페이지를 렌더링하여 모바일 장치에 더 적합하게 만듭니다. "false"로 설정하면 프레임워크가 페이지를 렌더링하지 않습니다.
데이터 아약스	사실 \|	Ajax를 통해 페이지를 로드할지 여부를 지정합니다.

참고: jQuery Mobile이 페이지를 자동으로 렌더링하지 못하도록 하려면 data-enhance="false"를 $.mobile.ignoreContentEnabled=true"와 함께 사용해야 합니다.

$.mobile.ignoreContentEnabled가 true로 설정되면 data-ajax="false" 컨테이너 내의 모든 링크나 양식 요소는 프레임의 탐색 기능에 의해 무시됩니다.

도메인 컨테이너

버전 1.4 이후에는 더 이상 사용되지 않으며 버전 1.5 이후에는 더 이상 지원되지 않습니다. class="ui-fieldcontain이 대신 사용됩니다." data-role="fieldcontain"을 사용하여 라벨/양식 요소 쌍으로 래핑된 컨테이너입니다.

고정 도구 모음

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

데이터 속성	값	설명하다
데이터 비활성화 페이지 확대/축소	사실 \| 거짓	사용자가 페이지를 확대/축소할 수 있는지 여부를 지정합니다.
데이터 전체 화면	사실 \| 거짓	도구 모음이 항상 위쪽 또는 아래쪽에 도킹되는지 여부를 지정합니다.
데이터 탭 토글	사실 \| 거짓	사용자가 도구 모음을 클릭하여 표시 여부를 변경할 수 있는지 여부를 지정합니다.
데이터 전환	슬라이드 \| 페이드 없음 \|	클릭이 발생할 때의 전환 효과를 지정합니다
데이터 업데이트 페이지 패딩	사실 \| 거짓	크기 조정, 전환 및 "updatelayout" 이벤트가 발생할 때 페이지의 위쪽 및 아래쪽 패딩이 업데이트되는지 여부를 지정합니다(jQuery Mobile은 "pageshow" 이벤트가 발생할 때 항상 패딩을 업데이트합니다).
페이지에 표시되는 데이터 표시	사실 \| 거짓	상위 페이지가 표시될 때 도구 모음의 가시성을 지정합니다.

플립 토글 스위치

data-role="slider"가 있는 하나의 <select> 요소와 두 개의 <option>

데이터 속성	값	설명하다
데이터 미니	사실 \| 거짓	스위치가 소형인지 일반 크기인지 지정합니다.
데이터 역할	없음	jQuery Mobile이 토글 스위치를 버튼으로 렌더링하지 못하도록 방지
데이터 테마	문자(a-z)	토글 스위치의 테마 색상을 지정합니다
데이터 트랙 테마	문자(a-z)	트랙의 테마 색상을 지정합니다

테일 바

data-role="footer"가 포함된 컨테이너.

데이터 속성	값	설명하다
데이터 ID	텍스트	고유 ID를 지정합니다. 지속적인 테일바에 필요
데이터 위치	인라인 \| 수정됨	바닥글 표시줄이 페이지 콘텐츠와 인라인에 있어야 하는지 아니면 하단에 고정되어 있어야 하는지 지정합니다.
데이터 전체 화면	사실 \| 거짓	바닥글 표시줄이 하단에 고정되는지 아니면 페이지 내용을 덮는지 지정합니다(보기 범위가 더 넓음).
데이터 테마	문자(a-z)	바닥글 표시줄의 테마 색상을 지정합니다. 기본값은 "a"입니다.

참고: 전체 화면 위치 지정을 활성화하려면 data-position="fixed"를 사용한 다음 요소에 data-fullscreen 속성을 추가하세요.

헤더 바

data-role="header"가 포함된 컨테이너.

데이터 속성	값	설명하다
데이터 ID	텍스트	고유 ID를 지정합니다. 영구 헤더 표시줄에 필요
데이터 위치	인라인 \| 수정됨	헤더 표시줄이 페이지 콘텐츠와 인라인에 있어야 하는지 아니면 상단에 고정되어 있어야 하는지 지정합니다.
데이터 전체 화면	사실 \| 거짓	헤더 표시줄을 상단에 고정할지 아니면 페이지 내용을 덮을지 지정합니다(보기 범위가 더 넓음).
데이터 테마	문자(a-z)	헤더 표시줄의 테마 색상을 지정합니다. 기본값은 "a"입니다.

참고: 전체 화면 위치 지정을 활성화하려면 data-position="fixed"를 사용한 다음 요소에 data-fullscreen 속성을 추가하세요.

링크

data-role="button" 및 양식 제출 버튼이 있는 링크를 포함한 모든 링크.

데이터 속성	값	설명하다
데이터 아약스	사실 \| 거짓	사용자 경험과 상호 작용을 개선하기 위해 Ajax를 통해 페이지를 로드할지 여부를 지정합니다. false로 설정하면 jQuery Mobile은 일반 페이지 요청을 수행합니다.
데이터 방향	뒤집다	역방향 전환 애니메이션(페이지 및 대화 상자에만 해당)
데이터 돔 캐시	사실 \| 거짓	개별 페이지에 대한 jQuery DOM 캐시를 지울지 여부를 지정합니다. (true로 설정하면 DOM을 직접 관리하고 모든 모바일 장치에서 테스트해야 합니다.)
데이터 프리패치	사실 \| 거짓	사용자가 페이지에 액세스할 때 사용할 수 있도록 페이지를 DOM으로 미리 가져올지 여부를 지정합니다.
데이터 관련	뒤로 \| 외부 팝업 \|	링크 동작을 지정하는 옵션입니다. 뒤로 - 기록의 이전 페이지로 돌아갑니다. 대화 상자 - 링크를 기록에 저장하지 않고 대화 상자로 엽니다. 외부 - 다른 도메인에 연결하는 데 사용됩니다. 팝업 - 팝업창을 엽니다.
데이터 전환	fade \| 슬라이드업 \| 슬라이드업 \| 없음	한 페이지에서 다음 페이지로 전환하는 효과를 지정합니다.jQuery 모바일 페이지 전환 장을 확인해 보세요.
데이터 위치	origin \| jQuery 선택기 창 \|	팝업 상자의 위치를 지정합니다. 원산지 - 기본값. 팝업을 연 링크에 팝업을 배치합니다. jQuery 선택기 - 지정된 요소에 팝업 창을 배치합니다. 창 - 창 화면 중앙에 팝업을 배치합니다.

data-role="listview"를 사용하여 <ol>

데이터 속성	값	설명하다
데이터 자동 분할기	사실 \| 거짓	목록 항목을 자동으로 나눌지 여부를 지정합니다.
데이터 개수 테마	문자(a-z)	거품 계산을 위한 테마 색상을 지정합니다.
데이터 분배기 테마	문자(a-z)	목록 구분 기호의 테마 색상을 지정합니다.
데이터 필터	사실 \| 거짓	목록에 검색 상자를 추가할지 여부를 지정합니다.
데이터 필터 자리 표시자	텍스트	버전 1.4 이후 폐기되었습니다. 대신 HTML 자리표시자 속성을 사용하세요. 검색창에 텍스트를 지정하세요. 기본값은 "항목 필터링..."입니다.
데이터 필터 테마	문자(a-z)	검색 필터링을 위한 테마 색상을 지정합니다.
데이터 아이콘	아이콘 참조 매뉴얼	목록 아이콘 지정
데이터 삽입	사실 \| 거짓	둥근 모서리와 여백을 사용하여 목록을 렌더링할지 여부를 지정합니다.
데이터 분할 아이콘	아이콘 참조 매뉴얼	분할 버튼에 대한 차트를 지정합니다. 기본값은 "화살표-r"입니다
데이터 분할 테마	문자(a-z)	분할 버튼의 테마 색상을 지정합니다.
데이터 테마	문자(a-z)	목록의 테마 색상을 지정합니다

목록 항목

data-role="listview" 또는 <ul> 내부의 <ol>

데이터 속성	값	설명하다
데이터 필터 텍스트	텍스트	요소를 필터링할 때 검색할 텍스트를 지정합니다. 이 텍스트는 실제 목록 항목 텍스트 대신 필터링됩니다.
데이터 아이콘	아이콘 참조 매뉴얼	목록 항목 아이콘 지정
데이터 역할	목록 구분자	목록 항목 구분 지정
데이터 테마	문자(a-z)	목록 항목의 테마 색상을 지정합니다

참고: data-icon 속성은 링크가 있는 목록 항목에서만 작동합니다.

네비게이션 바

data-role="navbar"가 포함된 컨테이너 내부의 <li> 요소입니다.

데이터 속성	값	설명하다
데이터 아이콘	아이콘 참조 매뉴얼	목록 항목의 아이콘을 지정합니다
데이터 아이콘포스	왼쪽 \| 오른쪽 \| 상단 \|	아이콘의 위치를 지정합니다

	탐색 모음은 상위 컨테이너에서 테마 샘플을 상속받습니다. 탐색 모음에 대한 데이터 테마 속성을 설정할 수 없습니다. 데이터 테마 속성은 탐색 모음의 각 링크에 대해 개별적으로 설정할 수 있습니다.

페이지

data-role="page"가 포함된 컨테이너.

데이터 속성	값	설명하다
데이터 추가-다시-btn	사실 \| 거짓	자동으로 뒤로 버튼 추가, 헤더 표시줄만
데이터-백-btn-텍스트	텍스트	뒤로 버튼에 대한 일부 텍스트를 지정합니다
데이터백-btn-테마	문자(a-z)	뒤로 버튼의 테마 색상을 지정합니다
데이터 닫기-btn-텍스트	문자(a-z)	대화 상자의 닫기 버튼에 대한 일부 텍스트를 지정합니다.
데이터 돔 캐시	사실 \| 거짓	개별 페이지에 대한 jQuery DOM 캐시를 지울지 여부를 지정합니다. (true로 설정하면 DOM을 직접 관리하고 모든 모바일 장치에서 테스트해야 합니다.)
데이터 오버레이 테마	문자(a-z)	대화 페이지의 마스크(배경) 색상을 지정합니다.
데이터 테마	문자(a-z)	페이지의 테마 색상을 지정합니다.
데이터 제목	텍스트	페이지 제목 지정
데이터 URL	URL	페이지를 요청하는 데 사용된 URL 이외의 URL 값 업데이트

팝업창

data-role="popup"이 포함된 컨테이너.

데이터 속성	값	설명하다
데이터 코너	사실 \| 거짓	팝업 창의 모서리가 둥근지 여부를 지정합니다.
데이터 오버레이 테마	문자(a-z)	팝업 상자의 마스크(배경) 색상을 지정합니다. 기본값은 투명한 배경입니다(없음).
데이터 섀도우	사실 \| 거짓	팝업 상자에 그림자가 있는지 여부를 지정합니다
데이터 테마	문자(a-z)	팝업 상자의 테마 색상을 지정합니다. 기본값은 상속되며 "없음"은 팝업 창을 투명하게 설정합니다.
데이터 내성	30, 15, 30, 15	창 가장자리(상단, 오른쪽, 하단, 왼쪽) 사이의 거리를 지정합니다.

data-rel="popup"을 사용하는 앵커:

데이터 속성	값	설명하다
데이터 위치	origin \| jQuery 선택기 창 \|	>팝업 상자의 위치를 지정합니다. 원산지 - 기본값. 팝업을 연 링크에 팝업을 배치합니다. jQuery 선택기 - 지정된 요소에 팝업 창을 배치합니다. 창 - 창 화면 중앙에 팝업을 배치합니다.
데이터 관련	팝업	팝업 상자를 여는 데 사용됩니다.
데이터 전환	페이드 \| 플립 \| 슬라이드다운 \| 없음	한 페이지에서 다음 페이지로 전환하는 효과를 지정합니다. jQuery 모바일 페이지 전환 장을 확인해 보세요.

라디오 버튼

type="radio"를 사용한 레이블 및 입력 쌍. 버튼 스타일로 자동 렌더링되며 데이터 역할은 필요하지 않습니다.

데이터 속성	값	설명하다
데이터 미니	사실 \| 거짓	버튼이 작은지 또는 보통 크기인지 지정합니다.
데이터 역할	없음	요소가 기본 HTML 상태로 표시되도록 jQuery Mobile이 향상된 상태 버튼 스타일의 라디오 버튼을 렌더링하지 못하도록 방지
데이터 테마	문자(a-z)	라디오 버튼의 테마 색상을 지정합니다

	여러 라디오 버튼을 그룹화하려면 data-role="controlgroup" 속성과 data-type="horizontal\|vertical"이 있는 컨테이너를 사용하여 라디오 버튼을 가로 또는 세로로 그룹화해야 하는지 지정합니다.

선택하다

모든 <select> 요소. 이는 자동으로 버튼 스타일로 렌더링되며 날짜 역할은 필요하지 않습니다.

데이터 속성	값	설명하다
데이터 아이콘	아이콘 참조 매뉴얼	선택 요소의 아이콘을 지정합니다.기본값은 "arrow-d"입니다.
데이터 아이콘포스	왼쪽 \| 오른쪽 \|	아이콘의 위치를 지정합니다
데이터 인라인	사실 \| 거짓	선택 요소가 인라인인지 여부를 지정합니다
데이터 미니	사실 \| 거짓	선택 요소가 작은지 또는 일반 크기인지 지정합니다.
데이터 네이티브 메뉴	사실 \| 거짓	false로 설정하면 jQuery와 함께 제공되는 사용자 정의 선택 메뉴를 사용합니다. (선택 메뉴가 모든 모바일 장치에서 동일하게 표시되기를 원하는 경우 권장)
데이터 오버레이 테마	문자(a-z)	jQuery와 함께 제공되는 사용자 정의 선택 메뉴의 테마 색상을 지정합니다(data-native-menu="false"와 함께 사용됨)
데이터 자리 표시자	사실 \| 거짓	기본이 아닌 선택 메뉴의 <option> 요소에 설정할 수 있습니다.
데이터 역할	없음	jQuery Mobile이 선택 요소를 버튼 스타일로 렌더링하지 못하도록 방지
데이터 테마	문자(a-z)	선택 요소의 테마 색상을 지정합니다

	여러 선택 요소를 결합하려면 data-role="controlgroup" 속성 및 data-type="horizontal\|vertical"이 있는 컨테이너를 사용하여 선택 요소를 가로 또는 세로로 결합할지 여부를 지정하세요.

슬라이더

type="range"가 포함된 입력 상자입니다. 이는 자동으로 버튼 스타일로 렌더링되며 날짜 역할은 필요하지 않습니다.

데이터 속성	값	설명하다
데이터 강조	사실 \| 거짓	슬라이딩 트랙이 강조 표시되는지 여부를 지정합니다
데이터 미니	사실 \| 거짓	슬라이더가 작은지 또는 보통 크기인지 지정합니다.
데이터 역할	없음	jQuery Mobile이 슬라이더 컨트롤을 버튼 스타일로 렌더링하지 못하도록 방지
데이터 테마	문자(a-z)	슬라이더 컨트롤(입력 상자, 핸들 및 트랙)의 테마 색상을 지정합니다.
데이터 트랙 테마	문자(a-z)	슬라이더 트랙의 테마 색상을 지정합니다

텍스트 입력 상자 및 텍스트 입력 필드

type="text|search|etc."가 포함된 입력 또는 textarea 요소 . 이는 자동으로 버튼 스타일로 렌더링되며 날짜 역할은 필요하지 않습니다.

데이터 속성	값	설명하다
데이터 미니	사실 \| 거짓	입력 상자가 작은지 또는 일반 크기인지 지정합니다.
데이터 역할	없음	jQuery Mobile이 입력 상자/필드를 버튼 스타일로 렌더링하지 못하도록 방지
데이터 테마	문자(a-z)	입력 필드의 테마 색상을 지정합니다