【HTML5活动】jQuery Mobile框架使用简易指南
jQuery Mobile框架使用简易指南
jQuery Mobile 简介
jQuery Mobile 是针对智能手机和平板电脑开发的，并且对触摸事件进行优化的浏览器页面框架。
jQuery Mobile具有统一的UI，其UI系统覆盖了所有主流的移动终端平台，它建立在jQuery和jQuery UI坚实的基础上。它的轻量级的代码被很好的增强改进，能够进行灵活的、简单的设计开发。(原文：http://jquerymobile.com/ )
jQuery Mobile 使用
(ps:因为图片是自己手动截图的，不知道怎么添加到里面，所以如果大家要看有图版本请直接下载附件
)
1、引入jQuery Mobile
jQuery Mobile 页面必须声明DOCTYPE为HTML5，然后将相关的js包（本次采用的版本为1.0b3）和css引入页面的head中，引入之后如下：
2、组织页面结构
当完成上述工作后，终于可以开始设计自己的jQuery Mobile页面了。首先找到页面中的body，然后开始加入最基本的页面结构:
5、组织页面content
页面的content其实就是显示在用户面前的东西，在里面需要显示什么，就在里面放入什么元素。这是页面最重要的一个部分，但其实也是不好举例的一个部分，因为这里放的是HTML5的各种元素和jQuery Mobile的样式组合，所以要做好这个部分就只有多看jQuery Mobile的Demo &Document。
jQuery Mobile控件简介
1、控件Button
jQuery Mobile Framework会自为将button标签或者input标签中type为a、submit、reset、button、image自动添加button的style。当你想为一个html标签也添加button样式是，则需要自己手动在标签内部添加属性data-role=”button”。
例如，需要将一个div标签做成一个button的样式
<div data-role=”button” data-theme=”a”>I’m button</div>
顺便列出一些button中的其他属性：
a、指定button的icon图标，添加属性data-icon=”{icon_name}”，常见的icon_name如下，icon_name:{delete, plus, minus, check, refresh, gear, back, grid, star, alert, info, home, search, arrow-r, arrow-l, arrow-u, arrow-d}
例如，为button添加一个指向右边的箭头，
<div data-role=”button” data-theme=”a” data-icon=”arrow-r”>I’m button</div>
b、指定button的icon位置，添加属性data-iconpos=”{position}”，position:{left, right, top, bottom, notext}
例如，需要将上面的箭头放在按钮的右边，
<div data-role=”button” data-theme=”a” data-icon=”arrow-r” data-iconpos=”right”>I’m button</div>
c、指定button的theme，添加属性data-theme=”{theme_name}”，jQuery Mobile自带的theme有{a, b, c, d, e}，需要什么样的theme则依照上述例子，为元素添加data-theme属性。
2、控件Collapsible
Collapsible是一个具有展开和关闭功能的空间，可以在里面放入各种各样的html元素。在页面中加入一个Collapsible是非常简单的，只需要在页面中加入如下代码，
<div data-role="collapsible">
<h3>I'm a header</h3>
<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
</div>
默认情况下，Collapsible是关闭着的，如果想要让它在初始化是就是展开状态，则需要手动为控件添加属性：data-collapsed=”false”。代码如下
<div data-role="collapsible" data-collapsed=”false”>……</div>
注意，包含在这个标签内部的<h3>…..</h3>表示 collapsible显示的标题，可以换成h1,h2,h…..，但是必须是一个h{x}标签。
jQuery Mobile 方法changePage简介
jQuery Mobile Framework提供了一个非常重要的用来实现页面跳转的方法：changePage。这个方法可以用来实现一个request。例如在MVC框架中，需要请求controller中的一个action则可以在javascript中调用该方法
不用修改，直接引用这个地址即可。
感谢啊。 顶!html5越来越火了..
