文档章节

jQuery Mobile数据属性

饮料
 饮料
发布于 2013/04/28 16:26
字数 821
阅读 783
收藏 9

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






© 著作权归作者所有

上一篇: 准备就绪
下一篇: meta之viewport
饮料
粉丝 1
博文 21
码字总数 5653
作品 0
佛山
程序员
私信 提问
使用 jQuery Mobile API 实现细粒度的自定义控制

jQuery Mobile API 针对移动网站定制提供了另一个级别的控制。从全局选项的自定义设置,到钩住交互事件和曝光的方法,一切都可以使用该 API 实现,并且在本文中进行介绍。在本文结束时,您就...

IBMdW
2012/05/27
1K
0
第一天 认识jQuery mobile 框架,资源,书籍

前言 这里就不对jquery mobile做过多的历史介绍,直接进行jQuery mobile的学习 jQuery mobile 框架纵览 1.jQuery mobile 的显示结构 如图1.1 从上面的图示我们可以知道,一个完整的页面是由 he...

打杂程序猿
2011/12/22
613
2
使用 jQuery Mobile 和 CSS3 实现响应式设计

jQuery Mobile 框架是一个 JavaScript 库,您可以用它来轻松地创建了一个移动版本的网站,将现有的 Web 页面转换成触摸友好的网站和应用程序。jQuery Mobile 框架允许用户通过 Web 浏览器直接...

IBMdW
2012/05/27
8.8K
3
jQueryMobile快速入门

what   jQuery Mobile是jQuery 在手机上和平板设备上的版本。它不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。![mobile-wh...

笔阁
2015/11/16
1K
2
创建定制的jQuery Mobile主题

jQuery Mobile 框架是一套JavaScript库,用来帮助你快速创建适合移动设备访问的网站。它可以把目前的页面转换成适合触摸操作的页面。jQuery Mobile可以让用户通过浏览器直接访问到触摸友好的...

虫虫
2011/12/07
9.1K
1

没有更多内容

加载失败,请刷新页面

加载更多

技术分享 | MySQL 8.0:字符集从 utf8 转换成 utf8mb4

作者:胡呈清 整理 MySQL 8.0 文档时发现一个变更:默认字符集由 latin1 变为 utf8mb4。想起以前整理过字符集转换文档,升级到 MySQL 8.0 后大概率会有字符集转换的需求,在此正好分享一下。...

爱可生
30分钟前
4
0
不管单机还是集群的限流实现已经给你准备好了

限流算法 计数器算法 维护一个counter,规定在单位时间内counter的大小不能超过最大值,每隔固定时间就将counter的值置零。如果这个counter大于设定的阈值,那么系统就拒绝请求 漏桶算法 维护...

阿提说说
41分钟前
4
0
文件管理

通过CLI登录进行文件管理 .表示当前目录,..表示父目录,具有隐藏文件。支持缩写与TAB键补全 1、目录操作 pwd#打印工作目录 cd <directory>#改变工作目录 dir [/all][<directory>]#查看目录内...

悠悠子佩
43分钟前
4
0
Netty学习笔记(10)——Netty中的Channel组件

1. Channel的功能 1. 与NIO中的Channel一样,它实现了网络操作的抽象类,聚合了一系列的网络IO功能,包括读写数据、建立连接、关闭连接等功能。通过外观模式,将数据读写、连接建立与断开等操...

江左煤郎
47分钟前
3
0
二叉树的深度

从根结点到叶结点依次经过的结点(含根、叶结点)形成树的一条路径,最长路径的长度为树的深度。 public int TreeDepth(TreeNode root) { return root == null ? 0 : 1 + Math.max(Tree...

Garphy
55分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部