欢迎来到做网站吧,请先 登录注册

教程观看记录

资源投稿 | 网站地图 | 联系我们 | 收藏本站 |

做网站吧 > HTML5 > jquery Mobile >
收 藏
2600

jQuery Mobile教程:[1]入门教程

所属栏目:jquery Mobile 来源:未知 内容发布:做网站吧


1.jQuery Mobile简介



jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说:能开发这个项目,我们非常兴奋。移动Web太需要一个跨浏览器的框架,让开发人员开发出真正的移动Web网站。

今天,jQuery 驱动着 Internet 上的大量网站,在浏览器中提供动态用户体验,促使传统桌面应用程序越来越少。现在,主流移动平台上的浏览器功能都赶上了桌面浏览器,因此 jQuery 团队引入了 jQuery Mobile(或 JQM)。JQM 的使命是向所有主流移动浏览器提供一种统一体验,使整个 Internet 上的内容更加丰富 — 不管使用哪种查看设备。

JQM 的目标是在一个统一的 UI 中交付超级 JavaScript 功能,跨最流行的智能手机和平板电脑设备工作。与 jQuery 一样,JQM 是一个在 Internet 上直接托管、免费可用的开源代码基础。事实上,当 JQM 致力于统一和优化这个代码基时,jQuery 核心库受到了极大关注。这种关注充分说明,移动浏览器技术在极短的时间内取得了多么大的发展。

与 jQuery 核心库一样,您的开发计算机上不需要安装任何东西;只需将各种 *.js 和 *.css 文件直接包含到您的 web 页面中即可。这样,JQM 的功能就好像被放到了您的指尖,供您随时使用。

2.jQuery Mobile 页面结构



代码说明

要使用 jQuery Mobile,首先需要在开发的界面中包含如下3个内容:

CSS文件jquery.mobile-1.0a3.min.css

jQuery类库文件 jquery-1.5.min.js

jQuery Mobile文件 jquery.mobile-1.0a3.min.js

在上面的页面基本模板中,引入这三个元素采用的是jQuery CDN方式,开发人员也可以下载这些文件及主题到你的服务器上。

我们可以看到页面中的内容都是包装在div标签中并在标签中加入data-role=”page”属性。 这样jQuery Mobile就会知道哪些内容需要处理。

说明:data-属性是HTML5新推出的很有趣的一个特性,它可以让开发人员添加任意属性到html标签中,只要添加的属性名有“data-”前缀。

在”page”div中,还可以包含”header”, ”content”, ”footer”的div元素,这些元素都是可选的,但至少要包含一个 “content”div。

使用jQuery Mobile的第一步,先创建一个html页面,并在head标签中加入以下内容:



正如你在代码中看到的,jQuery Mobile是jQuery的一个扩展。目前来说,压缩后的jQuery Mobile 仅12Kb。

在创建第一个jQuery Mobile页面时你需要创建三块基本内容,下面的推荐模版展示了这一过程,你可以在未来的项目中使用它:

在 head 标签内填写:



在body标签内填写:





在模版中有些地方值得我们注意。首先是DIV元素的使用,我们知道,既然HTML5在移动设备中如此流行,为什么不使用HTML5的 header, article, section, footer 标签元素呢?这是因为较老的智能手机浏览器无法明白新的HTML5元素。在某些情况下,例如windows phone上老版本的IE会出现一个bug使得无法加载页面的css。而DIV元素却被广泛支持。

此时你已经可以保存你的网页并在浏览器中查看了,这些代码同样可以在桌面浏览器中正常工作。我推荐你使用Chrome来进行本地测试。要在真实环境测试,你就需要相应移动设备了。

文章关键词:

相关推荐
网友评论
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
上一篇:HTML5 前端框架 jQuery Mobile 使用教程
下一篇:jQuery Mobile教程:[2]超链接

返回顶部