02.Jquery Mobile介绍以及Jquery Mobile页面与对话框
一、为什么要学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.页面基本组成
|
<div data-role="page"> <div data-role="header">头部</div> <div data-role="content">被容</div> <div data-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（默认）, fade，flip，turn，flow，slidefade，slide，slideup，slidedown，none
