jQuery Mobile数据属性
2019独角兽企业重金招聘Python工程师标准>>>
Jquery mobile框架使用html5的 data- 属性来使初始化标记和配置组件。这些属性全部都是可选的,并且支持手动调用插件。为了避免命名上的和与其他也使用html5的 data- 属性插件与框架的冲突,可以使用全局设置来自定义命名空间。
按钮
通过 data-role="button" 来标记按钮。基于链接的按钮和表单的button元素会被自动渲染,无需data-role属性。
data-corners true | false
data-icon home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search
data-iconpos left | right | top | bottom | notext
data-iconshadow true | false
data-inline true | false
data-shadow true | false
data-theme swatch letter (a-z)
多个按钮按钮的情况下,可以给这些按钮的容器添加data-role="controlgroup"属性,使这些按钮成为垂直的按钮组。给按钮添加data-type="horizontal" 属性可以使按钮水平并排排列。
复选框
通过type="checkbox"标记的input元素会自动增强,无需data-role属性。
data-role none (防止自动增强)
data-theme a-z
可折叠区域
一个标题元素和一个用data-role="collapsible"属标记的容器。
data-collapsed true | false
data-content-theme a-z
data-theme a-z
手风琴组
一个标题元素和一个用data-role="collapsible-set"属标记的容器。
data-content-theme
data-theme
对话框
用data-role="page"属性标记的容器或者通过data-rel="dialog"标记的链接所指向的容器
data-close-btn-text string(对话框关闭按钮的文字)
data-dom-cache true | false
data-id 字符串 (页面的ID)
data-fullscreen true | false (used in conjunction with fixed toolbars)
data-overlay-theme a-z
data-theme a-z
data-title string(此页面显示的时候的标题)
页面内容
用data-role="content"属性标记的容器
data-theme a-z
filed container
data-role filedcontain
开关
用data-role="slider"属性标记的列表菜单,只能有两个option.
data-role 无 (防止自动增强l)
data-theme
data-track-theme
footer
用data-role="footer"属性标记的容器
data-id 字符串 (unique id, useful in persistent footers)
data-position fixed
data-theme a-z
Header
用data-role="header"属性标记的容器
data-add-back-btn true | false (只会在header自动添加后退按钮)
data-back-btn-text 字符串
data-back-btn-theme
data-position fixed
data-theme
data-title
链接
链接,包括用data-role="button"属性标记的链接,和表单中的
data-ajax true | false
data-direction reverse (翻转页面转场效果)
data-dom-cache true | false
data-prefetch true | false
data-rel back (后退到上一个历史的记录的页面)
dialog (打开对话框,不记录进历史记录中)
external (for linking to another domain)
data-transition slide | slideup | slidedown | pop | fade | flip
列表
用data-role="listview"属性标记的ol或ul
data-count-theme
data-dividertheme
data-filter true | false
data-filter-placeholder
data-filter-theme
data-inset true | false
data-split-icon home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search
data-theme
列表项
data-icon home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search
data-role list-divider
data-theme
页面
用data-role="page"属性标记的容器
data-close-btn-text
data-dom-cache
data-id
data-fullscreen
data-overlay-theme
data-theme
data-title
单选按钮
用data-role="header"属性标记的容器
data-role none (防止自动增强)
data-theme
列表菜单
select的列表菜单会被自动增强,无需data-role属性。
data-icon home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search
data-iconpos
data-inline
data-native-menu true | false
data-overlay-theme
data-placeholder true | false - 加到option上
data-role
data-theme
划杆
type="range"属性标记的input元素会被自动增强,无需data-role属性
data-role
data-theme
data-track-theme
文本框和文本域
type="text|number|search|等."类型的文本框或者文本域会自动增强,无需data-role属性
data-role
data-theme
转载于:https://my.oschina.net/lensliao/blog/126263
jQuery Mobile数据属性相关推荐
- jQuery Mobile学习笔记
1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) ...
- 移动应用程序设计/开发:jQuery Mobile入门指南
在过去的2-3年中,我们看到了对移动网站的浏览器和操作系统支持的巨大增长. 最值得注意的是苹果的iOS和谷歌的Android平台. 但是,诸如PalmOS和Blackberry之类的其他公司仍然处于混 ...
- 【JQuery Mobile移动应用开发实战】JQuery Mobile基础——JQuery Mobile的高级特性
文章目录 7. JQuery Mobile的高级特性 7.1 JQuery Mobile的多页面模板 7.2 JQuery Mobile中的事件 7.3 JQuery Mobile中的触发事件 7.4 ...
- jQuery Mobile的学习时间bottonbutton的事件学习
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/xmt1139057136/article/details/27700521 程序猿都非常懒,你懂的! ...
- jQuery UI vs Kendo UI jQuery Mobile vs Kendo UI Mobile
jQuery UI vs Kendo UI http://jqueryuivskendoui.com/#introduction jQuery Mobile vs Kendo UI Mobile ht ...
- 使用ajax追加样式没,ajax-动态添加内容后,jQuery Mobile不应用样式
我知道这个问题出现在几个地方(迫使jQuery Mobile重新评估动态插入的内容的样式/主题),但是没有一个对我有用的答案. 我正在使用ajax加载一些内容,并将其插入到div中,如下所示: $.a ...
- 《jQuery Mobile入门经典》—— 第 1 章 了解jQuery Mobile
本节书摘来异步社区<jQuery Mobile入门经典>一书中的第1章,作者:[美]Phil Dutson,更多章节内容可以访问云栖社区"异步社区"公众号查看. 第 1 ...
- jQuery Mobile开发1-UI components
一.jQuery Mobile现在支持的UI components 二.List views 基础List views <!DOCTYPE html> <html><he ...
- jQuery Mobile发展新闻阅读器,适应iphone和android打电话
程序猿是很不赖,你知道. 我们经常新浪,腾讯.雅虎等各大网站看到上述新闻.他们还推出了自己的移动新闻阅读器.今天,我自己用的jQuery Mobile 为了实现这一功能,.图像大小上传限制的大小250 ...
最新文章
- 2.27linux和windows互传文件
- 深度学习常见概念解析
- python hook_python_理解篇_钩子方法的理解
- 呕心沥血博一文--MySQL主从异步复制
- bbsmax mysql_mysql 语句case when
- 如何用excel做正交分析_利用Excel进行正交设计及分析
- 把Android源码导入Android Studio进行调试
- 操作系统--01计算机系统概述
- Math函数生成随机数用法
- 三峡大学c语言上机考试题库,[专题]三峡大学计算机基础考试题库.doc
- Attempt to invoke virtual method ‘void cn.jiguang.share.android.api.AbsPlatform.notifyError
- 【计算机网络笔记1】计算机网络和因特网
- 爬虫-Python编程入门
- linux ntp时间立即同步命令_Linux系统时间同步方法小结
- 全国人口净流入城市排名2020_2019年长三角各城市常住人口、城镇化分布:苏宁杭净流入超200万...
- 基于SSM的供应商管理系统
- 2017年Ledger售出100万个加密货币硬件钱包引来三星和谷歌的投资
- html写签到程序,如果写自动签到程序的模板
- 前端之HTML 文本、超链接
- 重磅!CPOS、VISA、Facebook、摩根大通杀入跨境支付市场