欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQueryMobileData属性

程序员文章站 2022-03-22 12:35:17
jquerymobiledata属性 jquery mobile 使用html5 data-* 属性来为移动设备创建更具触摸友好性和吸引性的外观。 在下面的参考列表中,粗体显示...

jquerymobiledata属性

jquery mobile 使用html5 data-* 属性来为移动设备创建更具触摸友好性和吸引性的外观。

在下面的参考列表中,粗体显示的值为默认值。

 

按钮

在1.4 版本以后已废弃。使用css 类替代带有data-role="button"的超链接。button 元素、工具栏中的链接以及 input 字段都会自动渲染成按钮样式,不需要添加 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 字母(a-z) 规定按钮的主题颜色

  如需组合多个按钮,请使用带有 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 的容器来规定是否水平或垂直组合按钮。

复选框

带有type="checkbox"的成双成对的 label 和 input。它们会被自动渲染程按钮样式,data-role 不是必需的。

data-属性 描述
data-mini true |false 规定复选框是小尺寸还是常规尺寸
data-role none 防止 jquery mobile 把复选框渲染成按钮样式
data-theme 字母(a-z) 规定复选框的主题颜色
如需组合多个复选框,请使用带有 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 的容器来规定是否水平或垂直组合复选框。

 

 

可折叠块

在带有data-role="collapsible"的容器内部的后跟任意 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-role="collapsible-set"的容器内部的可折叠内容块。

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-role="content"的容器。

data-属性 描述
data-theme 字母(a-z) 规定内容的主题颜色。

控件组

带有data-role="controlgroup"的

容器。 组合单个类型(基于链接的按钮、单选按钮、复选框、select 元素)的多个按钮样式的 input。对于组合表单复选框和单选按钮,推荐在带有 data-role="fieldcontain" 的

内使用

容器来改进标签样式。

 

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

对话框

带有data-role="dialog"的容器或带有data-rel="dialog"的链接。

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 规定对话框页面的标题

增强

带有data-enhance="false"或data-ajax="false"的容器。

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

注意:data-enhance="false" 必须与 $.mobile.ignorecontentenabled=true" 一同使用来阻止 jquery mobile 自动渲染页面。

当 $.mobile.ignorecontentenabled 设置为 true 时,data-ajax="false" 容器内的任何链接或表单元素将会被框架的导航功能忽略。

域容器

1.4 版本后已废弃,在 1.5 版本后不再支持,将使用 class="ui-fieldcontain 替代"。包裹在 label/form 元素对,并带有data-role="fieldcontain"的容器。

固定工具栏

带有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"的 元素。这些会被自动渲染成按钮样式,date-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 字母(a-z) 规定 jquery 自带的自定义的选择菜单的主题颜色(与 data-native-menu="false" 一起使用)
data-placeholder true |false 可在一个非原生的选择菜单的
data-role none 防止 jquery mobile 把 select 元素渲染成按钮样式
data-theme 字母(a-z) 规定 select 元素的主题颜色
如需组合多个 select 元素,请使用带有 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 的容器来规定是否水平或垂直组合 select 元素。

 

 

滑动块

带有type="range"的输入框。这些会被自动渲染成按钮样式,date-role 是不必需的。

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

文本输入框 & 文本输入域

带有type="text|search|etc."的 input 或textarea 元素。这些会被自动渲染成按钮样式,date-role 是不必需的。

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