jQuery Mobile 所有data-*选项,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏)
jQuery Mobile事件全解
jQuery Mobile 所有class选项
jQuery Mobile 所有data-*选项
jQuery Mobile 所有data-*选项:
data-role="none" //避免jquery自动为元素添加样式
按钮:
在1.4 版本以后已废弃。使用 CSS 类 替代。带有 data-role=”button” 的超链接。button 元素、工具栏中的链接以及 input 字段都会自动渲染成按钮样式,不需要添加 data-role=”button”。
//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-mini true | false 规定复选框是小尺寸还是常规尺寸
//data-role none 防止 jQuery Mobile 把复选框渲染成按钮样式
//data-theme 字母 (a-z) 规定复选框的主题颜色
如需组合多个复选框,请使用带有 data-role=”controlgroup” 属性和 data-type=”horizontal|vertical” 的容器来规定是否水平或垂直组合复选框。
可折叠块:
在带有 data-role=”collapsible” 的容器内部的后跟任意 HTML 标记的标题元素。
//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-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) 规定可折叠集合的主题颜色
控件组:
//带有 data-role="controlgroup" 的 <div> 或 <fieldset> 容器。 组合单个类型(基于链接的按钮、单选按钮、复选框、select 元素)的多个按钮样式的 input。
//对于组合表单复选框和单选按钮,推荐在带有 data-role="fieldcontain" 的 <div> 内使用 <fieldset> 容器来改进标签样式。
//data-mini true | false 规定控件组是小尺寸还是常规尺寸
//data-type horizontal | vertical 规定控件组是水平显示还是垂直显示
对话框:
带有 data-role=”dialog” 的容器或带有 data-rel=”dialog” 的链接。
//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-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" 容器内的任何链接或表单元素将会被框架的导航功能忽略。
固定工具栏:
带有 data-role=”header” 或 data-role=”footer”,并带有 data-position=”fixed” 属性的容器。
//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-mini true | false 规定开关是小尺寸还是常规尺寸
//data-role none 防止 jQuery Mobile 把拨动开关渲染成按钮样式
//data-theme 字母 (a-z) 规定拨动开关的主题颜色
//data-track-theme 字母 (a-z) 规定轨道的主题颜色
尾部栏:
带有 data-role=”footer” 的容器。
//data-id sometext 规定唯一 ID。对于持续的尾部栏是必需的
//data-position inline | fixed 规定尾部栏是与页面内容内联还是保持固定在底部
//data-fullscreen true | false 规定尾部栏是固定在底部还是覆盖在页面内容上(查看范围更大)
//data-theme 字母 (a-z) 规定尾部栏的主题颜色。默认是 "a"
//注意:如需启用全屏定位,请使用 data-position="fixed",然后添加 data-fullscreen 属性到元素上。
头部栏:
带有 data-role=”header” 的容器。
//data-id sometext 规定唯一 ID。对于持续的头部栏是必需的
//data-position inline | fixed 规定头部栏是与页面内容内联还是保持固定在顶部
//data-fullscreen true | false 规定头部栏是固定在顶部还是覆盖在页面内容上(查看范围更大)
//data-theme 字母 (a-z) 规定头部栏的主题颜色。默认是 "a"
//注意:如需启用全屏定位,请使用 data-position="fixed",然后添加 data-fullscreen 属性到元素上。
链接:
所有的链接,包含那些带有 data-role=”button” 的链接和表单提交按钮。
//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 | fade(默认。淡入到下一页),flip(从后向前翻转到下一页),flow(抛出当前页,进入下一页),pop(像弹出窗口那样转到下一页),slide(从右向左滑动到下一页)
// slidedown | slidefade | slideup | turn | none //slidefade(从右向左滑动并淡入到下一页),slideup(从下到上滑动到下一页),slidedown(从上到下滑动到下一页),turn(转向下一页),none(无过渡效果)
//data-position-to origin | jQuery selector | window 规定弹出框的位置。Origin - 默认。定位弹窗在打开它的链接上。jQuery selector - 定位弹窗在指定元素上。Window - 定位弹窗在窗口屏幕的中央。
列表:
//带有 data-role="listview" 的 <ol> 或 <ul>。
//data-autodividers true | false 规定是否自动划分列表项
//data-count-theme 字母 (a-z) 规定计数气泡的主题颜色。
//data-divider-theme 字母 (a-z) 规定列表分隔的主题颜色。
//data-filter true | false 规定是否在列表中添加搜索框
//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) 规定列表的主题颜色
列表项:
//带有 data-role="listview" 的 <ol> 或 <ul> 内的 <li>。
//data-filtertext sometext 规定当过滤元素时要搜索的文本。该文本将会被过滤,而不是实际的列表项文本
//data-icon 图标参考手册 规定列表项图标
//data-role list-divider 规定列表项的分隔
//data-theme 字母 (a-z) 规定列表项的主题颜色
//注意:data-icon 属性只作用于带有链接的列表项。
导航栏:
//带有 data-role="navbar" 容器内部的 <li> 元素。
//data-icon 图标参考手册 规定列表项的图标
//data-iconpos left | right | top | bottom | notext 规定图标的位置
导航栏从他们的父容器中继承了主题样本。为导航栏设置 data-theme 属性是不可能的。可以为导航栏中的每个链接单独设置 data-theme 属性。
页面:
带有 data-role=”page” 的容器。
//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-role=”popup” 的容器。
//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-rel=”popup” 的锚:
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 页面切换章节。
单选按钮:
带有 type=”radio” 的成双成对的 label 和 input。它们会被自动渲染程按钮样式,data-role 不是必需的。
//data-mini true | false 规定按钮是小尺寸还是常规尺寸
//data-role none 防止 jQuery Mobile 渲染单选按钮的样式为增强状态的按钮,使元素以 HTML 原生的状态显示
//data-theme 字母 (a-z) 规定单选按钮的主题颜色
如需组合多个单选按钮,请使用带有 data-role=”controlgroup” 属性和 data-type=”horizontal|vertical” 的容器来规定是否水平或垂直组合单选按钮。
选择:
//所有的 <select> 元素。这些会被自动渲染成按钮样式,date-role 是不必需的。
//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 元素的主题颜色
如需组合多个 select 元素,请使用带有 data-role=”controlgroup” 属性和 data-type=”horizontal|vertical” 的容器来规定是否水平或垂直组合 select 元素。
滑动块:
带有 type=”range” 的输入框。这些会被自动渲染成按钮样式,date-role 是不必需的。
//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-mini true | false 规定输入框是小尺寸还是常规尺寸
//data-role none 防止 jQuery Mobile 把输入框/输入域渲染成按钮样式
//data-theme 字母 (a-z) 规定输入字段的主题颜色
面板显示:
带有 data-role=”panel”
// data-display="overlay" 在内容上显示面板
// data-display="push" 是同时"推动"面板和页面。
// data-display="reveal" 默认值,将页面像幻灯片一样从屏幕划出,将面板显示出来
jQuery Mobile 所有data-*选项,开发全解+完美注释的更多相关文章
- jQuery Mobile 所有class选项,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile事件全解 jQuery Mobile 所有class选项 jQuery Mobile 所有data-*选项 jQuery Mobile 所 ...
- jQuery Mobile事件,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile事件全解 jQuery Mobile 所有class选项 jQuery Mobile 所有data-*选项 jQuery Mobile事件 ...
- Echarts数据可视化series-scatter散点图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-radar雷达图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-pie饼图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-map地图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-line线图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-heatmap热力图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-graph关系图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
随机推荐
- unity3D HTC VIVE开发-物体高亮功能实现
在VR开发时,有时需要用到物体高亮的功能.这里使用Highlighting System v3.0.1.unitypackage插件实现. Highlighting System v3.0.1的介绍访 ...
- python--对配置文件进行搜索,增加新的内容
要求: 文件haproxy1.查 输入:www.oldboy.org 获取当前backend下的所有记录2.新建 输入: arg = {'backend': 'www.oldboy.org','rec ...
- HTML5 贝塞尔绘画 桃心
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- SNS团队Beta阶段第三次站立会议(2017.05.24)
1.立会照片 2.每个人的工作 成员 今天已完成的工作 明天计划完成的工作 罗于婕 辅助完善生词本 辅助完成生词本功能 龚晓婷 辅助开发历史记录功能 辅助完善历史记录功能 林仕庄 开发历史记录功能 完 ...
- 201521123100 《Java程序设计》 第7周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 参考资料: XMind 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代 ...
- java第二次实验
1. 本章学习总结 答:学会在java中使用函数调用. 学会在Java程序中使用函数,使程序层次更清晰. 使用StringBuilder代替string拼接,减少内存空间的占用. 使用BigDecim ...
- 201521123011 《Java程序设计》 第二周学习总结
1. 本周学习总结 记录本周学习中的重点 原则:少而精,自己写.即使不超过5行也可,但请一定不要简单的复制粘贴. 知道了c语言中string的定义与java不同的地方. 学习了枚举,数组等方法 Tnt ...
- 201521123028 《Java程序设计》第2周学习总结
1. 本周学习总结 1.学习了String及部分函数用法,例如PTA上<5-2 jmu-Java-02基本语法-02-StringBuilder>一题中用到了"str.appen ...
- Java课程设计—象棋
1. 团队名称.团队成员介绍 团队名称:WY 团队成员: 吴慧婷[组长] 201521123094 网络1514 姚佳希 201521123042 网络1512 2 项目git地址 Java课程设计 ...
- Java第十四周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...