对于JQuery Mobile的介绍
对于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>
浙公网安备 33010602011771号