Latest web development tutorials

jQuery를 모바일 데이터 등록

jQuery를 데이터 속성

jQuery를 모바일 사용하여 HTML5 데이터 - * 속성을 모바일 장치에 대한 더 많은 터치 친화적 인 외관과 매력을 만들 수 있습니다.

다음 목록의 참조 값은 굵은 글씨로 기본 값입니다.


누름 단추

버전 1.4 이후는 사용되지 않습니다. 사용 CSS 클래스를 대신.= "버튼"데이터 역할 하이퍼 링크. 자동 버튼 스타일을 렌더링 버튼 요소 도구 모음 링크 및 입력 필드, 당신은 데이터 역할 = "버튼"을 추가 할 필요가 없습니다.

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 字母 (a-z) 规定按钮的主题颜色

램프 버튼의 수평 또는 수직 조합 여부를 지정 컨테이너 | 버튼의 복수의 조합 = "controlgroup"및 데이터 역할 "수직 수평"와 데이터 유형 = 속성을 사용합니다.


확인란

라벨 및 입력 유형 = "체크 박스"의 쌍. 그들은 자동으로 처리 버튼 스타일, 데이터 역할이 필요하지 않습니다 렌더링됩니다.

Data-属性 描述
data-mini true | false 规定复选框是小尺寸还是常规尺寸
data-role none 防止 jQuery Mobile 把复选框渲染成按钮样式
data-theme 字母 (a-z) 规定复选框的主题颜色

램프 수평 또는 수직 조합 확인란 여부를 지정 컨테이너 | 여러 확인란을 결합하려면 = "controlgroup"및 데이터 역할 "수직 수평"와 데이터 유형 = 속성을 사용합니다.


축소 블록

데이터 - 역할하는 HTML이어서 용기의 내부 = "접힘"타이틀 엘리먼트를 표시한다.

Data-属性 描述
data-collapsed true | false 规定内容是折叠还是展开
data-collapsed-icon 图标参考手册 规定可折叠按钮的图标。默认是 "plus"
data-content-theme 字母 (a-z) 规定可折叠内容的主题颜色。是否为可折叠内容添加圆角
data-expanded-icon 图标参考手册 规定当内容展开时可折叠按钮的图标。默认是 "minus"
data-iconpos left | right | top | bottom 规定图标的位置
data-inset true | false 规定可折叠按钮是否渲染成圆角且带外边距
data-mini true | false 规定可折叠按钮是小尺寸还是常规尺寸
data-theme 字母 (a-z) 规定可折叠按钮的主题颜色


접이식 컬렉션

데이터-역할 = "축소 세트와 용기의 내부에서 " 접을 수있는 콘텐츠 블록의.

Data-属性 描述
data-collapsed-icon 图标参考手册 规定可折叠按钮的图标。默认是 "plus"
data-content-theme 字母 (a-z) 规定可折叠按钮的主题颜色
data-expanded-icon 图标参考手册 规定当内容展开时可折叠按钮的图标。默认是 "minus"
data-iconpos left | right | top | bottom | notext 规定图标的位置
data-inset true | false 规定可折叠块是否渲染成圆角且带外边距
data-mini true | false 规定可折叠按钮是小尺寸还是常规尺寸
data-theme 字母 (a-z) 规定可折叠集合的主题颜色


함유량

버전 1.5은 더 이상 지원 후 1.4 버전에 버려진 없습니다. 데이터 역할 = 컨테이너의 "콘텐츠"를 사용.

데이터 - 부동산 기술
데이터 테마 문자 (AZ) 컬러 함량에 관한 규정.


대조군

데이터 역할 = "controlgroup"는 <div> 또는 <FIELDSET> 컨테이너. 입력 버튼 스타일의 복수의 단일 유형 (링크 기반의 버튼, 라디오 버튼, 체크 박스, 선택 요소)의 조합. 조합은 체크 박스와 라디오 버튼을 형성하기 위해, 우리는 스타일을 개선하기 위해 내부 <div> 태그 "fieldcontain"= 데이터-역할과 용기의 <FIELDSET>를 추천합니다.

Data-属性 描述
data-mini true | false 规定控件组是小尺寸还是常规尺寸
data-type horizontal | vertical 规定控件组是水平显示还是垂直显示


대화

컨테이너 또는 데이터 역할 데이터 확인해 = "대화"링크 = "대화"입니다.

Data-属性 描述
data-close-btn-text sometext 规定对话框关闭按钮的文本
data-dom-cache true | false 规定是否清除各个页面的 jQuery DOM 缓存(如果设置为 true,您必须自己管理 DOM 并在所有移动设备上进行测试)
data-overlay-theme 字母 (a-z) 规定对话框页面的蒙版(背景)颜色
data-theme 字母 (a-z) 规定对话框页面的主题颜色
data-title sometext 规定对话框页面的标题


증가

데이터 향상 = "false"로 또는 데이터 아약스 = "false"를 컨테이너.

