PhoneGap揭开你的神秘面纱

时间:2023-02-11 00:22:15

 

 

 

 

第二讲 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>

 

<section id="page1" data-role="page">

 

<header data-role="header"><h1>标题</h1></header>


 

 

<div data-role="content"class="content"> <p>这是内容</p> </div>

 

<footer data-role="footer"><h1>这是底部</h1></footer> </section>

 

第一个示例:

 

<!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">

 

<header data-role="header"><h1>标题</h1></header> <div data-role="content"class="content"> <p>这是内容</p> </div>

 

<footer data-role="footer"><h1>这是底部</h1></footer> </section>

 

</body> </html>

 

 

 

<body>HTML 4.01 / XHTML 1.0

 

<div id="header">...</div>

 

<div id="navigation">...</div> <div id="main">...</div>

 

<div id="sidebar">...</div> <div id="footer">...</div>

 

</body>

 

<body> HTML5 <header>...</header> <nav>...</nav>

 

<div id="main">...</div>

 


 

 

<aside>...</aside>

 

<footer>...</footer>

 

</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"/>

 

<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>

 

<div data-role="page" id="page"> <div data-role="header">

 

<h1> 1 </h1> </div>

 

<div data-role="content"> <ul data-role="listview">

 

<li><ahref="#page2"> 2 </a></li> <li><ahref="#page3"> 3 </a></li>

 

<li><ahref="#page4"> 4 </a></li> </ul>

 

</div>

 

<div data-role="footer"> <h4>页脚</h4>

 

</div> </div>


 

 

<div data-role="page" id="page2"> <div data-role="header">

 

<h1> 2 </h1> </div>

 

<div data-role="content"> <p>内容第2</p> <ahref="#page">返回主页</a>

 

</div>

 

<div data-role="footer"> <h4>页脚</h4>

 

</div> </div>

 

<div data-role="page" id="page3"> <div data-role="header">

 

<h1> 3 </h1> </div>

 

<div data-role="content"> <p>内容第3</p> <ahref="#page">返回主页</a>

 

</div>

 

<div data-role="footer"> <h4>页脚</h4>

 

</div> </div>

 

<div data-role="page" id="page4"> <div data-role="header">

 

<h1> 4 </h1> </div>

 

<div data-role="content"> <p>内容第4</p> <ahref="#page">返回主页</a>

 

</div>

 

<div data-role="footer"> <h4>页脚</h4>

 

</div> </div>

 

</body> </html>

 

2.第二种页面跳转


 

 

<a href="index2.htm"> 2 </a>

 

 

 

五、对话框

 

通过设置 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(默认), fadeflipturnflowslidefadeslideslideupslidedownnone