PhoneGap揭开你的神秘面纱

来源：互联网发布：用友网络最新消息编辑：程序博客网时间：2024/05/14 17:25

第二讲 Jquery Mobile 介绍以及 Jquery Mobile 页面与对话框

学习要点：

1. 为什么要先学Jquery Mobile

2. Adobe Dreamweaver CS6环境搭建以及软件破解

3. Jquery Mobile页面的基本组成

4. 页面跳转

5. 对话框

一、为什么要学 Jquery Mobile

JqueryMobile 是 jquery 的移动版本，懂基本的 jquery 知识,会简单的 html+css 就可以完成很多复杂的功

能,还有就是这个框架在企业中用的也是比较多的

二、 Adobe Dreamweaver CS6 环境搭建以及软件破解

软件安装步骤：

http://www.phonegap100.com/article-79-1.html

软件下载链接地址：

http://bbs.phonegap100.com/thread-135-1-1.html

三、Jquery Mobile 页面的基本组成

1.<meta name="viewport" content="width=device-width" />

通常情况移动设备以 900px 的宽度显示页面,加上这句话,可以使页面的宽度与移动设备的屏幕宽度相同

2.页面基本组成

<divdata-role="page">

<divdata-role="header">头部</div>

<divdata-role="content">被容</div>

<divdata-role="footer">底部</div>

</div>

第一个示例：

<!DOCTYPEhtml> <html>

<head>

<title>jQuery Mobile 页面框架</title> <metaname="viewport"content="width=device-width"/>

<metacharset="utf-8"> <linkhref="Css/jquery.mobile-1.0.1.min.css" rel="Stylesheet"type="text/css"/> <scriptsrc="Js/jquery-1.6.4.js" type="text/javascript"></script> <scriptsrc="Js/jquery.mobile-1.0.1.js" type="text/javascript"></script>

</head> <body>

<sectionid="page1"data-role="page">

</body> </html>

<body>HTML 4.01 / XHTML 1.0

</body>

</body>

四、页面跳转

第一种页面跳转

<a href="dialog/index.html"data-role="button" data-rel="back" data-theme="c">Cancel</a>

data-rel="back"属性将忽视 href 属性

默认 data-ajax="true"jquery mobile 是默认通过 ajax 切换页面的 data-ajax="false"

<!DOCTYPEhtml> <html>

<head>

<title>jQuery Mobile 页面框架</title> <metaname="viewport"content="width=device-width"/>

</head> <body>

</div>

</div> </div>

</div>

</div> </div>

</div>

</div> </div>

</div>

</div> </div>

</body> </html>

2.第二种页面跳转

五、对话框

通过设置 data-rel="dialog"，来打开一个对话框。

<a href="foo.html" data-rel="dialog">Open dialog</a>

4.对话框过渡效果

<a href="foo.html" data-rel="dialog" data-transition="pop">Open dialog</a>

属性可选值：pop（默认）, fade，flip，turn，flow，slidefade，slide，slideup，slidedown，none

0 0