第16章 使用jQuery Mobile开发Web应用程序

第16章使用jQueryMobile开发Web应用程序什么是jQuery?jQuery是一个实现快速开发、简介轻量级的JavaScript库。通过它可以用最精简、少量的程序代码来轻松实现跨浏览器HTMLDOM操作、事件处理、设计页面元素动态效果、Ajax交互等功能。为适用于移动设备，专门设计了一套UI组件，即为jQueryMobile。16.1使用jQueryjQuery核心库，下载即一个*.js文件，可以在网页中引用该文件，如：*.js有两个版本：两个功能相同，前一个是精简过的文件，较小。scripttype=“text/javascript”src=“jquery-1.6.1.min.js”/scriptjquery-1.6.1.min.jsjquery-1.6.1.js16.1使用jQueryGoogle服务器和微软的AjaxCDN服务器上都有jQuery库的副本，可以直接引用。scripttype=“text/javascript”src=“”/scriptscripttype=“text/javascript”src=“”/scriptheadtitlejQuerySample/titlescripttype=text/javascriptsrc=jquery-1.4.2.min.js/script/headbodyscripttype=text/javascript$(document).ready(function(){alert('HTMLDOM已经准备完毕，现在可以操作了！');});/script/body16.1.1第一个jQuery范例16.1.2基本语法$(document)是一个jQuery选择器，用来选择一个HTML元素，这里选择的HTML文档。$号是jQuery的一个别称：$()就可以调用函数返回一个新的jQuery对象，然后用它调用函数ready()。window.jQuery=window.$=jQuery16.1.2基本语法scripttype=text/javascriptsrc=jquery-1.4.2.min.js/script/headbodyahref=“#”链接1/aahref=“#”链接2/ascripttype=text/javascript$(document).ready(function(){$(“a”).click(function(){alert(‘点击了一个链接');});});/script/body16.1.3为什么要使用jQuery减少代码编写量。16.1.4解决jQuery冲突在网页中除了jQuery库，还可以使用其他JS库和JS代码，也可以定义$，因此可能发生冲突，jQuery库定义了静态函数noConflict()来解决这个问题。jQuery.noConflict([removeAll])16.1.4解决jQuery冲突$.noConflict();//删除变量$alert($==undefined);//返回truejQuery(document).ready(function(){alert('HTMLDOM已经准备完毕，现在可以操作了！');});varj=$.noConflict();//删除变量$，赋值给另一个变量jj(document).ready(function(){alert('HTMLDOM已经准备完毕，现在可以操作了！');});vardom={};//将所有变量移动到dom对象的属性query中dom.query=$.noConflict(true);//现在使用dom对象的熟悉query即可dom.query(document).ready(function(){alert('HTMLDOM已经准备完毕，现在可以操作了！');});16.2使用jQueryMobilejQueryMobile是基于jQuery核心库的一个UI库。16.2.1第一个jQueryMobile范例16.2.2怎样在“内容页”间导航jQueryMobile中的所有导航都是基于书签的改变，即location.hash属性值的改变。如例子中主菜单的每个超链接都是书签，指向其他三个内容页的id属性。uldata-role=listviewliahref=#page1Pageone/a/liliahref=#page2Pagetwo/a/liliahref=#page3Pagethree/a/li/ul16.2.3使用超链接jQueryMobile支持所有标准的HTML超链接类型，并分为3类分别处理。1.同域下的超链接2.会产生刷新的超链接3.其他类型超链接16.2.4定义页面过渡效果可以为超链接定义data-transition属性，实现页面切换过渡效果。有6个属性值：slide、slideup、slidedown、pop、fade和flip分别实现滑动、向上滑动、向下滑动、弹出、淡出和翻页效果。16.2.5定义样式主题使用data-theme属性可以定义样式主题，通过其可以改变UI外观。该属性元素包括页眉、页脚、页面内容以及其中的控件，也可以为页面定义样式主题，将应用到所有元素中。data-theme属性值为a、b、c、d、e，分别代表5种样式。16.2.6创建对话框通过为a元素定义data-rel=“dialog”属性可以将一个“内容页”作为对话框打开。例如：ahref=#page1data-rel=dialogPageone/a16.2.7固定页眉和页脚为页眉页脚定义data-position=“fixed”属性，当滚动停止时页眉页脚会再度出现。例如内容多高度大的页面，当把导航条定义在页眉页脚时就很有用。16.2.8全屏效果为内容元素定义data-fullscreen=“true”属性实现全屏效果。此属性可以喝data-position=“fixed”属性的页眉页脚元素联合使用。例如：divdata-role=pageid=page“data-theme=“b”data-fullscreen=“true”divdata-role=“header”data-position=“fixed”16.3导航模型——jQueryMobile的核心机制当一个使用jQueryMobile技术的网页被打开后，jQueryMobile一旦检测到网页加载完毕，便开始解析HTMLDOM，获取其中每个“内容页”，并为每个内容页动态赋一个data-url属性来标示该页，以后，jQueryMobile就可以通过这个属性来重新呈现该内容页。网页内可能有一个或多个内容页，默认只有第一个被显示。16.3.1页面导航的基本规则无论内容页是DOM中还是通过Ajax自动加载的，页间切换都会平滑过渡。每个内容页有一个id，通过此值可以使用书签导航。location.hash属性的值就是书签名，也就是内容页的id值。location.hash在内容页加载后维护为一个可访问的URL，任何内容页在jQueryMobile中都被标记为书签或超链接，因此单击超链接location.hash会发生变化。16.3.1页面导航的基本规则1.关于$.mobile.changePage()方法在jQueryMobile内部，内容页的改变都会使用$.mobile.changePage()方法，它会找寻内容页切换逻辑和处理不同情况下的响应。2.关于base元素它定义基准地址，确保页面变化时能够正确引用资源。它会动态更新，并成为href和src的基地址前缀。16.3.1页面导航的基本规则3.页面过渡通过添加和溢出指定了CSS动画的class来实现。如已存在页面添加class=”slideleftout”，将要显示的页面加上class=“slideleftin”，还会在过渡页面中定义class=“ui-page-active”来标记新页面正要显示。动画完成后被移除。4.不使用jQueryMobile导航的情况连接到外部网站，普通的HTTP请求将被用来代替jQueryMobile导航。16.3.2自动生成的内容页和子书签地址一些Widet可以回选择动态折断页面内容为颗导航页面，并通过层次化的链接来访问。例如listview插件。它会折断一个嵌套的ul或ol为单独内容页，每个被赋予data-url属性。divdata-url=“hello.html&subpageidentifier”data-url=“hello.html&ui-page=0-1”16.3.3注意事项（1）当链接至一个目录地址时，必须提供一个反斜杠。（2）在jQueryMobile驱动的页面中，每个内容页元素的资源引用都应该放在内容页元素中。例如样式表和脚本的链接都可以防止div内。任何全局资源应在head中引用或至少在内容页元素外面，防止脚本重复运行。