คุณสมบัติ jQuery ข้อมูลมือถือ
คุณสมบัติ jQuery ข้อมูล
jQuery มือถือโดยใช้ HTML5 DATA- * คุณลักษณะ เพื่อสร้างลักษณะสัมผัสง่ายมากขึ้นและน่าสนใจสำหรับอุปกรณ์มือถือ
ค่าอ้างอิงในรายการต่อไปในตัวหนาเป็นค่าเริ่มต้น
ปุ่มกด
หลังจากที่รุ่น 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" และข้อมูล-type = แอตทริบิวต์ที่มีข้อมูลบทบาท "แนวนอน | แนวตั้ง" ภาชนะเพื่อระบุว่ารวมกันนอนหรือแนวตั้งของปุ่ม |
|---|
ช่องทำเครื่องหมาย
กับคู่ของฉลากและ input type = "ช่องทำเครื่องหมาย" ของ พวกเขาจะแสดงผลโดยอัตโนมัติกระบวนการรูปแบบปุ่มข้อมูลบทบาทไม่จำเป็นต้องใช้
| Data-属性 | 值 | 描述 |
|---|---|---|
| data-mini | true | false | 规定复选框是小尺寸还是常规尺寸 |
| data-role | none | 防止 jQuery Mobile 把复选框渲染成按钮样式 |
| data-theme | 字母 (a-z) | 规定复选框的主题颜色 |
| ที่จะรวมกล่องกาหลายใช้ = "controlgroup" และข้อมูล-type = แอตทริบิวต์ที่มีข้อมูลบทบาท "แนวนอน | แนวตั้ง" ภาชนะเพื่อระบุว่ารวมกันนอนหรือแนวตั้งช่องทำเครื่องหมาย |
|---|
บล็อกพับ
ในการตกแต่งภายในของภาชนะตามด้วย 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.4 ได้รับการยกเลิกหลังจากรุ่น 1.5 ได้รับการสนับสนุนอีกต่อไป โดยใช้ข้อมูลบทบาท = "เนื้อหา" ของภาชนะ
| คุณสมบัติ DATA- | ความคุ้มค่า | ลักษณะ |
|---|---|---|
| ข้อมูลธีม | ตัวอักษร (AZ) | บทบัญญัติที่เกี่ยวข้องกับเนื้อหาสี |
กลุ่มควบคุม
กับข้อมูลบทบาท = "controlgroup ว่า" <div> หรือ <fieldset> ตู้คอนเทนเนอร์ การรวมกันของชนิดเดียว (ปุ่ม Link-based, ปุ่มกล่องกาเลือกองค์ประกอบ) ของจำนวนมากของรูปแบบปุ่มใส่ สำหรับการรวมรูปแบบช่องทำเครื่องหมายและปุ่มเราขอแนะนำ <fieldset> ในภาชนะที่มีข้อมูลบทบาท = "fieldcontain" <div> tag ภายในเพื่อปรับปรุงรูปแบบ
| Data-属性 | 值 | 描述 |
|---|---|---|
| data-mini | true | false | 规定控件组是小尺寸还是常规尺寸 |
| data-type | horizontal | vertical | 规定控件组是水平显示还是垂直显示 |
โต้ตอบ
ตู้คอนเทนเนอร์หรือ = การเชื่อมโยงข้อมูล rel "ไดอะล็อก" กับข้อมูลบทบาท = "โต้ตอบ" เป็น
| 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" หรือข้อมูล Ajax = ภาชนะ "false"
| Data-属性 | 值 | 描述 |
|---|---|---|
| data-enhance | true | false | 如果设置为 "true"（默认），jQuery Mobile 会自动渲染页面，使其更适合于移动设备。如果设置为 "false"，框架将不会渲染页面 |
| data-ajax | true | false | 规定是否通过 ajax 加载页面 |
หมายเหตุ: ข้อมูลที่เพิ่มประสิทธิภาพ = "false" จะต้องเป็น $ .mobile.ignoreContentEnabled = true "ที่ใช้ร่วมกันเพื่อป้องกันไม่ให้มือถือ jQuery โดยอัตโนมัติแสดงหน้าเว็บ
เมื่อ $ .mobile.ignoreContentEnabled ตั้งค่าเป็นจริงกรอบนำทางข้อมูล Ajax = "false" การเชื่อมโยงใด ๆ หรือองค์ประกอบของแบบฟอร์มที่อยู่ในภาชนะที่จะถูกละเว้น
คอนเทนเนอร์ของโดเมน
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 | 规定当父页面显示时工具栏的可见性 |
พลิกเปลี่ยนสลับ
ข้อมูลบทบาท = "เลื่อน" กับ <select> ด้วยสอง <ตัวเลือก> องค์ประกอบ
| 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 - 定位弹窗在窗口屏幕的中央。 |
รายการ
กับข้อมูลบทบาท = "ListView" ของ <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) | 规定列表的主题颜色 |
รายการ
กับข้อมูลบทบาท = "ListView" ของ <ol> หรือ <ul> ภายใน <li>
| Data-属性 | 值 | 描述 |
|---|---|---|
| data-filtertext | sometext | 规定当过滤元素时要搜索的文本。该文本将会被过滤，而不是实际的列表项文本 |
| data-icon | 图标参考手册 | 规定列表项图标 |
| data-role | list-divider | 规定列表项的分隔 |
| data-theme | 字母 (a-z) | 规定列表项的主题颜色 |
หมายเหตุ: ข้อมูลไอคอนแอตทริบิวต์มีผลเฉพาะรายการที่มีการเชื่อมโยง
ป้าย
กับข้อมูลบทบาทภายใน = "Navbar ภาชนะ" <li> องค์ประกอบ
| 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）的距离 |
ด้วยข้อมูล rel = "ป๊อปอัพ" ผู้ประกาศข่าว:
| 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" และข้อมูล-type = แอตทริบิวต์ที่มีข้อมูลบทบาท "แนวนอน | แนวตั้ง" ภาชนะเพื่อระบุว่ารวมกันแนวนอนหรือแนวตั้งของปุ่ม |
|---|
เลือก
ทั้งหมด <เลือก> องค์ประกอบ เหล่านี้ปุ่มจะแสดงผลโดยอัตโนมัติรูปแบบวันที่บทบาทไม่จำเป็นต้องใช้
| 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" และข้อมูล-type = แอตทริบิวต์ที่มีข้อมูลบทบาท "แนวนอน | แนวตั้ง" ภาชนะเพื่อระบุว่ารวมกันนอนหรือแนวตั้งขององค์ประกอบที่เลือก |
|---|
Slider
มีประเภท = "ช่วง" กล่องใส่ เหล่านี้ปุ่มจะแสดงผลโดยอัตโนมัติรูปแบบวันที่บทบาทไม่จำเป็นต้องใช้
| Data-属性 | 值 | 描述 |
|---|---|---|
| data-highlight | true | false | 规定滑动轨道是否高亮突出显示 |
| data-mini | true | false | 规定滑动块是小尺寸还是常规尺寸 |
| data-role | none | 防止 jQuery Mobile 渲染滑动块控件为按钮样式 |
| data-theme | 字母 (a-z) | 规定滑动块控件（输入框、手柄和轨道）的主题颜色 |
| data-track-theme | 字母 (a-z) | 规定滑动块轨道的主题颜色 |
กล่องใส่ข้อความและช่องป้อนข้อความ
กับประเภท = "text | ค้นหา |. ฯลฯ " การป้อนข้อมูลหรือ textarea องค์ประกอบ เหล่านี้ปุ่มจะแสดงผลโดยอัตโนมัติรูปแบบวันที่บทบาทไม่จำเป็นต้องใช้
| Data-属性 | 值 | 描述 |
|---|---|---|
| data-mini | true | false | 规定输入框是小尺寸还是常规尺寸 |
| data-role | none | 防止 jQuery Mobile 把输入框/输入域渲染成按钮样式 |
| data-theme | 字母 (a-z) | 规定输入字段的主题颜色 |