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>