标签：
对于JQuery Mobile的介绍
jQuery Mobile 是一个为触控优化的框架，用于创建移动 web 应用程序。jQuery 适用于所有流行的智能手机和平板电脑：jQuery Mobile 构建于 jQuery 库之上，这使其更易学习。它使用 HTML5、CSS3、JavaScript 和 AJAX 通过尽可能少的代码来完成对页面的布局。jQuery Mobile 将“写得更少、做得更多”这一理念提升到了新的层次：它会自动为网页设计交互的易用外观，并在所有移动设计上保持一致。
jQuery Mobile 主题，jQuery Mobile 提供了五种不同的样式主题，从 "a" 到 "e" - 每种主题带有不同颜色的按钮、栏、内容块，等等。jQuery Mobile 中的一种主题由多种可见的效果和颜色构成。如需定制应用程序的外观，请使用 data-theme 属性，并为该属性分配一个字母：<div data-role="page" data-theme="a|b|c|d|e">
实例
<div data-role="header" data-theme="b"></div>
<div data-role="content" data-theme="a"></div>
<div data-role="footer" data-theme="e"></div>
jQuery Mobile 列表视图，jQuery Mobile 中的列表视图是标准的 HTML 列表：有序列表 (<ol>) 和无序列表 (<ul>)。如需创建列表，请向 <ol> 或 <ul> 元素添加 data-role="listview"。如需使这些项目可点击，请在每个列表项（<li>）中规定链接：
实例
<ol data-role="listview">
<li><a href="#">列表项</a></li>
</ol>
<ul data-role="listview">
<li><a href="#">列表项</a></li>
</ul>
列表分隔符列表分隔符（List Dividers）用于把项目组织和组合为分类/节。如需规定列表分隔符，请向 <li> 元素添加 data-role="list-divider" 属性：
实例
<ul data-role="listview">
<li data-role="list-divider">欧洲</li>
<li><a href="#">法国</a></li>
<li><a href="#">德国</a></li>
</ul>
在 jQuery Mobile 中添加页面在 jQuery Mobile，您可以在单一 HTML 文件中创建多个页面。请通过唯一的 id 来分隔每张页面，并使用 href 属性来连接彼此：data-role="page" 是显示在浏览器中的页面，data-role="header" 创建页面上方的工具栏（常用于标题和搜索按钮），data-role="content" 定义页面的内容，比如文本、图像、表单和按钮，等等，data-role="footer" 创建页面底部的工具栏
实例1
<body>
<div data-role="page">
<div data-role="header">
<h1>欢迎访问我的主页</h1>
</div>
<div data-role="content">
<p>我是一名移动开发者！</p>
</div>
<div data-role="footer">
<h1>页脚文本</h1>
</div>
</div>
</body>
实例2
<div data-role="page" id="pageone">
<div data-role="content">
<a href="#pagetwo">转到页面二</a>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="content">
<a href="#pageone">转到页面一</a>
</div>
</div>
jQuery Mobile 过渡效果，jQuery Mobile 拥有一系列关于如何从一页过渡到下一页的效果。过渡效果可应用于任意链接或通过使用 data-transition 属性进行的表单提交：<a href="#anylink" data-transition="slide">滑动到页面二</a>
1、fade 默认。淡入淡出到下一页。
2、flip 从后向前翻动到下一页。
3、flow 抛出当前页面，引入下一页。
4、pop 像弹出窗口那样转到下一页。
5、slide 从右向左滑动到下一页。
6、slidefade 从右向左滑动并淡入到下一页。
7、slideup 从下到上滑动到下一页。
8、slidedown 从上到下滑动到下一页。
9、turn 转向下一页。
10、none 无过渡效果。
jQuery Mobile 提供了对按钮进行组合的简单方法。请将 data-role="controlgroup" 属性与 data-type="horizontal|vertical" 一同使用，以规定水平或垂直地组合按钮：1、data-corners true | false 规定按钮是否有圆角。 2、data-mini true | false 规定是否是小型按钮。3、data-shadow true | false 规定按钮是否有阴影。
实例
<div data-role="controlgroup" data-type="horizontal">
<a href="#anylink" data-role="button">按钮 1</a>
<a href="#anylink" data-role="button">按钮 2</a>
<a href="#anylink" data-role="button">按钮 3</a>
</div>
jQuery Mobile 按钮添加图标，如需向您的按钮添加图标，请使用 data-icon 属性：<a href="#anylink" data-role="button" data-icon="search">搜索</a>
1、data-icon="arrow-l" 左箭头
2、data-icon="arrow-r" 右箭头
3、data-icon="delete" 删除
4、data-icon="info" 信息
5、data-icon="home" 首页
6、data-icon="back" 返回
7、data-icon="search" 搜索
8、data-icon="grid" 网格
您也能够规定图标被放置的位置：上、右、下或左。请使用 data-iconpos 属性来规定位置：
<a href="#link" data-role="button" data-icon="search" data-iconpos="top">上</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="right">右</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">下</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="left">左</a>
只显示图标，如果只需显示图标，请将 data-iconpos 设置为 "notext": <a href="#link" data-role="button" data-icon="search" data-iconpos="notext">搜索</a>
jQuery Mobile 导航栏，导航栏由一组水平排列的链接构成，通常位于页眉或页脚内部。默认地，导航栏中的链接会自动转换为按钮（无需 data-role="button"）。请使用 data-role="navbar" 属性来定义导航栏：
实例
<div data-role="header">
<div data-role="navbar">
<ul>
<li><a href="#anylink">首页</a></li>
<li><a href="#anylink">页面二</a></li>
<li><a href="#anylink">搜索</a></li>
</ul>
</div>
</div>
按钮的宽度，默认地，与其内容一致。使用无序列表来均等地划分按钮：一个按钮占据 100% 的宽度，两个按钮各分享 50% 的宽度，三个按钮 33.3%，以此类推。不过，如果您在导航栏中规定了五个以上的按钮，那么它会弯折为多行。
可折叠的内容块，可折叠（Collapsibles）允许您隐藏或显示内容 - 对于存储部分信息很有用。如需创建可折叠的内容块，请向某个容器分配 data-role="collapsible" 属性。在容器（div）中，添加一个标题元素（h1-h6），其后是您需要扩展的任意 HTML 标记：
实例
<div data-role="collapsible">
<h1>点击我 - 我可以折叠！</h1>
<p>我是可折叠的内容。</p>
</div>
默认地，该内容是关闭的。如需在页面加载时扩展内容，请使用 data-collapsed="false"：
实例
<div data-role="collapsible" data-collapsed="false">
<h1>点击我 - 我可以折叠！</h1>
<p>现在我默认是展开的。</p>
</div>
嵌套的可折叠块，可以嵌套可折叠内容块：
实例
<div data-role="collapsible">
<h1>点击我 - 我可以折叠！</h1>
<p>我是被展开的内容。</p>
<div data-role="collapsible">
<h1>点击我 - 我是嵌套的可折叠块！</h1>
<p>我是嵌套的可折叠块中被展开的内容。</p>
</div>
</div>
可折叠集合，可折叠集合（Collapsible sets）指的是被组合在一起的可折叠块（常被称为手风琴）。当新块被打开时，所有其他块会关闭。创建若干内容块，然后通过 data-role="collapsible-set" 用新容器包装这个可折叠块：
实例
<div data-role="collapsible-set">
<div data-role="collapsible">
<h1>点击我 - 我可以折叠！</h1>
<p>我是被展开的内容。</p>
</div>
<div data-role="collapsible">
<h1>点击我 - 我可以折叠！</h1>
<p>我是被展开的内容。</p>
</div>
</div>
jQuery Mobile 文本输入，输入字段是通过标准的 HTML 元素编写的，jQuery Mobile 会为它们设置专门针对移动设备的美观易用的样式。您还可以使用新的 HTML5 <input> 类型：
实例
<form method="post" action="demoform.asp">
<div data-role="fieldcontain">
<label for="fullname">全名：</label>
<input type="text" name="fullname" id="fullname">
<label for="bday">生日：</label>
<input type="date" name="bday" id="bday">
<label for="email">电邮：</label>
<input type="email" name="email" id="email" placeholder="您的邮件地址..">
</div>
</form>
文本框，请使用 <textarea> 来实现多行文本输入。注释：文本框会自动扩大，以适应您输入的文本行。
实例
<form method="post" action="demoform.asp">
<div data-role="fieldcontain">
<label for="info">Additional Information:</label>
<textarea name="addinfo" id="info"></textarea>
</div>
</form>
搜索框，输入类型 type="search" 是 HTML5 中的新类型，用于定义供输入搜索词的文本字段：
实例
<form method="post" action="demoform.asp">
<div data-role="fieldcontain">
<label for="search">Search:</label>
<input type="search" name="search" id="search">
</div>
</form>
复选框，当用户选择有限数量选项中的一个或多个选项时，会用到复选框：
实例
<form method="post" action="demoform.asp">
<fieldset data-role="controlgroup">
<legend>Choose as many favorite colors as you‘d like:</legend>
<label for="red">Red</label>
<input type="checkbox" name="favcolor" id="red" value="red">
<label for="green">Green</label>
<input type="checkbox" name="favcolor" id="green" value="green">
<label for="blue">Blue</label>
<input type="checkbox" name="favcolor" id="blue" value="blue">
</fieldset>
</form>
标签：
原文地址：http://www.cnblogs.com/yi-an/p/4582105.html
