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

最新推荐文章于 2020-03-26 11:28:17 发布

原创最新推荐文章于 2020-03-26 11:28:17 发布 · 245 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端小白 #jQuery #学习笔记

jQuery 专栏收录该内容

11 篇文章

订阅专栏

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

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

HTML5简介

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

jQuery Mobile主要特性

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

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

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>

在这里插入图片描述