jquery Mobile

jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说：能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。


jQuery一直以来都是非常流行的富客户端及Web应用程序开发中使用的JavaScript类库,然而一直以来它都是为桌面浏览器设计的，没有特别为移动应用程序设计。


jQuery Mobile是一个新的项目用来添补在移动设备应用上的缺憾。它是基本jQuery框架并提供了一定范围的用户接口和特性，以便于开发人员在移动应用上使用。使用该框架可以节省大量的js代码开发时间，尽管目前的版本还是不是一个稳定的版本。但它的应用效果已经备受瞩目。


要使用它开发第一步是引入我们的必要文件包括一个css和一个js文件
 <link  rel="stylesheet" type="text/css" href="stylesheets/jquery.mobile-1.4.5.min.css">
 <script type="text/javascript" src="javascripts/jquery-1.7.min.js"></script>
 <script type="text/javascript" src="javascripts/jquery.mobile-1.4.5.min.js"></script>


注意引入的位置


案例1：
<div data-role="page" id="home">   这里规定我们的data为页面信息
    <div data-role="header">
        <h1>Header</h1>
    </div>
    <div data-role="content">
        <p>Content goes here</p>
    </div>
    <div data-role="footer">
        <h4>Footer</h4>
    </div>
</div>




注意：
div dat-role=”header”></div>
在页面的顶部建立导航工具栏，用于放置标题和按钮（典型的至少要放一个“返回”按钮，用于返回前一页）。通过添加额外的属性data-position=”fixed”，可以保证头部始终保持屏幕的顶部(<div data-role="header" data-position="fixed"></div>)




<div dat-role=”content”></div>包含一些主要内容，例如文本内容，图像，按钮，列表，表单等等


<div dat-role=”footer”></div> 在页面的底建立工具栏，添加一些功能按钮为了确保它始终保持在页面的底部，可以给其加上data-position=”fixed” 属性
<div data-role="footer" data-position="fixed"></div>




注意点
<div data-role="header" data-position="fixed" data-fullscreen="true"></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>


案例2：
<div data-role="page" id="home">
    <div data-role="header"><h1>Home</h1></div>
    <div data-role="content"><p><a href="#about">About this app</a></p></div>
</div>


<div data-role="page" id="about">
    <div data-role="header"><h1>About This App</h1></div>
    <div data-role="content"><p>This app rocks!<a href="#home">Go home</a></p></div>
</div>


注意在这个页面中包含了两个data-role ，并且他们的切换是使用了#home的方式，这就是说我们可以在一个html中包含了两个页面，点击的时候用jquerymobile的方式进行了切换


除了这种切换之外，我们也可以使用jquerymobile提供给我们的跳转方式来跳转我们的页面
 <div data-role="content">
        <a href="mobile2.html" data-transition="slideup">click me</a>  //尝试一下
    </div>


slide 从右到左切换（默认）


slideup 从下到上切换


slidedown 从上到下切换


pop 以弹出的形式打开一个页面


fade 渐变退色的方式切换


flip 旧页面翻转飞出，新页面飞入




案例3：也可以把一个页面当作对话框的形式显示出来
<div data-role="page" id="home">
    <div data-role="header"><h1>页面1</h1></div>
    <div data-role="content"><p><a href="#about" data-rel="dialog">About this app</a></p></div>
</div>


<div data-role="page" id="about">
    <div data-role="header"><h1>About This App</h1></div>
    <div data-role="content"><p>This app rocks!<a href="#home">页面2</a></p></div>
</div>
官方案例：
<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo" data-rel="dialog">转到页面二</a>
  </div>
</div>


<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">转到页面一</a>
  </div>
</div>