【HTML5活动】jQuery Mobile框架施用简易指南
日期：2014-05-17 浏览次数：20832 次
【HTML5活动】jQuery Mobile框架使用简易指南
jQuery Mobile 是针对智能手机和平板电脑开发的，并且对触摸事件进行优化的浏览器页面框架。
jQuery Mobile具有统一的UI，其UI系统覆盖了所有主流的移动终端平台，它建立在jQuery和jQuery UI坚实的基础上。它的轻量级的代码被很好的增强改进，能够进行灵活的、简单的设计开发。(原文：http://jquerymobile.com/ )
(ps:因为图片是自己手动截图的，不知道怎么添加到里面，所以如果大家要看有图版本请直接下载附件
)
1、引入jQuery Mobile
jQuery Mobile 页面必须声明DOCTYPE为HTML5，然后将相关的js包（本次采用的版本为1.0b3）和css引入页面的head中，引入之后如下：
2、组织页面结构
当完成上述工作后，终于可以开始设计自己的jQuery Mobile页面了。首先找到页面中的body，然后开始加入最基本的页面结构:
对上面的代码做一个简单的介绍：
a、每一个页面必须以<div data-role=”page”>开头，它表示这里开始是一个新的页面，而且不要在里面内嵌这个元素。（自己试过<div data-role=”dialog”>开头组织页面也可以，但是建议刚开始学习的时候不要乱用，按照最规范的来）
b、page里面有最基本的3个元素，即: header，content，footer。这三个元素分别对应着一个页面的头，内容和页脚。header和footer可以没有，但是content最好保留，因为你的页面元素都要放到里面。
3、组织页面header
页面的header在页面的最顶部，在这里经常放入一些操作按钮和Back按钮，所以组织header其实就是设计如何放置这些按钮。
注意：Back按钮是jQuery Mobile框架为你加到header中的，当然你可以使用data-backbtn=”true/false”或者data-add-back-btn=”true/false”来自己决定是否需要Back按钮。(但是有时候jQuery Mobile不是那么聪明，不能正确的添加，所以可以自己添加这个按钮。)
例如：想要放入一个Back按钮和Save按钮在header中（如下图）
实现代码：
4、组织页面footer
页面的footer一般都作为一个导航栏，从这里可以链接到其他的页面。所以这里经常放一组button，这里引入jQueryMobile中的一个元素：<div data-role="navbar">。这里主要是说明页面元素footer，所以暂时不介绍navbar。
例如，我们想要创建一个如下图的导航栏
实现代码：
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图标，添加属性dat
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中，引入之后如下：
<!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script> </head> <body> ...在body中开始加入各种元素... </body> </html>
2、组织页面结构
当完成上述工作后，终于可以开始设计自己的jQuery Mobile页面了。首先找到页面中的body，然后开始加入最基本的页面结构:
<div data-role=”page”>
<div data-role=”header”></div>
<div data-role=”content”></div>
<div data-role=”footer”></div>
</div>
对上面的代码做一个简单的介绍：
a、每一个页面必须以<div data-role=”page”>开头，它表示这里开始是一个新的页面，而且不要在里面内嵌这个元素。（自己试过<div data-role=”dialog”>开头组织页面也可以，但是建议刚开始学习的时候不要乱用，按照最规范的来）
b、page里面有最基本的3个元素，即: header，content，footer。这三个元素分别对应着一个页面的头，内容和页脚。header和footer可以没有，但是content最好保留，因为你的页面元素都要放到里面。
3、组织页面header
页面的header在页面的最顶部，在这里经常放入一些操作按钮和Back按钮，所以组织header其实就是设计如何放置这些按钮。
注意：Back按钮是jQuery Mobile框架为你加到header中的，当然你可以使用data-backbtn=”true/false”或者data-add-back-btn=”true/false”来自己决定是否需要Back按钮。(但是有时候jQuery Mobile不是那么聪明，不能正确的添加，所以可以自己添加这个按钮。)
例如：想要放入一个Back按钮和Save按钮在header中（如下图）
实现代码：
<div data-role="header" data-backbtn="true"> <a href="#" data-rel="back" data-icon="arrow-l">Back</a> <h1>jQuery Mobile Page Two Header</h1> <a href="#pageOne" data-icon="check" class="ui-btn-right">Save</a> </div>
4、组织页面footer
页面的footer一般都作为一个导航栏，从这里可以链接到其他的页面。所以这里经常放一组button，这里引入jQueryMobile中的一个元素：<div data-role="navbar">。这里主要是说明页面元素footer，所以暂时不介绍navbar。
例如，我们想要创建一个如下图的导航栏
实现代码：
<div data-role="footer"> <div data-role="navbar"> <ul> <li><a data-icon-iconpos="top" data-icon="info" href="#pageOne" class="ui-btn-active">One</a></li> <li><a data-icon-iconpos="top" data-icon="info"href="#pageTwo">Two</a></li> <li><a data-icon-iconpos="top" data-icon="info"href="#">Three</a></li> <li><a data-icon-iconpos="top" data-icon="info"href="#">Four</a></li> </ul> </div> </div>
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图标，添加属性dat
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
