没有合适的资源?快使用搜索试试~ 我知道了~
jquery-mobile教程--很好很强大哦
3星 · 超过75%的资源 需积分: 9 17 下载量 168 浏览量
2013-04-23
09:23:38
上传
评论
收藏 240KB DOCX 举报
温馨提示
试读
18页
jquery-mobile简明教程,让你一下子掌握jquery-mobile
资源推荐
资源详情
资源评论
jQuery Mobile 入门教程
原作:Getting started with jQuery Mobile —— Matthew David
翻译:lod
译文:http://blog.lod.net/jquerymobile-2/295.html
转载声明:请注明原作、翻译以及译文链接。
你每天都会对着它讲话,和它玩游戏,用它看新闻——没错,它就是你裤兜里的智能手机。
android,黑莓还是 iphone?为了让你清楚意识到究竟哪些才算是智能手机,我在下面总
结了一个智能手机系统/设备的列表:
Apple iPhone/iPod Touch
Google Android
RIM BlackBerry/Playbook OS
Nokia Symbian
HP/Palm WebOS
Microsoft Window Phone 7
没错,这令人眼花缭乱的众多智能手机系统对 HTML 标准支离破碎的支持,直接导致了处
理这些系统浏览器的兼容性成为了你最大的挑战。举例来说,苹果的 iphone 对 HTML5
标准有着很好的支持,然而 Symbian 和 Microsoft Phone 系列却几乎不支持 HTML5 的
任何特性(译注:准确的说,是 windows mobile 系列,目前的 windows phone 7 对
HTML5 支持很好)。jQuery 社区为了在解决兼容性和高效创建移动 web 站点做了大量
努力,并开发了 jQueryMobile 这个移动框架。而本文旨在为读者介绍仍在 alpha 版本阶
段的 jQueryMobile 框架(译注:目前 jQueryMobile 已经为 beta2 版本)的开发基础知
识和技巧。
用 jQueryMobile 来开发网站
Gartner study(link)的数据表明在未来将会有越来越多的用户通过手机或者平板电脑访问
你的网站,到 2013 年,将会有 18 亿的移动设备用户,对你的 web 设计团队来说开发移
动站点已经不能再仅仅是“计划”而已了,你必须将你的移动站点迅速变为“现实”才行。
在美国,IOS 和 Android 设备占了很大比重,而美国以外的地方主要是 Nokia 的设备占统
治地位。jQueryMobile 为了在尽可能多的设备上运行,承诺将支持绝大部分移动设备/系
统。在早些时候(2010 年 9 月),jQuery 的作者 John Resig 透露了一张
jQueryMobile 对各种设备/系统的支持表格(见下)。对于每个系统来说,
jQueryMobile 将他们的支持情况分为 A(好),B(一般),C(基本)三个等级。
由于移动设备市场的变幻莫测,这张图表也会迅速变化(一个很好的例子就是目前 Nokia
正在与 Microsoft 合作生产基于 Windows Phone 7 的设备——而在 jQueryMobile 中
WP7 的支持等级为 A)。
jQueryMobile 始终贯彻渐进增强的设计观念来满足你的开发需要。jQuerymobile 的核
心能使得基本的 HTML 标签在所有的浏览器中生效,在此基础之上,再对网页的行为和效
果进行增强,这意味着你的网页在等级较高的浏览器中能获得非常优秀的体验,而在较差
的浏览器也能正常的使用。
繁杂的移动浏览器们带来了巨大的挑战。一方面某些浏览器(例如 Android 的原生浏览器,
Safari 移动版等)都基于 WebKit 的一个变种版本(WebKit 是一个 web 渲染引擎,
Google Chrome 桌面版,Apple 的 Safari 都采用了该引擎。WebKit 并不知道当前运行
的网络的好坏,操作系统是什么甚至屏幕滚动到了哪里,为了让 WebKit 知道这些情况,
操作系统/浏览器/设备厂商都需要基于 WebKit 来构建自己的浏览器程序),并带有丰富
的特性。另一方面 Nokia 的 Symbian 和 Windows Mobile 6(及更早的版本)这些胡乱
支持标准的设备又占有相当大的市场。雪上加霜的是,WebKit 在不同移动设备中还有不
同的版本。所以渐进增强的基本目标就是你的内容能够在任何的设备中都能够正常“显示”。
jQueryMobile 使用入门:
使用 jQueryMobile 的第一步,先创建一个 html 页面,并在 head 标签中加入以下内容:
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-
1.0a4.1.min.js"></script>
正如你在代码中看到的,jQueryMobile 是 jQuery 的一个扩展。目前来说,压缩后的
jQuerymobile 仅 12Kb。
上面的代码均来自 jQuery 的 CDN 服务器,css 文件中也包含必需的图片链接,如果你需
要在你自己的服务器上运行,可以下载下面的文件解压缩后部署到你的服务器上:
Zip File: jquery.mobile-1.0b2.zip
在创建第一个 jQueryMobile 页面时你需要创建三块基本内容,下面的推荐模版展示了这
一过程,你可以在未来的项目中使用它:
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-
scale=1">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-
1.0a4.1.min.js"></script>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1></div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p></div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4></div><!-- /header --></div><!-- /page -->
在模版中有些地方值得我们注意。首先是 DIV 元素的使用,我们知道,既然 HTML5 在移
动设备中如此流行,为什么不使用更加新的 HEADER, ARTICLE, SECTION, FOOTER 元
素呢?这是因为较老的智能手机浏览器无法明白新的 HTML5 元素。在某些情况下,例如
windows phone 上老版本的 IE 会出现一个 bug 使得无法加载页面的 css。而 DIV 元素却
被广泛支持。
此时你已经可以保存你的网页并在浏览器中查看了,这些代码同样可以在桌面浏览器中正
常工作。我推荐你使用 Chrome 来进行本地测试。要在真实环境测试,你就需要相应移动
设备了。
使用超链接
普通网页和移动网页的一个巨大的不同便是屏幕中呈现内容的数量多寡上。虽然你可以在
你的 iPhone 上加载纽约时报的主页,但你需要缩放它才能顺利阅读上面的内容。这样的
体验并不好,而更好的解决方案是减少那些杂乱的内容,只在屏幕上显示你需要显示的内
容。
如果是传统的网站,你可能会创建一些包含少量内容的子页面,而当你使用
jQueryMobile 时,你最好在页面中包含“微量”的内容,这样才会更有效率。
剩余17页未读,继续阅读
资源评论
- psl19802016-02-22入门级教程
- 我的废柴2014-04-20入门级教程
- e_ant2014-02-17入门级教程
jxchenyuehui
- 粉丝: 0
- 资源: 1
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 基于Pytorch复现Point-Transformer,用于ShapeNet数据集点云分割
- 【医学影像分析】2D超声图像的分割检测(Ultrasound Nerve Segmentation - Kaggle数据集)
- 嘎嘎香的五款神仙谷歌插件
- .arch书源导入教程.mp4
- 贪心算法介绍及代码示例讲解
- CR13SP35MSI64 Crystal 水晶报表运行组件最后版本64位
- 图像分类数据集:玉米叶是否感染分类数据集(2分类,包含训练集、验证集)
- 小U商城.zip
- 高光谱图像计算机视觉分类图像预处理工具集,包含去除图片无关背景,数据增强,生成标签文件等功能
- (顶刊复现)基于配电网韧性提升的应急移动电源预配置和动态调度(下)-MPS动态调度
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功