Data-属性 描述
data-enhance true | false 如果设置为 "true"(默认),jQuery Mobile 会自动渲染页面,使其更适合于移动设备。如果设置为 "false",框架将不会渲染页面
data-ajax true | false 规定是否通过 ajax 加载页面

참고 :해야 = "false"로 데이터 향상 $ 자동으로 jQuery를 모바일을 방지 페이지를 렌더링하는 데 함께 사용 ".mobile.ignoreContentEnabled = 사실.

$는 사실, 데이터 아약스 = "false"를 어떤 링크 나 컨테이너 내에서 폼 요소는 무시됩니다 탐색 프레임 워크로 설정 .mobile.ignoreContentEnabled합니다.


도메인 컨테이너

1.4 버전은 버전 1.5은 더 이상 지원 후, 클래스 = 사용하지 않습니다 포기하고있다 "UI-fieldcontain 대안을." 와 용기 "fieldcontain"= 라벨 / 양식 요소 쌍 및 데이터 역할에 싸여.


도킹 도구 모음

데이터 역할 = "헤더"또는 데이터 역할 = "바닥 글", 및 데이터 위치에 = 컨테이너 속성 "고정".

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-属性 描述
data-mini true | false 规定开关是小尺寸还是常规尺寸
data-role none 防止 jQuery Mobile 把拨动开关渲染成按钮样式
data-theme 字母 (a-z) 规定拨动开关的主题颜色
data-track-theme 字母 (a-z) 规定轨道的主题颜色


테일 바

데이터 역할 = "바닥 글"컨테이너입니다.

Data-属性 描述
data-id sometext 规定唯一 ID。对于持续的尾部栏是必需的
data-position inline | fixed 规定尾部栏是与页面内容内联还是保持固定在底部
data-fullscreen true | false 规定尾部栏是固定在底部还是覆盖在页面内容上(查看范围更大)
data-theme 字母 (a-z) 规定尾部栏的主题颜色。默认是 "a"

참고 : 전체 화면 위치를 활성화 = "고정"데이터 위치를 사용하여 다음 요소에 데이터 전체 화면 속성을 추가하려면.


머리 바

데이터 = 역할과 용기의 "헤더".

Data-属性 描述
data-id sometext 规定唯一 ID。对于持续的头部栏是必需的
data-position inline | fixed 规定头部栏是与页面内容内联还是保持固定在顶部
data-fullscreen true | false 规定头部栏是固定在顶部还是覆盖在页面内容上(查看范围更大)
data-theme 字母 (a-z) 规定头部栏的主题颜色。默认是 "a"

참고 : 전체 화면 위치를 활성화 = "고정"데이터 위치를 사용하여 다음 요소에 데이터 전체 화면 속성을 추가하려면.


링크

데이터 역할이 해당 링크 및 양식을 포함한 모든 링크 = "버튼"버튼을 제출합니다.

Data-属性 描述
data-ajax true | false 规定是否通过 ajax 加载页面来提高用户体验和交互。如果设置为 false,jQuery Mobile 将会执行一个正常的页面请求。
data-direction reverse 反向转换动画(仅用于页面和对话框)
data-dom-cache true | false 规定是否清除各个页面的 jQuery DOM 缓存(如果设置为 true,您必须自己管理 DOM 并在所有移动设备上进行测试)
data-prefetch true | false 规定是否预先读取页面到 DOM 中,以便当用户访问它们时可用
data-rel back | dialog | external | popup 规定链接行为的选项。Back - 回退到历史记录中的前一个页面。Dialog - 以对话框形式打开链接,不保存到历史记录中。External - 用于链接到另一个域。Popup - 打开一个弹出窗口。
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none 规定一个页面切换到下一个页面的效果。请查看我们的 jQuery Mobile 页面切换章节。
data-position-to origin | jQuery selector | window 规定弹出框的位置。Origin - 默认。定位弹窗在打开它的链接上。jQuery selector - 定位弹窗在指定元素上。Window - 定位弹窗在窗口屏幕的中央。


명부

데이터 역할 = "목록보기"와 <OL> 또는 <UL>.

Data-属性 描述
data-autodividers true | false 规定是否自动划分列表项
data-count-theme 字母 (a-z) 规定计数气泡的主题颜色。
data-divider-theme 字母 (a-z) 规定列表分隔的主题颜色。
data-filter true | false 规定是否在列表中添加搜索框
data-filter-placeholder sometext 1.4 版本后废弃。使用 HTML placeholder 属性替代。规定搜索框内的文本。默认是 "Filter items..."
data-filter-theme 字母 (a-z) 规定搜索过滤的主题颜色。
data-icon 图标参考手册 规定列表的图标
data-inset true | false 规定列表是否渲染成圆角且带外边距
data-split-icon 图标参考手册 规定分割按钮的图表。默认是 "arrow-r"
data-split-theme 字母 (a-z) 规定分割按钮的主题颜色。
data-theme 字母 (a-z) 规定列表的主题颜色


목록 항목

의 <리>에서 <OL> 또는 <UL>의 데이터 역할 = "목록보기"와.

