jQuery Mobile开发HTML5移动应用

标签: HTML5学习资源 | 发表时间:2011-12-13 09:43 | 作者:xielisha
出处:http://www.mhtml5.com

随着移动互联世界的到来,目前已发展到多种移动 操作系统割据的局面,而开发者则急需要能运用原有的开发知识和技能,快速方便地构建移动应用程序,并期望能运行在不同的 手机操作平台上,比如Android,iOS,黑莓等。

而目前,出现了一批十分优秀的支持HTML5/CSS3的移动应用开发框架,其中最为大家熟悉的是jQuery Mobile框架(http:// jquerymobile.com),它可以让熟悉jQuery框架的开发者快速开发出基于HTML5的移动应用,而且直接通过 手机的浏览器即可浏览。除此以外,jQuery Mobile也有很好的扩展性,用户可以很好地对其进行定制修改,本文将指导读者对jQuery Mobile的提供的主题样式进行自定义,从而创建符合用户需要的样式。

本文假设读者已具备初步的jQuery Mobile相关知识,如果读者不大了解jQuery Mobile,可以通过如下几篇文章进行学习,文章链接地址为:

统一接口工具JQuery Mobile简介

http://tech.it168.com/a2010/1210/1136/000001136835.shtml

使用JQuery Mobile实现手机新闻浏览器

http://tech.it168.com/a2011/0321/1168/000001168231.shtml

JQuery Mobile实现手机新闻浏览器(2)

http://tech.it168.com/a2011/0323/1169/000001169682.shtml

使用jQuery Mobile实现新闻浏览器(3)

http://tech.it168.com/a2011/0324/1170/000001170077.shtml

jQuery Mobile中的主题

在jQuery Mobile中,有一个建议的页面模版结构,其中包含了比如页面头部,页面主体和页脚等部分。jQuery Mobile使用HTML5中的data-role属性进行定义,下面的代码中就显示了一个主体页面的框架:

<div data-role=”page”> 

<div data-role=”header”>
<h1>Page Title</h1>
</div>

<div data-role=”content”>
<p>Page content goes here.</p>
</div>

<div data-role=”footer”>
<h4>Page Footer</h4>
</div>

</div>

而另外一个建议使用的元素是 标签,这个 标签的作用是指定浏览器以何种方式在手机上显示网页,代码如下:

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

<meta viewport>标签对于在移动设备上正确显示移动网页是十分重要的,如果不使用该标签,则页面内容在显示时可能会失真或者变形,或者是根本不能适合移动设备浏览。在下图中,显示了一个使用标签的页面,可以看到,页面内容的显示能适合移动设备的大小。

 

jQuery Mobile框架中,包含了一个页面主题的框架,它提供了对页面样式的相关控制功能。通过使用HTML5的data-theme属性标签,能轻易为某一个 页面元素应用已有的jQuery Mobile的样式。默认的主题样式有5种,使用英文字母去区分,比如A-E开头的都内置的样式,开发者可以通过下载jQuery Mobile的代码中去学习了解这样样式文件是如何编写的。假如开发者要编写新的样式,可以使用F-Z字母中的任意一个去命名新建立的样式,然后就可以编 写相关的代码。

 

(转自: IT168

相关 [jquery mobile 开发] 推荐:

jQuery Mobile开发HTML5移动应用

- - HTML5研究小组
随着移动互联世界的到来,目前已发展到多种移动 操作系统割据的局面,而开发者则急需要能运用原有的开发知识和技能,快速方便地构建移动应用程序,并期望能运行在不同的 手机操作平台上,比如Android,iOS,黑莓等. 而目前,出现了一批十分优秀的支持HTML5/CSS3的移动应用开发框架,其中最为大家熟悉的是jQuery Mobile框架(http:// jquerymobile.com),它可以让熟悉jQuery框架的开发者快速开发出基于HTML5的移动应用,而且直接通过 手机的浏览器即可浏览.

jQuery Mobile 1.3.0发布

- - InfoQ cn
jQuery基金会发布了旗下的JavaScript和HTML5/CSS框架 jQuery Mobile 1.3.0. 更新主要集中在响应式的web设计并新增了多个移动应用的widget. 响应式web设计(RWD)旨在提供最佳的用户浏览体验,不管使用的是什么设备、什么浏览器. RWD使用CSS媒体查询(media queries)语言在浏览器中动态适配页面布局,而不是在服务端检测用户代理(User Agent).

2小时学会jquery mobile开发移动网站

- - 鲁塔弗的博客
jQuery Mobile: http://jquerymobile.com,一个基于jquery的html 5移动网站框架,用它做出来的网站界面和App风格类似. 方案选型过程见 http://lutaf.com/145.htm. 优点1:开发特别简单,不需要美术资源,甚至不需要太多css/html编程经验,甚至不需要js编程技能,普通程序员就能很快学会制作出 美观大方的 mobile site.

关注:jQuery Mobile来了!

- sheng - 膘叔
  为了让移动设备也能用上jQuery,jQuery开发团队发布了jQuery移动设备版开发项目jQuery Mobile Project(http://jquerymobile.com). jQuery Mobile不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架.

easy Html5 - Jquery Mobile之ToolBars(Header and Footer)

- - 博客园_首页
jquery 在web js框架上的风暴还在继续却也随着移动终端走向了mobile;那么jquery mobile到底包括些什么呢. 页面Header是一个data-role为header的div,当然我们可以在这个div里定义其他任何内容,比如常用的后退按钮等;. 一般在header里添加的button不要太多,添加在header里的按钮带有自动定位功能;.

最新jQuery Mobile 1.2版本新特性

- - 前端观察
大家还记得在jQuery 1.0 RC版本发布的时候我们曾经发布过一个 jQuery Mobile RC版本介绍文章介绍主要的特性. 就在前不久,jQuery Mobile团队又发布了jQuery Mobile 1.2. 新版本中带来了一些非常不错的特性. 在今天的这篇文章中我们将继续介绍1.2版本的一些新的widget,及其一些针对老版本widget的功能加强.

10款不错的 jQuery Mobile 插件推荐

- caoxg - ITeye资讯频道
jQuery 是一个非常流行的JavaScript库,你可以在web项目中使用这个库,通过短短的几行代码就可以创建漂亮的效果. 下面列出了10款非常不错的jQuery 移动插件,可以让开发人员在移动开发中更加便捷和得心应手.                                                                .

微软把Metro主题引入到了jQuery Mobile和 Windows Phone

- - Web App Trend
获得微软开放公司的许可后网站和移动app就可以使用Metro样. 微软开放技术公司已经使Metro样式主题可以在开源移动UI框架jQuery Mobile上使用,这样,Windows Phone 7.5 操作系统上的应用就可以采用Metro界面风格. Metro本来是为Windows 8 操作系统而设计的平板电脑界面风格,但它同时也可用于Windows Phone.

jquery mobile搭配REST是不错的选择

- - ITeye博客
现在,jquery mobile由于可以使用HTML5去 编写移动网页,因此如果是普通的网站,. 想搞个移动版本之类的话,可以尝试用jquery mobile,比如有些功能,需要返回给. 移动端的话,可以使用后端REST的风格,以JSON形式返回给前端,然后jquery mobile. 有利用ajax发起向后端拿到REST返回的结果,在前端解析,效果是不错的.

jQuery Tools:Web开发必备的 jQuery UI 库

- - 博客园_首页
jQuery Tools 是基于. jQuery 开发的网站界面库,包含网站最常用的Tabs(选项卡)、Tooltip(信息提示)、Overlay(遮罩、弹窗)、Scrollable(滚动控制)、Form Validator(表单验证)、Rangeinput(范围选择)、Dateinput(日期选择)等众多功能.