浏览 8618 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2011-11-17
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图标，添加属性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中调用该方法 $.mobile.changePage(arguments); arguments的详细说明请参照 http://jquerymobile.com/demos/1.0rc1/docs/api/methods.html 请求代码 $.mobile.changePage(‘controllerName/ActionName’) 或者是 $.mobile.changePage({
url: ‘controllerName/ActionName’
})
同时我也自己做了一个在线的效果，希望能够更加形象的告诉大家该怎么样去使用jQuery Mobile. (http://jsfiddle.net/kiddYu619/4KPw6/) …………………………………………………………………分割线…………………………………………………………… 介绍就说道这里，其实还有很多的元素需要介绍，但是这些元素基本和jQuery Mobile官网上面介绍一致，就不做太多重复的工作，希望这个文档能够给大家带来一定的帮助。 Html5活动：http://html5.group.iteye.com/group/topic/28234 我承认我被那本书深深吸引了 
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2011-11-17
正需要。谢谢了
|
| 返回顶楼 | |
|
发表时间：2011-11-21
使用jquery mobile和智能手机系统自带的ui库有什么区别呢？比如在性能方面、和系统移值方面，有兴趣的讨论一下。。。。
|
| 返回顶楼 | |
|
发表时间：2011-11-22
xyang81 写道 使用jquery mobile和智能手机系统自带的ui库有什么区别呢？比如在性能方面、和系统移值方面，有兴趣的讨论一下。。。。
昨天太忙了，忘记回复你了，抱歉啊～～ jquery mobile是做成一个B/S的版本，使用HTTP协议，直接使用支持html5的浏览器就可以访问，手机自带的浏览器大多也可以，不同的手机操作系统只会存在一些样式的区别，功能不会有太多出入。 智能手机系统自带的ui库，这个东西我不是很熟悉，我以我做的android小应用来说吧，自带的UI库是需要根据不同的手机操作系统来定制的，做出来的程序是一个C/S的结构，需要用户安装之后才可以使用。 暂时就说这么多了，如果有什么问题，欢迎大家讨论，如果有使用jquery mobile遇见问题的可以私信，虽然我不是非常精通，但是大部分问题还是可以解决的。 |
| 返回顶楼 | |
|
发表时间：2011-11-24
好东西。
|
| 返回顶楼 | |
|
发表时间：2011-12-27
很好。。总结的不错。
|
| 返回顶楼 | |
