【Jquery mobile】基础学习

最新推荐文章于 2020-06-27 22:22:22 发布

我是一个小胖子

最新推荐文章于 2020-06-27 22:22:22 发布

阅读量2.3k

点赞数

分类专栏： Jquery Mobile 文章标签： jquery mobile button stylesheet dialog header

本文链接：https://blog.csdn.net/actual_/article/details/7021971

版权

Jquery Mobile 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文包含的内容:

一 jQuery Mobile 基本页面结构

二一个页面中包含多个页面

三对话框

四按钮

五格式化文本

六主题

一 jQuery Mobile 基本页面结构

<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, initial-scale = 1.0 ,user-scalable = no , maximum-scale = 1.0 ">
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
	</head>
	<body>
		<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>
	</body>
</html>

要使用 jQuery Mobile，首先需要在开发的界面中包含如下3个内容

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

也可以在jquerymobile.com 下载最新的文件放到本地。

body里包含page div。有“header”，“content”，“footer”。很好理解，可以没有header和footer，至少有一个content。

二一个页面中包含多个页面

<!DOCTYPE html>
<html>
	<head>
		<title>jQuery Mobile: Pages within Pages</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, initial-scale = 1.0 ,user-scalable = no , maximum-scale = 1.0 ">
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
	</head>
	<body>
		<!-- page 1 -->
		<div data-role="page" id="home">
			<div data-role="header">
				<h1>Home</h1>
			</div>
			<div data-role="content">
				<p>
					<a href="#next">click to next page</a>
				</p>
			</div>
		</div>
		
		<!-- page 2 -->
		<div data-role="page" id="next">
			<div data-role="header">
				<h1>About This App</h1>
			</div>
			<div data-role="content">
				<p>
					This app rocks! <a href="#home">Go home</a>
				</p>
			</div>
		</div>
	</body>
</html>

一个html中可以有多个page。默认显示第一个。

两个page切换的特效：在<a href="#home">Go home</a> 中添加a-transition即可；

data-transition="pop":弹出

data-transition=”flip”：旋转飞出飞入

data-transition=”fade”：渐变消失和出现

data-transition=”side”：从左到右切换（默认）

data-transition=”sideup”：向上

data-transition=”sidedown”：向下

三对话框：

第二个页面以对话框的形式弹出只需在链接中添加 “data-rel="dialog" ”即可。当然也可以添加对话框弹出的特效；

比如：<a href="#next" data-rel="dialog" data-transition="flip">click to next page</a>

第二页面以对话框的形式旋转飞出；

四按钮

在jQuery Mobile中把一个链接变成button的效果，只需要在标签中添加data-role=”button属性即可”。例如：

<a href="#next" data-role="button" >click to next page</a>

data-icon可以给button添加各种cion

比如：data-icon="delete"

图标如下：

Left arrow - data-icon="arrow-l"

Right arrow - data-icon="arrow-r"

Up arrow - data-icon="arrow-u"

Down arrow - data-icon="arrow-d"

Delete - data-icon="delete"

Plus - data-icon="plus"

Minus - data-icon="minus"

Check - data-icon="check"

Gear - data-icon="gear"

Refresh - data-icon="refresh"

Forward - data-icon="forward"

Back - data-icon="back"

Grid - data-icon="grid"

Star - data-icon="star"

Alert - data-icon="alert"

Info - data-icon="info"

Home - data-icon="home"

Search - data-icon="search"

button图标的位置：

默认所有的图标都是在button的左侧。修改icon的位置：

data-iconpos="right"

data-iconpos="top"

data-iconpos="bottom"

五格式化文本

为了使其尽可能的灵活，jQuery Mobile使更多的普通HTML内容更加独立。加入适当的缩进使内容的可读性更强。

有两种布局方法使其格式化变得更简单：布局表格和可折叠的内容块

◆布局表格：组织内容以列的形式显示，有两列表格，和三列表格

◆可折叠的内容：当点击内容块的标题，则会将其隐藏的详细内容展现出来

下面是一个可折叠内容的实例，单击标题将看到具体的内容，再点击标题则会将展现的内容隐藏。

div 中添加 data-role="collapsible" data-collapsed="false"

即可折叠div中子标签的内容.

	<div data-role="content">
				<div data-role="collapsible" data-state="collapsed">
					<h3>About this app</h3>
					<p>
						This app rocks!
					</p>
					<button >button </button>
				</div>
			</div>

六主题

每一个主题包含26种不同颜色的切换(标记从a 到z)，可以控制前景颜色，背景色和渐变色，典型用法是使页面元素部分替换，你可以使用data-theme属性。

比如：

	<div data-role="content">
	<a href="#" data-role="button" data-theme="a">About this app</a>
	<a href="#" data-role="button" data-theme="b">About this app</a>
	<a href="#" data-role="button" data-theme="c">About this app</a>
	<a href="#" data-role="button" data-theme="d">About this app</a>
	<a href="#" data-role="button" data-theme="e">About this app</a>
	</div>