最近研究了一下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 学习的书籍和文档，还有框架包，都包括了，初学者可以直接使用，不需要自己去慢慢寻找资料学习！
jQueryMobile学习文档.pptx
中文版的 jquerymobile 电子书，对新手很有帮助，当然老鸟可以拿来复习下，呵呵
2.jQuery Mobile 构建于 jQuery 以及 jQuery UI类库之上，如果您了解 jQuery，您可以很容易的学习 jQuery Mobile。 3.jQuery Mobile 使用了极少的 HTML5、CSS3、JavaScript 和 AJAX 脚本代码来完成页面的布局渲染。...
通过本书的学习，读者将会获悉jQuery Mobile的核心特性，以及如何创建可主题化的设计，还会掌握jQuery Mobile的API，以及如何使用PhoneGap来扩展jQuery Mobile。 《jQuery Mobile快速入门》适合想要掌握jQuery ...
jquerymobile是用于创建移动 Web 应用的前端开发框架，此资源包含了几套jquerymobile的模板，供新手学习。
Jquery Mobile中的按钮,学习Jquery Mobile中的简单Jquery Mobile
《jQuery Mobile权威指南》由资深专家根据jQuery Mobile最新版本撰写，是一本全面而系统的jQuery Mobile教程，对jQuery Mobile的所有功能、特性、开发方法和技巧进行了全面而透彻的讲解，是系统学习jQuery Mobile的...
通过本书的学习，读者将会获悉jquery mobile的核心特性，以及如何创建可主题化的设计，还会掌握jquery mobile的api，以及如何使用phonegap来扩展jquery mobile。 《jquery mobile快速入门》适合想要掌握jquery ...
jQuery Mobile实战资料的源码，边学习边看看
Jquery mobile 实例源码，适合初学者学习HTML5开发
通过本书的学习，读者将会获悉jQuery Mobile的核心特性，以及如何创建可主题化的设计，还会掌握jQuery Mobile的API，以及如何使用PhoneGap来扩展jQuery Mobile。 《jQuery Mobile快速入门》适合想要掌握jQuery ...
jquery mobile学习手册，是官方指定学习jquery mobile的比较好的书
本书由资深专家根据jQuery Mobile最新版本撰写，是一本全面而系统的jQueryMobile教程，对jQuery Mobile的所有功能、特性、开发方法和技巧进行了全面而透彻的讲解，是系统学习jQueryMobile的权威参考书。在写作方式上...
通过本书的学习，读者将会获悉jquerymobile的核心特性，以及如何创建可主题化的设计，还会掌握jquerymobile的api，以及如何使用phonegap来扩展jquery mobile。 《jquery mobile快速入门》适合想要掌握jquerymobile...