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

教程观看记录

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

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

HTML5 前端框架 jQuery Mobile 使用教程

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


1. 简介

jQuery Mobile是由(MT)Media Temple联合多家移动设备厂商以及软件企业共同发起的针对触屏智能手机与平板电脑的Web应用的前端开发框架。

jQuery Mobile构建于大名鼎鼎的jQuery 以及 jQuery UI类库之上,为前端开发人员提供了一个兼容所有主流移动设备平台的统一UI接口系统。拥有出色的弹性,轻量化以及渐进增强特性与可访问性。

jQuery Mobile框架遵循"write less, do more"思想来设计,通过该框架,用户可以开发跨平台、跨设备的统一的HTML5应用,无需针对每个设备和操作系统分别开发应用代码。目前jQuery Mobile支持的的系统和设备有:iOS, Android, BlackBerry, Tizen, Bada, Windows Phone, WebOS, Symbian。

2. 下载和使用

jQuery Mobile强调语义标注,非常易于使用。只要会使用基本的HTML,就可以基于jQuery Mobile快速构建Web应用。目前JQuery Mobile最新的稳定版本为V1.2.0, 可以通过jQuery Mobile 官方网站http://jquerymobile.com/ 下载源码。

jQuery Mobile使用非常简单,打开任何你所喜好的文本编辑器,新建一个文件并命名为:test.html, 在该文件开始处添加jQuery Mobile框架代码:

   
   
   
   
   
Add your content here.

保存文件,并在浏览器中打开,即可浏览。

下面我们来实现一个Hello World例子, 标签中的内容用下面代码替换。



   
       
hello
   

   
 
       
Hello world
   
   


在这段代码中,我们首先使用一个data-role来描绘该页面,同时使用hello作为我们的header data-role。在content标签里面,我们填入了

Hello world
。 这些特定的data-role定义的HTML5属性,在JQuery Mobile中用于快速构建增强风格的用户界面。
保存代码并在浏览器中打开,效果如下:




图1 Hello world运行效果



读者可以调整浏览器边框的大小来看看jQuery Mobile构建的header,Content等自动添加了哪些样式。My Title可以根据屏幕大小自动居中,而内容部分Hello World则靠左对齐,不管屏幕分辨率是多少。

下面我们再实现以下稍微复杂一点的界面,将正文部分添加进我们移动开发中常见的列表视图,并在结果添加两个并排的按钮。

同样,将 标签中的内容替换,完整代码如下:

   
   
   
   
   


   
Working Week
   
Monday
   
Tuesday
   
Wednesday
   
Thursday
   
Friday


我们在浏览器中打开,效果如下:




图2 ListView默认效果



下面我们尝试修改显示的主题:

首先在list-divider中添加data-divider-theme="g",data-theme="a" ,更新效果如下:

data-theme="e" data-inset="true" data-inset="true" >



图3 ListView修改主题后效果

文章关键词:

相关推荐
网友评论
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
上一篇:jQuery Mobile 基本页面结构
下一篇:jQuery Mobile教程:[1]入门教程

返回顶部