2022年2022年开发者必读jQueryMobile入门教程 .pdf
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_05.gif)
《2022年2022年开发者必读jQueryMobile入门教程 .pdf》由会员分享,可在线阅读,更多相关《2022年2022年开发者必读jQueryMobile入门教程 .pdf(16页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、 开发者必读 jQuery Mobile入门教程你每天都会对着它讲话,和它玩游戏,用它看新闻没错,它就是你裤兜里的智能手机 。android,黑莓还是 iphone? 为了让你清楚意识到究竟哪些才算是智能手机 , 我在下面总结了一个智能手机系统/设备的列表: Apple iPhone/iPod Touch Google Android RIM BlackBerry/Playbook OS Nokia Symbian (我承认它该退休了,可是在世界范围内它仍然拥有 10 亿以上的用户 ) HP/Palm WebOS Microsoft Window Phone 7没错,这令人眼花缭乱的众多智能手
2、机系统对HTML 标准支离破碎的支持,直接导致了处理这些系统浏览器的兼容性成为了你最大的挑战。举例来说,苹果的iphone对 HTML5标准有着很好的支持,然而Symbian和 Microsoft Phone系列却几乎不支持HTML5的任何特性 (译注:准确的说,是windows mobile系列,目前的windows phone 7对 HTML5 支持很好 )。jQuery社区为了在解决兼容性和高效创建移动 web 站点做了大量努力, 并开发了 jQueryMobile这个移动框架。 而本文旨在为读者介绍仍在alpha版本阶段的jQueryMobile框架 (译注:目前 jQueryMobi
3、le已经为 beta2 版本 )的开发基础知识和技巧。用 jQueryMobile来开发网站Gartner study(link)的数据表明在未来将会有越来越多的用户通过手机或者平板电脑访问你的网站,到 2013 年,将会有 18 亿的移动设备用户, 对你的 web 设计团队来说开发移动站点已经不能再仅仅是“计划”而已了,你必须将你的移动站点迅速变为“现实”才行。在美国, IOS 和 Android设备占了很大比重,而美国以外的地方主要是Nokia的设备占统治地位。jQueryMobile为了在尽可能多的设备上运行,承诺将支持绝大部分移动设备/系统。在早些时候(2010 年9 月),jQuer
4、y的作者 John Resig透露了一张jQueryMobile对各种设备 /系统的支持表格(见下 )。对于每个系统来说, jQueryMobile将他们的支持情况分为A(好),B(一般 ),C(基本 )三个等级。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页,共 16 页 - - - - - - - - - 由于移动设备市场的变幻莫测,这张图表也会迅速变化(一个很好的例子就是目前Nokia正在与Microsoft合作生产基于Windows Phone 7的设备而在jQuer
5、yMobile中 WP7 的支持等级为A) 。jQueryMobile始终贯彻渐进增强的设计观念来满足你的开发需要。jQuerymobile的核心能使得基本的 HTML 标签 在所有的浏览器中生效,在此基础之上,再对网页的行为和效果进行增强,这意味着你的网页在等级较高的浏览器中能获得非常优秀的体验,而在较差的浏览器也能正常的使用。繁杂的移动浏览器们带来了巨大的挑战。一方面某些浏览器(例如 Android的原生浏览器, Safari 移动版等 )都基于 WebKit的一个变种版本 (WebKit是一个 web 渲染引擎, Google Chrome桌面版, Apple的 Safari 都采用了该
6、引擎。WebKit并不知道当前运行的网络的好坏,操作系统 是什么甚至屏幕滚动到了哪里,为了让WebKit知道这些情况, 操作系统 /浏览器 /设备厂商都需要基于WebKit来构建自己的浏览器程序 ),并带有丰富的特性。另一方面Nokia的 Symbian和 Windows Mobile 6(及更早的版本 )这些胡乱支持标准的设备又占有相当大的市场。雪上加霜的是,WebKit在不同移动设备中还有不同的版本。所以渐进增强的基本目标就是你的内容能够在任何的设备中都能够正常“显示”。jQueryMobile使用入门:使用 jQueryMobile的第一步,先创建一个html页面,并在head 标签 中
7、加入以下内容:名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页,共 16 页 - - - - - - - - - 正如你在代码中看到的,jQueryMobile是 jQuery的一个扩展。目前来说,压缩后的jQuerymobile仅 12Kb 。上面的代码均来自jQuery的 CDN 服务器 ,css 文件中也包含必需的图片链接,如果你需要在你自己的服务器 上运行,可以下载下面的文件解压缩后部署到你的服务器上:Zip File: jquery.mobile-1.0b2.zip
8、在创建第一个jQueryMobile页面时你需要创建三块基本内容,下面的推荐模版展示了这一过程,你可以在未来的项目中使用它: Page Title Page content goes here. Page Footer 在模版中有些地方值得我们注意。首先是DIV 元素的使用,我们知道,既然HTML5 在移动设备中如此流行,为什么不使用更加新的HEADER, ARTICLE, SECTION, FOOTER元素呢 ?这是因为较老的智能手机浏览器无法明白新的HTML5元素。在某些情况下,例如windows phone上老版本的IE 会出现一个bug 使得无法加载页面的css。而 DIV 元素却被广
9、泛支持。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页,共 16 页 - - - - - - - - - 此时你已经可以保存你的网页并在浏览器中查看了,这些代码同样可以在桌面浏览器中正常工作。我推荐你使用Chrome来进行本地测试。要在真实环境测试,你就需要相应移动设备了。教你使用超链接普通网页和移动网页的一个巨大的不同便是屏幕中呈现内容的数量多寡上。虽然你可以在你的iPhone上加载纽约时报的主页,但你需要缩放它才能顺利阅读上面的内容。这样的体验并不好,而更好的解决方案是减
10、少那些杂乱的内容,只在屏幕上显示你需要显示的内容。如果是传统的网站,你可能会创建一些包含少量内容的子页面,而当你使用jQueryMobile时,你最好在页面中包含“微量”的内容,这样才会更有效率。在上面例子中你已经看到了如何利用模版来创建一个页面。现在让我们更进一步,来创建内容的“ page ”。jQueryMobile中的一个“page ”结构一般使用一个DIV 来组织。现在你可以使用上面的模板来创建一个包含四个跳转到其他页面的链接的导航页面: Menu What vehicles doyou like? Cars Trains Planes 名师资料总结 - - -精品资料欢迎下载 - -
11、 - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页,共 16 页 - - - - - - - - - Page Footer 上面这段代码中第一个div 非常重要,它包含有一个id 和一个 data-role属性:data-role=page id=menu data-role定义了这个div 是一个“page ”,page 这个术语稍微有点让人误解,“page ”这里其实指的是一个可视面或者在屏幕里未隐藏的HTML 代码部分,而不是指的一个单独的页面(或者说单独的HTML 文件 )。data-role=page 意味着 jQ
12、ueryMobile会根据 div 元素在屏幕中构建可视内容。而id属性允许你通过a 标签链接到该page ,或者其他 page 。上面创建的导航页是我们在浏览器看到的第一个页面,接下来我们再添加三个“page ”,他们有不同的 id:Cars , Planes ,Trains 。 Cars We can add a list of cars Page Footer 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页,共 16 页 - - - - - - - - - Trains
13、 We can add a list of trains Page Footer Planes We can add a list of planes Page Footer 现在,在你的Android或者 IOS 设备里测试一下,当你加载好页面后你会发现这三件事情: 导航页出现在屏幕中(你可以上下滚动一下,并没有别的东西出现) 当你点击一个链接时,会动画切换到另一个页面。 新页面的顶部会自动出现一个“back ”按钮(译注: jQueryMobile目前版本默认已经取消了这一功能) 其实这些 div 元素预先会加载并缓存到你的浏览器中,因此“页面”间的切换会非常流畅。在同一个 HTML页面创
14、建多个在屏幕上显示的“页面”使得你可以大大减少页面加载的次数,但同时也会导致许多移动设备运行缓慢。jQueryMobile将页面所有的链接跳转都视作Ajax 调用,这样可以充分利用 CSS 的过渡效果,当你想要链接到你自己的web 程序之外的某些链接时,你可以这样编写你的链接代码:madinc.co 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页,共 16 页 - - - - - - - - - 如上所示,仅需要为a 标签添加rel=external属性即可。然而jQuery
15、Mobile对于 (同域的 )外部链接并不是简单地跳转完事儿,相比于其他移动框架它更进了一步,因为他对(同域的 )所有链接都采用Ajax调用方式,从而实现漂亮的转场效果。基于此你可以将你的网页内容分离到许多页面来创建更大型的项目。使用组件链接和页面只是移动网页设计中一个很小的部分,APP 程序 (比如采用 Object-C,C#,java 等在Android或者 IOS 设备上创建的本地应用程序)快速增长的同时产生了丰富的控件和组件(例如菜单栏,列表等控件 )使得开发者可以很方便地创建复杂的应用程序,这正是许多移动网页开发者第二个巨大的挑战因为在原生的HTML 里面并没有这些控件或者组件。针对
16、这一问题, jQueryMobile当前正在创建一组非常有用的组件。以下是在alpha版本中已经发布的组件: Pages(页面) Dialog boxes(对话框 ) Toolbars(工具栏) Buttons(按钮) Content formatting(内容格式化) Form elements(表单) List views(列表) 只要你懂的一点点的HTML ,你会发现添加这些组件并不困难,接下来我们看几个例子。为页面添加header和 footer上面的模版已经为你展示了如何轻松地创建工具栏(header ,footer) 。我们知道,在不同尺寸的屏幕上创建自适应工具栏通常都是非常难的活
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 2022年2022年开发者必读jQueryMobile入门教程 2022 开发者 必读 jQueryMobile 入门教程
![提示](https://www.deliwenku.com/images/bang_tan.gif)
限制150内