学习 jQueryMobile 第一个程序

最新推荐文章于 2025-08-22 11:32:18 发布

weixin_30488085

最新推荐文章于 2025-08-22 11:32:18 发布

阅读量67

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 移动开发 ViewUI

原文链接：http://www.cnblogs.com/az19870227/archive/2011/04/29/2032547.html

本文介绍使用HTML5、CSS3及JQuery Mobile (JQM) 构建手机Web应用程序的基础知识，涵盖页面架构设置、页面切换效果实现等内容，并提供示例代码。

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

最近没事看看手机方面的东西。发现HTML5+CSS3+JQueryMobile挺适合做手机web app的。没事学习一下，纯属自己记个笔记。JQM（JqueryMobile）包含了自己的样式表，虽然现在样式不多，但效果还可以。

准备 1：需要一些css+js+jquery的知识。

2：需要苹果safari或者谷歌chrome浏览器，因为这两个浏览器支持的效果比较好（显示效果基本上和手机上显示的一样）。

3：当然你也可以在android模拟器中看一下手机中的真实效果。

页面架构，最简单的例子JQM的HelloWorld。

View Code

1 <!DOCTYPE html>
2 <html>
3   <head>
4   <title>Page Title</title>
5   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
6   <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
7   <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
8 </head>
9 <body>
10
11 <div data-role="page">
12
13   <div data-role="header">
14     <h1>Page Title</h1>
15   </div>
16
17   <div data-role="content">
18     <p>Page content goes here.</p>
19   </div>
20
21   <div data-role="footer">
22     <h4>Page Footer</h4>
23   </div>
24 </div>
25
26 </body>
27 </html>

我们引用了jquery的css，jquery的js，和jquerymoblie的js，当然也可以下下来，放到你的本地目录。看一下效果：

可以看到一个简单的页面，它包含了一个header，content，footer，基本上需要的都有了。你不用添加任何的样式，只需修改data-role属性的内容。

页面切换，手机中用到最多的估计就是页面切换了，这些在JQM中非常简单。

View Code

1 <div data-role="page" id="home">
2
3   <div data-role="header">
4     <h1>Home</h1>
5   </div>
6
7   <div data-role="content">
8     <p><a href="#about">About this app</a></p>
9   </div>
10
11 </div>
12
13 <div data-role="page" id="about">
14
15   <div data-role="header">
16     <h1>About This App</h1>
17   </div>
18
19   <div data-role="content">
20     <p>This app rocks! <a href="#home">Go home</a></p>
21   </div>
22
23 </div>

你只需要仿照上面的页面再写一个data-role属性为page的div，添加一个id，然后添加一个指向此id的链接，在浏览器里看一下效果是不是很炫。看一下第二个页面的上部是不是有一个back按钮，

这是JQM自动为你添加的，你不用写任何代码。如果感觉效果不够炫，你可以给链接添加一个属性，像这样<a href="#about" data-transition="pop">About this APP</a>,看一下效果，

页面是不是弹出来了。 data-transition可选参数有

slide Slide right to left (left to right if tapping the Back button). This is the default.

slideup Slide from the bottom to the top (top to bottom if tapping the Back button).

slidedown Slide from the top to the bottom (bottom to top if tapping the Back button).

pop Expand the new page (contract it if tapping the Back button). Great for dialogs and popups.

fade Fade the new page in (fade it out if tapping the Back button).

flip Flip the old page out and the new page in, like flipping a card.

可以每个属性都试一下，看看效果。

转载于:https://www.cnblogs.com/az19870227/archive/2011/04/29/2032547.html