jQuery Mobile,一个新的手机终端脚本开发库,从名字可以看出,它是基于jQuery;目前支持很多种手机设备,包括IOS/Android/BlackBerry/Windows Phone等,当然,支持程度不一,具体可以看:http://jquerymobile.com/gbs/ 由于这项目比较新,在我写这文章的时候,目前还是1.0 ALPHA4.1 RELEASED版,官网提供下载的只有jQuery Mobile的JS和CSS,相关文档目前还没有提供下载,只能通过在线看Demo和说明。 一般用jQuery Mobile开发手机版Web页面,需要包括下面三个文件jQuery/jQuery Mobile JS/jQuery Mobile CSS(版本可以根据情况自己决定),如:
- Page Title<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">
- lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script><script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
今天介绍下它的Page:
1. Page基本结构
在一个手机页面中,一般包括三个部分(header/content/footer),它们都是Page的子元素,如下面就是一个Page的基本内容:
- <div>
- <div>...</div>
- <div>...</div>
- <div>...</div>
- </div>
页面间的跳转和切换,一般都是Page对象的切换,你可以在一个HTML页面中包含多个Page对象,切换通过指定相应的Page ID就可以,如下面页面内容,默认显示第一个Page对象foo,在foo的Page Content中有个 bar链接,表示切换到bar Page,这样达到页面切换的效果,其实通过浏览器看其生成的内容可以知道,这都是通过CSS来达到效果的,最底层当然是display block/none什么的,只不过jQuery Mobile封装了很多CSS:
- <!-- Start of first page -->
- <div>
- <div>
- <h1>Foo</h1>
- </div><!-- /header -->
- <div>
- <p>I'm first in the source order so I'm shown as the page.</p>
- <p>View internal page called <a href="#bar">bar</a></p>
- </div><!-- /content -->
- <div>
- <h4>Page Footer</h4>
- </div><!-- /header -->
- </div><!-- /page -->
- <!-- Start of second page -->
- <div>
- <div>
- <h1>Bar</h1>
- </div><!-- /header -->
- <div>
- <p>I'm first in the source order so I'm shown as the page.</p>
- <p><a href="#foo">Back to foo</a></p>
- </div><!-- /content -->
- <div>
- <h4>Page Footer</h4>
- </div><!-- /header -->
- </div><!-- /page -->
默认在Page切换的时候,切换后的页面左上角默认包括一个Back的按钮回到上一个页面,页面URL中也体现出来,如../index.html#foo,表示index.html切换到id为foo的Page,或者index.html#docs-pages.html,表示从index.html切换到docs-pages.html,其实不管页面内链接还是页面间切换,jQuery Mobile都是发起Ajax请求加载新的页面。如果想链接到一个新界面,而且URL中不想有以前路径#新页面,可以通过在加入链接属性rel="external"或data-ajax="false",这就告诉jQuery Mobile需要重新加载一个新的页面,而且URL也是全新的。
2. Page切换效果
默认Page间切换的效果是从右向左切换,可以在中指定data-transition属性,指定页面切换的效果,jQuery Mobile目前支持slide/slideup/slidedown/pop/fade/flip等切换效果。 jQuery Mobile官网:http://jquerymobile.com/
转自:http://javafansmagic.iteye.com/blog/1097511
相关推荐
用jquerymobile开发时,两个页面间跳转往往需要传递参数,此文档是代码示例
JqueryMobile常见问题整理 跳转时重复调用pageinit方法的解决办法 页面跳转后样式丢失js失效
1、给新手提供较完整的学习Demo 2、iscroll与ajax跳转的结合使用。 3、IOS Theme与JQM的结合使用。 4、带参数跳转的实现。 5、JQM Swipe的使用。 6、JQM Ajax Slide转屏效果。 7、上拉/下拉刷新效果。
jq-mobile案例 jq-mobile案例 jq-mobile案例 jq-mobile案例 jq-mobile案例
在使用jQuery Mobile进行Web开发中,当页面跳转时(pageA => pageB),在pageB中引用的JS并未成功运行。因为,JQM并为将整个页面加载到当前的dom中,仅将data-role=”page”元素加入当前的dom中。因此,在<head&...
主要是jquery、 mobile的代码,你可以参考,内容是下拉列表框。多选框和单选框,页面跳转等等
本文实例分析了jquery mobile开发常见问题。分享给大家供大家参考,具体如下: jquery mobile功能很强大,有了它,不用在程序中,写方法去判断,是什么手机了,完全可以用js来实现各种智能手机的的兼容性。也是因为...
用ajax跳转的时候,从a.html跳转到b.html后,b.html的css以及js都失效了。 方法: 将当前页面b.html需要用到的css以及js放在<page>div内。 原理: 由于jqm的ajax跳转的时候,只会把b.html中内的内容加载进dom,而外的...
jQuery Mobile中页面跳转,从第一个页面传送参数到第二个页面
jQuery Mobile的是一个很好的移动开发框架,你可能已经知道,虽然它有很多难以解决的问题,但是我相信后续版本jquery会修复……我是很喜欢jquery的。这并不是说它很完美无暇,很多开发人员遇到的情况也都难解决,...
jQuery.mobile.changePage( to [, options ] ) 从一个页面跳转到另一个页面,使用$.mobile对象的changePage方法来实现。但要使用此方式的时候,要以点击一个链接或者提交表单来实现。此方法有两个参数。 to:是第一...
该APP前端采用了JQuery Mobile组件.使用它可以跨不同的移动设备,如Apple iOS,Android等.其次JQuery Mobile通过HTML5的标记与CSS规范来配置与美化页面,对已经学习过这些课程的我们来说,架构清晰,又易于学习. 该APP...
使用jQueryMobile时,我遇到了许多问题,例如管理类和大教堂。 有机结合,最初的想法是,如果浏览器端的每个部分页面及其管理类都可以像Android一样活跃,那么灵感就来了,CtMobile的实现完全是Android。 该活动已...
android开发,除了使用原生态的开发方式之外,还可以使用java+html+javascript混合开发的方式来开发,这样可以节省大量的开发时间,同时还可以使不同设备的用户获得相同的用户体验。好了,废话不多说,先来看看今天...
视频分享系统源码 源码描述: 一、源码特点 ...二、菜单功能 模板安装实例: ... 检测手机访问跳转代码,放在之间,自己可灵活使用 (function(){var ua=navigator.userAgent.toLowerCase();var bIsIpad