HTML5 前端框架 jQuery Mobile 使用教程
来源:互联网 发布:什么是域名和网址ppt 编辑:程序博客网 时间:2024/05/17 00:14
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框架代码:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jQuery.com/mobile/1.2.0/jQuery.mobile-1.2.0.min.css" />
<script src="http://code.jQuery.com/jQuery-1.8.2.min.js"></script>
<script src="http://code.jQuery.com/mobile/1.2.0/jQuery.mobile-1.2.0.min.js"></script>
</head>
<body>
Add your content here.
</body>
</html>
保存文件,并在浏览器中打开,即可浏览。
下面我们来实现一个Hello World例子,<body> 标签中的内容用下面代码替换。
<body>
<div data-role="page">
<div data-role="header">
<h1>hello</h1>
</div><!-- /header -->
<div data-role="content">
<p>Hello world</p>
</div><!-- /content -->
</div><!-- /page -->
</body>
在这段代码中,我们首先使用一个data-role来描绘该页面,同时使用hello作为我们的header data-role。在content标签里面,我们填入了<p>Hello world</p>。 这些特定的data-role定义的HTML5属性,在JQuery Mobile中用于快速构建增强风格的用户界面。
保存代码并在浏览器中打开,效果如下:
图1 Hello world运行效果
读者可以调整浏览器边框的大小来看看jQuery Mobile构建的header,Content等自动添加了哪些样式。My Title可以根据屏幕大小自动居中,而内容部分Hello World则靠左对齐,不管屏幕分辨率是多少。
下面我们再实现以下稍微复杂一点的界面,将正文部分添加进我们移动开发中常见的列表视图,并在结果添加两个并排的按钮。
同样,将<body> 标签中的内容替换,完整代码如下:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jQuery.com/mobile/1.2.0/jQuery.mobile-1.2.0.min.css" />
<script src="http://code.jQuery.com/jQuery-1.8.2.min.js"></script>
<script src="http://code.jQuery.com/mobile/1.2.0/jQuery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<ul data-role="listview" data-inset="true" >
<li data-role="list-divider" role="heading">Working Week</li>
<li><a href="#">Monday</a></li>
<li><a href="#">Tuesday</a></li>
<li><a href="#">Wednesday</a></li>
<li><a href="#">Thursday</a></li>
<li><a href="#">Friday</a></li>
</ul>
</div><!-- /page -->
</body>
</html>
我们在浏览器中打开,效果如下:
图2 ListView默认效果
下面我们尝试修改显示的主题:
首先在list-divider中添加data-divider-theme="g",data-theme="a" ,更新效果如下:
<ul data-role="listview" data-divider-theme="a"
data-theme="e" data-inset="true" data-inset="true" >
图3 ListView修改主题后效果
from:http://software.intel.com/zh-cn/articles/html5-jquery-mobile
- HTML5 前端框架 jQuery Mobile 使用教程
- HTML5 经量级框架 jQuery Mobile - 7.1
- Html5学习-JQuery mobile--button学习使用
- Html5学习-JQuery mobile--listview学习使用
- Html5学习-JQuery mobile--table学习使用
- 移动前端开发框架jQuery Mobile,基于jQuery
- HTML5 经量级框架 jQuery Mobile 视图与页面 - 7.2
- HTML5 经量级框架 jQuery Mobile Form 表单 - 7.7
- HTML5 经量级框架 jQuery Mobile List 列表 - 7.8
- 基于HTML5移动Web应用开发框架 jQuery Mobile
- 移动web前端开发研究(jquery mobile 框架)
- JQuery Mobile框架使用技巧几则
- 使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 表单上
- 使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 基础
- 使用 jQuery Mobile 与 HTML5 开发 Web App —— 02 jQuery Mobile 基础
- 使用 jQuery Mobile 与 HTML5 开发 Web App —— 03 jQuery Mobile 按钮
- 使用 jQuery Mobile 与 HTML5 开发 Web App —— 04 jQuery Mobile 表单上
- 使用 jQuery Mobile 与 HTML5 开发 Web App —— 05 jQuery Mobile 表单下
- Ad_hoc推送
- ORA-01151;ORA-01537错误
- 快速排序
- HTML5学习笔记(1)
- 试题收集-多多的2
- HTML5 前端框架 jQuery Mobile 使用教程
- SublimeText 2 快捷键
- java程序优化
- 快速SQL TUNING——1分钟搞定超慢SQL
- 史上最强灌水:奇葩的MEGA 精选 科学网薛宇老师
- linux打包压缩命令汇总
- MySQL中的datetime与timestamp比较
- HTML5应用性能调优工具WAPA – 介绍篇
- 求最小绝对值子串、一个整数数组求两两之差绝对值最小值