Data-属性 描述
data-filtertext sometext 规定当过滤元素时要搜索的文本。该文本将会被过滤,而不是实际的列表项文本
data-icon 图标参考手册 规定列表项图标
data-role list-divider 规定列表项的分隔
data-theme 字母 (a-z) 规定列表项的主题颜色

참고 : 데이터 아이콘 만 링크 목록 항목에 영향을 미치는 속성.


네비게이션

내부 데이터 역할 = 컨테이너 <리> 요소를 "Navbar를".

Data-属性 描述
data-icon 图标参考手册 规定列表项的图标
data-iconpos left | right | top | bottom | notext 规定图标的位置

램프 샘플 주제 탐색 모음은 부모로부터 상속. 네비게이션 바 설정 데이터 테마 속성은 불가능합니다. 데이터 테마 속성은 탐색 모음의 각 링크를 개별적으로 설정할 수 있습니다.


페이지

데이터 역할이 컨테이너의 = "페이지".

Data-属性 描述
data-add-back-btn true | false 自动添加后退按钮,仅限头部栏
data-back-btn-text sometext 规定后退按钮的一些文本
data-back-btn-theme 字母 (a-z) 规定后退按钮的主题颜色
data-close-btn-text 字母 (a-z) 规定对话框上关闭按钮的一些文本
data-dom-cache true | false 规定是否清除各个页面的 jQuery DOM 缓存(如果设置为 true,您必须自己管理 DOM 并在所有移动设备上进行测试)
data-overlay-theme 字母 (a-z) 规定对话框页面的蒙版(背景)颜色
data-theme 字母 (a-z) 规定页面的主题颜色。
data-title sometext 规定页面标题
data-url url 更新 URL 的值,而不是用于请求页面的 URL


대중적인

= "팝업"컨테이너 데이터 역할.

Data-属性 描述
data-corners true | false 规定弹窗是否圆角
data-overlay-theme 字母 (a-z) 规定弹出框的蒙版(背景)颜色。默认是透明背景(无)
data-shadow true | false 规定弹出框是否有阴影
data-theme 字母 (a-z) 规定弹出框的主题颜色。默认是继承的,"none" 设置弹窗为透明的
data-tolerance 30, 15, 30, 15 规定窗口边缘(上 top、右 right、下 bottom、左 left)的距离

데이터 확인해 = "팝업"앵커 :

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 页面切换章节。


라디오 버튼

라벨 및 입력 유형의= "라디오"입니다. 그들은 자동으로 처리 버튼 스타일, 데이터 역할이 필요하지 않습니다 렌더링됩니다.

Data-属性 描述
data-mini true | false 规定按钮是小尺寸还是常规尺寸
data-role none 防止 jQuery Mobile 渲染单选按钮的样式为增强状态的按钮,使元素以 HTML 原生的状态显示
data-theme 字母 (a-z) 规定单选按钮的主题颜色

램프 라디오 버튼의 수평 또는 수직 조합 여부를 지정 컨테이너 | 여러 라디오 버튼을 결합하려면 = "controlgroup"및 데이터 역할 "수직 수평"와 데이터 유형 = 속성을 사용합니다.


선택

모든 <선택> 요소입니다. 이 자동으로 버튼 스타일 렌더링됩니다, 날짜 역할이 필요하지 않습니다.

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 字母 (a-z) 规定 jQuery 自带的自定义的选择菜单的主题颜色(与 data-native-menu="false" 一起使用)
data-placeholder true | false 可在一个非原生的选择菜单的 <option> 元素上设置
data-role none 防止 jQuery Mobile 把 select 元素渲染成按钮样式
data-theme 字母 (a-z) 规定 select 元素的主题颜色

램프 선택 요소의 수평 또는 수직 조합 여부를 지정 컨테이너 | 여러 요소의 조합을 선택하려면 = "controlgroup"및 데이터 역할 "수직 수평"와 데이터 유형 = 속성을 사용합니다.


슬라이더

유형 = "범위"입력 상자. 이 자동으로 버튼 스타일 렌더링됩니다, 날짜 역할이 필요하지 않습니다.

Data-属性 描述
data-highlight true | false 规定滑动轨道是否高亮突出显示
data-mini true | false 规定滑动块是小尺寸还是常规尺寸
data-role none 防止 jQuery Mobile 渲染滑动块控件为按钮样式
data-theme 字母 (a-z) 规定滑动块控件(输入框、手柄和轨道)的主题颜色
data-track-theme 字母 (a-z) 规定滑动块轨道的主题颜色


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

유형 = "| | 검색. 텍스트와 기타" 입력 또는 텍스트 영역 요소입니다. 이 자동으로 버튼 스타일 렌더링됩니다, 날짜 역할이 필요하지 않습니다.

Data-属性 描述
data-mini true | false 规定输入框是小尺寸还是常规尺寸
data-role none 防止 jQuery Mobile 把输入框/输入域渲染成按钮样式
data-theme 字母 (a-z) 规定输入字段的主题颜色