小白读《锋利的jQuery》第九章jQuery Mobile

本文介绍HTML5及其对传统网页设计的影响,探讨jQueryMobile作为HTML5开发框架的特性,包括其对UI组件的支持、AJAX导航系统、模块化结构及对多种设备的兼容性。同时,详细说明了jQueryMobile的使用方法,从下载到页面结构搭建,以及如何通过data-role属性进行配置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

HTML5简介

前身:Web Applications1.0。
对传统的三层观念有了刷新。
有很多新特性和新功能。

jQuery Mobile主要特性

jQuery Mobile提供了非常友好的UI组件集和一个强有力的AJAX的导航系统,以支持动画页面转换。

  1. 基于jQuery构建
  2. 兼容绝大部分手机平台
  3. 轻量级的库
  4. 模块化结构
  5. HTML5标记驱动的配置
  6. 渐进增强原则
  7. 响应设计
  8. 强大的Ajax的导航系统
  9. 易用性
  10. 支持触摸和鼠标事件
  11. 统一的UI组件
  12. 强大的主题化框架

jQuery Mobile的使用

准备工作

1.官网下载最新的jQuery Mobile版本。
2.使用HTML5标准。

构建HTML模板

完整的页面结构分为header、content和footer这三个主要区域。

<!DOCTYPE html> 
<html> 
	<head> 
	<title>My Page</title> 
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
	<script src="js/jquery.js"></script>
	<script src="js/jquery.mobile-1.0.1.min.js"></script>
</head> 
<body> 
<div data-role="page">
	<div data-role="header">
		<h1>My Title</h1>
	</div>
	<div data-role="content">	
		<p>Hello world</p>
	</div>
	<div data-role="footer">
		<h4>Footer content</h4>
	</div>
</div>
</body>
</html>

在这里插入图片描述

data-role属性

在标签加入data-role="page"属性,这样jQuery Mobile就会知道哪些内容需要处理。

<div data-role="page">
	<div data-role="header">...</div>
	<div data-role="content">...</div>
	<div data-role="footer">...</div>
</div>

其他属性值
在这里插入图片描述

添加内容

<ul data-role="listview" data-inset="true" data-theme="e">
	<li><a href="#">Acura</a></li>
	<li><a href="#">Audi</a></li>
	<li><a href="#">BMW</a></li>
	<li><a href="#">Cadillac</a></li>
	<li><a href="#">Ferrari</a></li>
</ul>

在这里插入图片描述

样式切换

ThemeRoller组件(http://jquerymobile.com/themeroller/)
在这里插入图片描述
应用样式e:data-theme=“e”

<ul data-role="listview" data-inset="true" data-theme="e">
	<li><a href="#">Acura</a></li>
	<li><a href="#">Audi</a></li>
	<li><a href="#">BMW</a></li>
	<li><a href="#">Cadillac</a></li>
	<li><a href="#">Ferrari</a></li>
</ul>

在这里插入图片描述

其他框架

移动框架

  1. jqMobi(http://jqmobi.com)
  2. Sencha Touch(http://sencha.com)
  3. Zepto.js (http://zeptojs.com

PhoneGap

开源的开发框架,可以把HTML/JavaScript代码打包成本地App。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值