JqueryMobile基础之创建页面
首先简答介绍一下JQueryMobile吧，我觉得用一句话来讲就是可以 "写更少的代码，做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页，且兼容所有移动设备。这也是我自学jQuery Mobile的原因之一吧。
废话不多说，下面一起来看看如何使用它吧！
首先你可以从jQuerymobile.com 下载 jQuery Mobile库
1、安装，把下载的这三个文件导入进来
jquery.mobile-1.4.5.css
jquery-1.10.2.js
jquery.mobile-1.4.5.js
<head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="jquery.mobile-1.4.5.css"> <script src="jquery.js"></script> <script src="jquery.mobile-1.4.5.js"></script> </head>
2、导入三个文件以后，下面就来简单的船建一个页面吧！
<body> <div data-role="page"> <div data-role="header"> <h1>这是主页</h1> </div> <div data-role="main" class="ui-content"> <p>我在自学jQuery Mobile</p> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body>
这样就能创建一个简单的页面了，效果图如下
解释一下几个属性吧
data-role="page" 是显示在浏览器中的页面
data-role="header" 创建页面上方的工具栏（常用于标题和搜索按钮）
data-role="content" 定义页面的内容，比如文本、图像、表单和按钮，等等
data-role="footer" 创建页面底部的工具栏
创建完一个界面以后，下面我们来看看如何添加一个页面
在 jQuery Mobile，您可以在单一 HTML 文件中创建多个页面。
通过唯一的 id 来分隔每张页面，并使用 href 属性来连接彼此：
例如 <a href="#pagetwo" data-transition="turn">转到页面二</a>
data-rel="dialog":点击（轻触）链接时创建一个对话框
上代码
<div data-role="page" id="pageone">
<div data-role="header">
<h1>欢迎来到我的主页</h1>
</div>
<div data-role="main" class="ui-content">
<p>欢迎! 点击以下链接跳转到第二个页面。 </p>
<a href="#pagetwo">跳转到第二个页面</a>
</div>
<div data-role="footer">
<h1>底部文本</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>欢迎来到我的主页</h1>
</div>
<div data-role="main" class="ui-content">
<p>这是第二个页面。点击以下链接跳转到第一个页面。</p>
<a href="#pageone">跳转到第一个页面</a>
</div>
<div data-role="footer">
<h1>底部文本</h1>
</div>
</div>
效果图的话，自己试试上面的代码就可以了。
翻页的时候还可以给页面添加过滤效果
例如：
<a href="#anylink" data-transition="slide">切换到第二个页面</a>
想要了解更多的过滤效果请参考官网教程，这里就不一一演示了。
这次先介绍到这里吧，因为我也在自学中，暂时先介绍这么多吧。下次重点介绍一下jQueryMobile的组件的各种事件。
