发布于 2015-04-22 23:56:20 | 135 次阅读 | 评论: 0 | 来源: 网友投递
jQuery Mobile jQuery的移动设备版
jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说：能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。
最新版本的cs6会支持JM的使用，有自动提示功能，很强大。
安装说明地址：http://www.phonegap100.com/article-79-1.html
下载地址说明：http://bbs.phonegap100.com/thread-135-1-1.html
默认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>
<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