最近研究了一下jquerymonile，一些方法和jquery本身没有什么变化，使用方法也都是一样所以就没有多看，就针对jquerymobile的主题以及页面的上看了许多，发现他通过一些属性来实现比如data-role就是最关键的，现在jquerymobile的手册特别是中文版的手册基本上是没有，但是自己的英文水平实在是太菜，但是没有办法没有这方面的资料只有到jquerymobile的官网去研究，现在整理了一下放到自己的博客中，一方面是记录自己的学习过程另一方面希望能给想研究jquerymobile的同学们一些帮助！好了下面就贴出整理的手册：
提示：你可以先修改部分代码再运行。
（建议你使用firefox浏览器或者chrome，ie浏览器看不到一些效果！）
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>jquerymobile手册</title>
<meta charset="UTF-8">
<link rel="stylesheet" media="all" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
<style type="text/css">
* { padding:0; margin:0; font-size:14px; }
#header, #footer { }
table { border:1px solid #ccc; margin:0 auto; border-collapse:collapse; }
td, th { height:30px; border:1px solid #ccc; text-align:left; line-height:2; }
th { width:15%; }
caption { font-size:1.5; font-weight:bold; padding:10px; }
img { vertical-align:middle; }
</style>
</head>
<body>
<div data-role="page">
<div data-role="header" data-nobackbtn="false" data-theme="a" id="header">
<h1>jquery mobile手册</h1>
</div>
<div data-role="content">
<table width="98%">
<tbody>
<tr>
<td width="11%" rowspan="10">data-role</td>
<th width="9%">page</th>
<td width="80%">设置你的页面为mobile的样式就靠它了，放在body的下面是mobile的容器<div data-role="page"></div></td>
</tr>
<tr>
<th>header</th>
<td>用来设置你的页面的头部使用方法和page类似，<div data-role="header"></div></td>
</tr>
<tr>
<th>footer</th>
<td>用来设置你的页面的底部使用方法和header类似，<div data-role="footer"></div></td>
</tr>
<tr>
<th>content</th>
<td>用于设置页面的内容部分<div data-role="content"></div></td>
</tr>
<tr>
<th>controlgroup</th>
<td>把几个标签设置成一个组，这个一般会配合data-type="horizontal"一起使用</td>
</tr>
<tr>
<th>fieldcontain</th>
<td>使用它会给这个标签定义一下下划线和一个下边距</td>
</tr>
<tr>
<th>navbar</th>
<td>从字面的意思你就可以想到它的用法，对就是用来设置你的导航菜单的</td>
</tr>
<tr>
<th>listview</th>
<td>以列表的样式显示（这个样式是预先定好的）这个一般会配合data-inset="true"使用。例如<ul data-role="listview" data-inset="true"></ul></td>
</tr>
<tr>
<th>list-divider </th>
<td>这个是用在li上面的用于设置成众多li的标题，并且这个li中不能存在a标签</td>
</tr>
<tr>
<th>button</th>
<td>这个属性可以使你的标签样式呈现出和按钮相同的外观</td>
</tr>
<tr>
<td rowspan="5"><p>data-theme</p>
<p>（主题）</p></td>
<th>a</th>
<td><img src="http://tech.alltosun.com/home/attachment/201010/29/1464_1288328632rc9d.jpg" alt="主题a" /> 这个是代码风格a也就是默认的风格</td>
</tr>
<tr>
<th>b</th>
<td><img src="http://tech.alltosun.com/home/attachment/201010/29/1464_12883286338Snw.jpg" /></td>
</tr>
<tr>
<th>c</th>
<td><img src="http://tech.alltosun.com/home/attachment/201010/29/1464_1288328633XZB4.jpg" /></td>
</tr>
<tr>
<th>d</th>
<td><img src="http://tech.alltosun.com/home/attachment/201010/29/1464_1288328633VZjV.jpg
" /></td>
</tr>
<tr>
<th>e</th>
<td><img src="http://tech.alltosun.com/home/attachment/201010/29/1464_12883286338b1B.jpg" /></td>
</tr>
<tr>
<td rowspan="2"><p>data-type</p>
<p>（排列方式）</p></td>
<th>horizontal（水平）</th>
<td>这个属性是实现一个组内的标签的排列方向是水平的</td>
</tr>
<tr>
<th>默认就是竖直</th>
<td>如果不想实现水平那么你可以不添加data-type即可！</td>
</tr>
<tr>
<td rowspan="3"><p>data-transition</p>
<p>（切换方式）</p></td>
<th>pop</th>
<td>你可以通过测试得出你想要的切换方式</td>
</tr>
<tr>
<th>slideup</th>
<td>你可以通过测试得出你想要的切换方式</td>
</tr>
<tr>
<th>flip</th>
<td>你可以通过测试得出你想要的切换方式</td>
</tr>
<tr>
<td rowspan="16"><p>data-icon</p>
<p>（图标）</p></td>
<th>delete</th>
<td><a data-icon="delete" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>plus</th>
<td><a data-icon="plus" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>minus</th>
<td><a data-icon="minus" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>arrow-u</th>
<td><a data-icon="arrow-u" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>arrow-d</th>
<td><a data-icon="arrow-d" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>arrow-l</th>
<td><a data-icon="arrow-l" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>arrow-r</th>
<td><a data-icon="arrow-r" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>check</th>
<td><a data-icon="check" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>gear</th>
<td><a data-icon="gear" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>refresh</th>
<td><a data-icon="refresh" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>forward</th>
<td><a data-icon="forward" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>back</th>
<td><a data-icon="back" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>grid</th>
<td><a data-icon="grid" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>star</th>
<td><a data-icon="star" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>alert</th>
<td><a data-icon="alert" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>info</th>
<td><a data-icon="info" data-role="button" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<td rowspan="2"><p>data-iconp<strong>os</strong></p>
<p><strong>（图标对齐）</strong></p></td>
<th>left</th>
<td>这个是默认的左对齐</td>
</tr>
<tr>
<th>right</th>
<td><a data-icon="info" data-role="button" data-iconpos="right" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<td rowspan="2"><p>data-iconpos</p>
<p>(去除文本)</p></td>
<th>notext(去除文本)</th>
<td> <a data-icon="alert" data-role="button" data-iconpos="notext" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th></th>
<td></td>
</tr>
<tr>
<td rowspan="2">data-fullscreen</td>
<th>true（满屏）</th>
<td>设置这个可以实现满屏</td>
</tr>
<tr>
<th>false（非满屏）</th>
<td>这个是默认的如果你不需要满屏就不需要设置这一项</td>
</tr>
<tr>
<td rowspan="3">data-position</td>
<th>fixed</th>
<td>从表面的意思就可以理解，就是实现固定在某个位置不动</td>
</tr>
<tr>
<th>inline</th>
<td></td>
</tr>
<tr>
<th></th>
<td></td>
</tr>
<tr>
<td rowspan="2">data-inset</td>
<th>true</th>
<td>实现非全屏的圆角效果</td>
</tr>
<tr>
<th>false</th>
<td>默认的就是false</td>
</tr>
<tr>
<td rowspan="2"><p>data-rel</p></td>
<th>dialog(弹出对话框)</th>
<td><a data-icon="alert" data-role="button" data-rel="dialog" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th></th>
<td></td>
</tr>
<tr>
<td rowspan="2">data-inline<br/>
（内联）</td>
<th>true（析成内联样式）</th>
<td><a data-icon="info" data-role="button" data-iconpos="right" data-inline="true" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<th>false</th>
<td><a data-icon="info" data-role="button" data-iconpos="right" data-inline="false" href="http://www.xh-css.cn">web标准学习</a></td>
</tr>
<tr>
<td rowspan="2"><p>data-nobackbtn</p>
<p>(返回按钮)</p></td>
<th>true</th>
<td>设置成true，header中将不再有back按钮出现</td>
</tr>
<tr>
<th>false</th>
<td>默认的有back按钮</td>
</tr>
<tr>
<td></td>
<th></th>
<td></td>
</tr>
<tr>
<td></td>
<th></th>
<td></td>
</tr>
<tr>
<td></td>
<th></th>
<td></td>
</tr>
</tbody>
</table>
</div>
<div id="footer" data-role="footer">
<h4>jquerymobile手册 不断更新...</h4>
</div>
</div>
</body>
</html>
分享到：
相关推荐
“JQuery Mobile学习助手”包含了对JQuery Mobile中的所有组件、接口的详细介绍。对于JQuery Mobile的初学者，可以从中学习JQuery Mobile的所有接口与组件的功能，同时通过范例进行练习；对于JQuery Mobile开发人员...
**jQuery Mobile 学习小项目** `jQuery Mobile` 是一个基于 `jQuery` 库的轻量级、触屏友好的前端框架，专为移动设备设计，用于构建响应式和交互式的移动应用程序。这个项目旨在帮助新手快速入门 `jQuery Mobile` ...
### jQueryMobile学习手册知识点梳理 #### 一、jQueryMobile简介 **1.1 本地应用与Web应用** - **概念对比：** 在介绍jQueryMobile之前，先了解本地应用（Native Application）与Web应用（Web Application）的...
jQueryMobile学习文档.pptx
本资料包包含了学习jQuery Mobile所需的关键资源，包括书籍和文档，以及可能包含的框架包，旨在为初学者提供一站式的学习解决方案，免去自行搜集资料的困扰。 首先，让我们深入理解jQuery Mobile的核心概念： 1. *...
学习jQuery Mobile，你将了解到如何创建可滚动的列表（listviews），可滑动的面板（panels），可滑动的选项卡（tabs），可折叠的块（collapsible sets），以及各种表单组件的优化。它还支持动态页面加载，这意味着你...
jQuery Mobile 是一个广泛使用的框架，特别适合于移动设备和桌面浏览器。它允许开发者使用HTML5、CSS3和JavaScript来创建响应式网页应用。这个框架之所以在移动开发中受到青睐，是因为它可以将现有的网页转换成触摸...
1. **基础模板**：包含最简单的页面结构，适合学习jQuery Mobile的基本页面元素和布局方式。 2. **导航模板**：演示了如何使用jQuery Mobile的导航栏和下拉菜单，实现多级导航。 3. **表单模板**：展示了各种表单...
**三、jQuery Mobile 学习资源** 1. **官方文档** 官方文档详尽地介绍了 jQuery Mobile 的所有特性和组件，是学习的首要资料。 2. **Demo 应用** 提供的 Demo 应用包含各种示例，可以帮助开发者直观地了解和测试...
综上所述，《Sams Teach Yourself jQuery Mobile in 24 Hours》是一本全面、实用的jQuery Mobile学习指南，无论是初学者还是有经验的开发者都能从中受益匪浅。通过本书的学习，读者可以迅速掌握jQuery Mobile的关键...
学习这个例子，开发者可以快速掌握jQuery Mobile的核心功能，从而高效地开发出适应各种移动设备的交互式应用。无论是新手还是经验丰富的开发者，都能从中受益，提升其在移动Web开发领域的技能。
9. **优化性能**：由于jQuery Mobile默认的增强型渲染可能会导致性能下降，尤其是在大量图片或复杂布局中，需要学习如何使用"pagecontainer"事件、"deferred"对象和"data-enhance=false"来优化加载速度。 10. **...
2.jQuery Mobile 构建于 jQuery 以及 jQuery UI类库之上，如果您了解 jQuery，您可以很容易的学习 jQuery Mobile。 3.jQuery Mobile 使用了极少的 HTML5、CSS3、JavaScript 和 AJAX 脚本代码来完成页面的布局渲染。...
这个源码包提供了一手的学习资料，让我们深入理解jQuery Mobile的工作原理及其在实际项目中的应用。 首先，jQuery Mobile的核心是它的触控优化的事件处理和UI组件。在源码中，你可以看到如何通过这些组件创建响应式...
- **官方文档**：jQuery Mobile 的官方文档是非常全面的学习资料，覆盖了所有核心功能和用法。 - **论坛与社区**：加入相关的论坛和社区，可以获取最新的资讯和技术支持。 - **案例研究**：学习他人的项目案例，可以...
“jquery mobile官方git资源”中包含的官方文档是学习和开发的宝贵资料。文档详细介绍了jQuery Mobile的各种组件、事件、API和最佳实践，帮助开发者了解如何有效地利用这个框架。示例部分则提供了各种实际应用，涵盖...
### jQuery Mobile 学习手册详解 #### 一、引言 《jQuery Mobile：快速上手》是一本由 Maximiliano Firtman 编写的专业书籍，由 O'Reilly Media 出版。本书作为官方推荐的学习资源之一，为读者提供了深入浅出的 ...
通过本书的学习，读者将会获悉jQuery Mobile的核心特性，以及如何创建可主题化的设计，还会掌握jQuery Mobile的API，以及如何使用PhoneGap来扩展jQuery Mobile。 《jQuery Mobile快速入门》适合想要掌握jQuery ...
《jQuery Mobile Datepicker：手机端日期选择器深度解析》 在移动应用开发中，日期选择器是一个不可或缺的组件，它提供了用户友好的界面，让用户能够方便地选择日期。jQuery Mobile Datepicker 是一个专为手机端...
**jQuery Mobile 知识点详解** jQuery Mobile 是一个专为移动设备设计的前端框架，它提供了丰富的 UI 组件和交互效果，使得开发者可以快速构建功能丰富、具有良好用户体验的跨平台移动 Web 应用。本课件源码将帮助...