jQuery Mobile中的数据属性

属性	描述	示例
data-ajax	该属性可以附加到链接、按钮或表单上。当该属性为false时，它会强制重新载入一个页面（绕过了ajax和页面转换）。例如，如果某个页面是使用ajax打开的，当通过链接在该页面上打开一个多页面文档时，会需要该属性。默认情况下，ajax导航是启用的。	<a href="multi-page.html" data-role="button" data-ajax="false">多页面</a>
data-add-back-btn	该属性被附加到一个页面容器上。当该属性为true时，在页面的页眉上会自动出现一个回退按钮。要想出现回退按钮，则浏览器的访问历史记录中必须有页面存在。默认情况下，回退按钮是禁用的。	<div data-role="page" data-add-back-btn="true"></div>
data-back-btn-text	该属性被附加到页面容器上。回退按钮的默认文本“back”，通过更新该属性的值，可以覆盖该文本。	<div data-role="page" data-add-back-btn="true" data-back-btn-text="前一页"></div>
data-collpased	通过添加该属性，可以配置能够折叠（data-collpased="true"）和展开（data-collpased="false"）的折叠容器。在默认情况下，可折叠的部分以展开的形式显示	<div data-role="collapsible" data-collpased="true"><h3>折叠展开<h3></div>
data-corners	该属性可以附加到链接或按钮上。当该属性为false时，jQueryMobile框架会移除按钮的圆角。默认情况下，按钮时圆角的。	<a href="" data-role="button" data-corners="false">移除圆角</a>
data-count-theme	该属性可以为徽章或计数气泡设置其他主题	<ul data-role="listview" data-count-theme="e"></ul>
data-direction	该属性被附加到链接、按钮或表单。当该属性设置为reverse时，它会应用一个反向转换。例如，正向的“滑动”转换是向左滑动。而反向的“滑动”转换则是向右滑动。当转换回历史记录中的页面时，默认应用的反向转换。	<a href="" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right">Home</a>
data-divider-theme	设置列表分割线的主题	<li data-role="list-divider" data-divider-theme="a"></li>
data-dom-cache	该属性允许用户在dom内缓存页面。默认情况下，该属性被设置为false，因此jQueryMobile框架只会在dom内主动缓存“from”页面和“to”页面。建议不要更改该值，以保持dom是轻量级的。	<div data-role="page" data-dom-cache="true"></div>
data-filter	该属性被附加到列表中，而且当该属性的值为true时，会在列表的上方添加一个搜索栏。	<ul data-role="listview" data-filter="true"></ul>
data-filter-placeholder	为搜索过滤器设置占位符（提示）文本。默认的占位符文本是“filter items...”	<ul data-role="listview" data-filter="true" data-filter-placeholder="search..."></ul>
data-filter-theme	为搜索过滤器设置主题	<ul data-role="listview" data-filter="true" data-filter-theme="b"></ul>
data-fullscreen	该属性被附加到页面容器。当该属性设置为true时，则内容区域会以全屏模式显示。通常情况下，在观看相片和视频时，会使用该行为。	<div data-role="page" data-fullscreen="true"></div>
data-icon	该属性被附加到链接或按钮。	<a href="" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right">Home</a>
data-iconpos	该属性被附加到按钮或链接上。该属性会对图标的位置进行定位。	如上
data-iconshadow	该属性可以与data-icon结合使用。当该属性为false时，jQueryMobile框架会移除按钮图标的阴影。阴影在默认情况下是显示的。	<a href="#" data-role="button" data-icon="plus" data-iconshadow="false">加号</a>
data-id	该属性被附加到页脚，通常与标签栏一起使用。通过为活动页面和目标页面的页脚添加该属性，可以让页脚在页面转换期间停留在适当位置。凡是带有该页脚的页面，为了让页脚停留在适当位置，该属性的值在转换前后的页面上必须相同，而且页眉工具栏和页脚工具栏必须设置为data-position="fixed"。否则，在页面转换期间则无法看到它们。	<div data-role="footer" data-id="myFooter" data-position="fixed"></div>
data-inline	该属性被附加到链接或按钮。默认情况下，body内容中的所有按钮都被样式化为块级元素，而且会填满屏幕的整个宽度。如果你需要一个紧凑的按钮，其宽度与按钮文本和图标的宽度相同，则可以将该属性的值设为true。	<a href="#agress" data-role="button" data-inline="true"></a>
data-inset="true"	该属性被附加到列表上。当该属性设置为true时，会对列表条目进行样式化，以便它们在显示时，不会顶着屏幕左右两侧边缘，而是以圆角形式显示。内嵌的方式有助于从视觉上对列表分割成不同的组。	<ul data-role="listview" data-inset="true"></ul>
data-native-menu	默认情况下，选择菜单会为os启动本地的选择器。为了以一种自定义的html/css视图的方式呈现选择菜单，可以将该属性的值设置为false	<select name="genre" data-native-menu="false"></select>
data-placeholder	占位符可以用来为未选中的选择菜单显示提示文本，它要求用户做出选择。	<option value="' data-placeholder="true">select one</option>
data-position	该属性被附加到页眉或页脚。当该属性被设置为fixed时，它会分别将页眉和页脚固定在页面的顶部和底部。	<div data-role="header" data-position="fixed"></div> <div data-role="footer" data-position="fixed"></div>
data-prefecth	当该属性添加到一个链接或按钮上时，jQueryMobile框架会在后台将页面缓慢的载入dom中。建议构建单独的页面，并使用data-prefecth属性预先载入通常会访问到附属页面。与多页面的策略相比，该策略更加简单，而且性能更好。	<a href="reviews.html" data-prefecth">Movie View</a>
data-rel="back"	该属性被附加到链接或按钮上。当该属性被设置为back时，链接会模拟回退按钮，返回到上一个历史访问条目，并且忽略默认的href。	<a href="home.html" data-rel="back" data-role="button">home</a>
data-role="dialog"	该属性被附加到页面容器上。可以用该属性替换data-role="page"。将该属性的值设置为dialog，会模拟对话框的形式来样式化页面。	<div data-role="dialog"></div>
data-role="fieldcontain"	该属性被附加到包含表单字段的div元素上。当该属性的值为fieldcontain时，它会在被包含的字段之间添加分割线。	<div data-role="fieldcontain"><lable><input></div>
data-role="footer"	该属性会创建页脚容器。	<div data-role="footer"></div>
data-role="header"	该属性会创建页眉容器。	<div data-role="header"></div>
data-role="list=divider"	将该属性添加到列表上，可以对页眉分段。	<li data-role="list-divider">分段</li>
data-role=“listview”	该属性用于创建列表视图。	<ul data-role="listview"></ul>
data-role="navbar"	该属性用来创建导航栏或标签栏。导航栏可以附加到页眉或页脚上。	<ul data-role="'navbar></ul>
data-role="none"	通过为任意表单或按钮添加该属性，可以使框架不应用任何增强的样式或脚本。	<input type="text" name="name" id="name" value="" data-role="none"/>
data-role="page"	该属性定义了页面容器。	<div data-role="page"> <!-- header--> <!-- content--> <!-- footer--> </div>
data-role="slider"	该属性用来创建一个快关控件。	<select name="slider" data-role="slider"><option value="off">off</option><option value="on">on</option></select>
data-shadow	该属性值为false时，框架会移除按钮的阴影。在默认情况下，阴影是显示的。	<a href="" data-shadow="false" data-role="button">无阴影</a>
data-split-icon	在构建拆分按钮时，设置附属的按钮的图标。	<ul data-role="listview" data-split-icon="star"></ul>
data-split-theme	在构建拆分按钮时，设置附属按钮的主题。	<ul data-role="listview" data-split-icon="delete" data-split-theme="e"></ul>
data-theme	将该属性添加到所有的容器和页面组件中，创建可主题化的设计。	<div data-role="header" data-theme="e"></div>
data-title	该属性被附加到页面容器，并设置页面的标题。	<div data-role="page" data-title="hello"></div>
data-transition	该属性可以附加到链接、按钮和表单上。当页面之间发生转换时，该属性的值可以用来设置页面转换所使用的css转换效果。	<a href="flip.html" data-transition="flip">flip</a>
data-type="horizontal"	默认情况下，按钮时垂直放置的。通过添加该属性可以以水平方式样式化按钮。	<div data-role="controlgroup" data-type="horizontal"> <!-- 按钮1--> <!-- 按钮2--> </div>
data-url	该属性被附加到页面容器上。该属性的值是页面唯一的定位符，将会在浏览器的URL地址栏显示。默认情况下，jQueryMobile会基于页面的url来指派唯一的定位符。	<div data-role="page" data-url="home.html"></div>