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">
<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的基本内容:
页面间的跳转和切换,一般都是Page对象的切换,你可以在一个HTML页面中包含多个Page对象,切换通过
指定相应的Page ID就可以,如下面页面内容,默认显示第一个Page对象foo,在foo的Page Content中有个
bar链接,表示切换到bar Page,这样达到页面切换的效果,其实通过浏览器看其生成的内容可以知道,这都是通过CSS来达到效果的,最底层当然是display block/none什么的,只不过jQuery Mobile封装了很多CSS:
<!-- Start of first page -->
Foo
<!-- /header -->
I'm first in the source order so I'm shown as the page.
View internal page called bar
<!-- /content -->
Page Footer
<!-- /header -->
<!-- /page -->
<!-- Start of second page -->
Bar
<!-- /header -->
I'm first in the source order so I'm shown as the page.
Back to foo
<!-- /content -->
Page Footer
<!-- /header -->
<!-- /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/
分享到:
相关推荐
Jquery学习笔记 Jquery学习笔记 Jquery学习笔记
jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery ...
“JQuery Mobile学习助手”包含了对JQuery Mobile中的所有组件、接口的详细介绍。对于JQuery Mobile的初学者,可以从中学习JQuery Mobile的所有接口与组件的功能,同时通过范例进行练习;对于JQuery Mobile开发人员...
JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记
jQuery mobile相册的一种样式
JQuery学习笔记.txtJQuery学习笔记.txtJQuery学习笔记.txt
JQuery学习笔记 JQuery学习笔记 JQuery学习笔记 JQuery学习笔记 JQuery学习笔记
1.jQuery Mobile 是一个用于创建移动端web应用的的前端框架。 2.jQuery Mobile 构建于 jQuery 以及 jQuery UI类库之上,如果您了解 jQuery,您可以很容易的学习 jQuery Mobile。 3.jQuery Mobile 使用了极少的 ...
资源名称:jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介:《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从...
jQuery Mobile是jQuery框架的一个组件(而非jquery的移动版本)。jQuery Mobile是一款基于HTML5的用户界面系统,旨在使所有智能手机,平板电脑和桌面设备上都可以访问的响应网站和应用。jQuery Mobile 不仅会给主流...
jquery mobile用来学习的项目,适合新手使用学习
jQuery Mobile 是用于创建移动 Web 应用的前端开发框架。 jQuery Mobile 可以应用于智能手机与平板电脑。 jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页。
锋利的jquery (学习笔记) 学习jquery
jQuery基础教程笔记jQuery基础教程笔记jQuery基础教程笔记jQuery基础教程笔记
jquery 学习笔记jquery 学习笔记jquery 学习笔记jquery 学习笔记
通过本书的学习,读者将会获悉jQuery Mobile的核心特性,以及如何创建可主题化的设计,还会掌握jQuery Mobile的API,以及如何使用PhoneGap来扩展jQuery Mobile。 《jQuery Mobile快速入门》适合想要掌握jQuery ...
jquery的学习总结笔记 对选择器和常用方法进行总结 有实例
通过使用jQuery Mobile 可以 "写更少的代码,做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页,且兼容所有移动设备。 lamp 不同设备使用了不同开发语言,jQuery Mobile可以很好的兼容不同的设备或操作...
Jquery教程学习笔记
JQUERYMOBILE 提示框 用语JQUERYMOBILE 移动开发的提示框