每天一个小知识点10（jQuerMobile总结一）



jQuery Mobile总结 一

---

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

---

要使用它开发第一步是引入必要文件包括一个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>

1. slide 从右到左切换（默认）
2. slideup 从下到上切换
3. slidedown 从上到下切换
4. pop 以弹出的形式打开一个页面
5. fade 渐变退色的方式切换
6. 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>

---

关于jquery中的按钮 三种声明方式

 #login{
width: 2em;
}
  <button id="login">login</button>
  <input type="button" value="login">
  <a href="#" data-role="button">login</a>

jQuery Mobile 中的按钮会自动获得样式，这增强了他们在移动设备上的交互性和可用性。推荐使用 data-role="button" 的 <a> 元素来创建页面之间的链接，而 <input>或 <button> 元素用于表单提交。

---

为我们提供的图标

1. <a href="#anylink" data-role="button" data-icon="search">搜索</a>
2. <a href="#anylink" data-role="button" data-icon="arrow-l">左</a>
3. <a href="#anylink" data-role="button" data-icon="arrow-r">右</a>
4. <a href="#anylink" data-role="button" data-icon="delete">删除</a>
5. <a href="#anylink" data-role="button" data-icon="info">信息</a>
6. <a href="#anylink" data-role="button" data-icon="home">首页</a>
7. <a href="#anylink" data-role="button" data-icon="back">返回</a>8.<a href="#anylink" data-role="button" data-icon="grid">网格</a>9.<a href="#" data-role="button" data-icon="plus">转播到 QQ 空间</a>

---

可折叠性质的文本，点击可以查看全部类容，再次点击可以让类容隐藏

<div data-role="content">
<div data-role="collapsible" data-state="collapsed">
<h3>About this app</h3>
<p>This app rocks!</p>
</div>
</div>

案例2：可折叠嵌套

<div data-role="collapsible">
     <h1>点击我 - 我可以折叠！</h1>
     <p>我是被展开的内容。</p>
    <div data-role="collapsible">
           <h1>点击我 - 我是嵌套的可折叠块！</h1>
         <p>我是嵌套的可折叠块中被展开的内容。</p>
    </div>
</div>

---

jquerymobile提供了非常方便使用的导航条目

<div data-role="header">
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active">页面1</a></li>   //注意这里，class="ui-btn-active"--代表当前激活状态，我们可以动态修改
<li><a href="mobile2.html">页面2</a></li>
<li><a href="#anylink">页面3</a></li>
</ul>
</div>
</div>

---

jquerymobile的列表

Query Mobile 中的列表视图是标准的 HTML 列表：有序列表 (<ol>) 和无序列表 (<ul>)。

<ol data-role="listview">
<li><a href="#">选择1</a></li>
<li><a href="#">选择2</a></li>
</ol>
<ul data-role="listview">
<li><a href="#">选择1</a></li>
<li><a href="#">选择2</a></li>
</ul>

注意:也可以对不同的选项进行分组处理

 <ul data-role="listview" data-inset="true">
<li data-role="list-divider">测试</li>
<li><a href="#" >选择1</a></li>
<li><a href="#" >选择2</a></li>
<li data-role="list-divider">测试2</li>
<li><a href="#" >选择1</a></li>
<li><a href="#" >选择2</a></li>
</ul>

当需要选取一些选项的时候jquerymobile也提供了帮助

<p>请选择</p>
<ul data-role="listview" data-filter="true">   //data-filter-placeholder="搜索姓名"我们还可以给他搜索语句
<li><a href="#">张三</a></li>
<li><a href="#">李四</a></li>
<li><a href="#">王五</a></li>
</ul>

当然除了处理这些列表之类的东西还可以在data-role="listview"中添加

案例1：

<ul data-role="listview" data-inset="true">
<li>
<a href="mobile2.html"><img src="images/icon1.png"></a>
</li>
<li>
<a href="#"><img src="images/icon3.png"></a>
</li>
</ul>

图文交互效果

<ul data-role="listview" data-inset="true">
<li>
<a href="#">
<img src="images/icon1.png">
<h2>hello</h2>
<p>这本书很好看</p>
</a>
</li>
<li>
<a href="#">
<img src="images/icon1.png">
<h2>这也是一本书</h2>
<p>这本书也不错</p>
</a>
</li>
</ul>

这里注意：

对于大于 16x16px 的图像，请在链接中添加 <img> 元素。

<li><a href="#"><img src="chrome.png"></a></li>

如需向列表添加 16x16px 的图标，请向 <img> 元素添加 class="ui-li-icon" 属性：

<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>