（二）Jquery Mobile介绍以及Jquery Mobile页面与对话框-CFANZ编程社区

（二）Jquery Mobile介绍以及Jquery Mobile页面与对话框

Jquery Mobile介绍以及Jquery Mobile页面与对话框
一、 Adobe Dreamweaver CS6 环境最新版本的cs6会支持JM的使用，有自动提示功能，很强大。安装说明地址：http://www.phonegap100.com/article-79-1.html 下载地址说明：http://bbs.phonegap100.com/thread-135-1-1.html
二、JM说明默认data-ajax="true"jquery mobile 是默认通过ajax切换页面的 1、Jquery Mobile页面的基本组成 <meta name="viewport" content="width=device-width" /> 通常情况移动设备以900px的宽度显示页面,加上这句话,可以使页面的宽度与移动设备的屏幕宽度相同需要引用的文件有： <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>
2、JM主要标签说明 <div data-role="page"> <div data-role="header">头部</div> <div data-role="content">被容</div> <div data-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"> <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>
3、跳转第一种：<a href="#page">返回主页</a> 将跳转到id=page的div上第二种：与普通的html跳转相同，<a href="index2.htm">第 2 页</a>
4、对话框通过设置data-rel="dialog"，来打开一个对话框。 <a href="foo.html" data-rel="dialog">Open dialog</a> <a href="foo.html" data-rel="dialog" data-transition="pop">Open dialog</a> 属性可选值： pop（默认）, fade，flip，turn，flow，slidefade，slide，slideup，slidedown，none