第一课 Jquery mobile简介

最新推荐文章于 2024-07-16 06:07:58 发布

nick00221

最新推荐文章于 2024-07-16 06:07:58 发布

阅读量472

点赞数

分类专栏：前台 jquery mobile学习文章标签： jqm基础 jquery mobile

本文链接：https://blog.csdn.net/abcxuchuang123/article/details/41548293

版权

前台同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

jquery mobile学习

2 篇文章 0 订阅

订阅专栏

JqueryMobile是一个移动Web应用的框架.

官网地址:

http://www.jquerymobile.com

现在很多系统都需要支持移动办公,通常能的web应用无法在手机或平板中取得很好的效果.

有些人选择做成app,但这最少要支持android和ios.至少开发两套代码,故使用jquerymobile来做成web系统,即省事,客户有能在移动端取得良好的体验.

简单效果如下:

实现过程

1、去JqueryMobel官网下载压缩包，使用1.3.2版。解压后如下：

2、在web工程的相应jsp页面中引入相应的css和js，代码如下：

3、从官网下载的包中包含大量的demos，查看里面的代码即可，这里使用的代码如下：

<div data-role="page" id="pageone">
	<div data-role="header">
		<h1>I am head</h1>
	</div>
	<div data-role="content">
		<p>hello world</p>
	</div>
	<div data-role="footer">
		<h1>I am foot</h1>
	</div>
</div>

解释

1、第一个div中的data-role=“page”表示此DIV代表着一个页面。其实一个html或jsp页面中可以定义多个page，每一个page在实际访问效果中以单独的页面显示，下面的例子有详细的解释。

2、data-role="header"表示上方工具条。

3、data-role="footer"表示下面的部分。

示例2

效果如下：

点击页面的超链接之后：

在点击超链接又回到第一个页面。

代码如下：

<body>
	<div data-role="page" id="pageone">
		<div data-role="header">
			<h1>I am head</h1>
		</div>
		<div data-role="content">
			<p>hello world</p>
			<a href="#pagetwo">转到页面2</a>
		</div>
		<div data-role="footer">
			<h1>I am foot</h1>
		</div>
	</div>

	<div data-role="page" id="pagetwo">
		<div data-role="header">
			<h1>I am head</h1>
		</div>
		<div data-role="content">
			<a href="#pageone">回到页面1</a>
		</div>
		<div data-role="footer">
			<h1>I am foot</h1>
		</div>
	</div>
</body>

解释：

1、此时可以理解data-role="page"的作用了吧，代表着访问时显示的一个页面。一个实际的HTML中可以有多个page。

2、page中的header、content、footer缺一不可，我之前准备只保留content。经试验，样式没有加上，失败。

示例3

将页面显示为对话框。效果如下：

点击“显示对话框”后：

代码如下：

<body>
	<div data-role="page" id="pageone">
		<div data-role="header">
			<h1>I am head</h1>
		</div>
		<div data-role="content">
			<p>hello world</p>
			<a href="#pagetwo" data-rel="dialog">显示对话框</a>
		</div>
		<div data-role="footer">
			<h1>I am foot</h1>
		</div>
	</div>

	<div data-role="page" id="pagetwo">
		<div data-role="header">
			<h1>I am head</h1>
		</div>
		<div data-role="content">
			<p>这里是对话框</p>
			<a href="#pageone">回到页面1</a>
		</div>
		<div data-role="footer">
			<h1>I am foot</h1>
		</div>
	</div>
</body>

解释：

1、跟例子2基本一样，只是在第一个page的超链接中加入了data-rel="dialog"属性即可。