初学--jQueryMobile

触摸优化的Web框架：

jQuery Mobile是一个基于HTML5的用户界面系统，旨在使所有智能手机，平板电脑和桌面设备上都可以访问的响应网站和应用。
但是jqueryMobile只适合做一些简单的移动页面，如果需要做像如电商平台一样的网站，请使用其他框架例如MUI。

引用网络资源：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

注: 一定要先引用了jquery.min.js再引用jquery.mobile.min.js

在jqueryMobile官网，有很多的demo供程序猿们使用。

1.data-dialog=”true”—-弹出信息框

/*界面布局还是以盒子模型，大的div包裹3个小的div，分别是头部，内容和底部，在jqueryMobile框架下更规范了布局的可读性：
data-role="page" 是显示在浏览器中的页面
data-role="header" 创建页面上方的工具栏（常用于标题和搜索按钮）
data-role="content" 定义页面的内容，比如文本、图像、表单和按钮，等等
data-role="footer" 创建页面底部的工具栏
**/
<div data-role="page" id="pageone">  
  <div data-role="header">
    <h1>欢迎来到我的主页</h1>
  </div>

  <div data-role="main" class="ui-content"> //也可以写成data-role="content"
    <p>欢迎!</p>
    <a href="#pagetwo">弹出对话框</a>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 
/*
使用 jQuery Mobile, 你可以在单个 HTML 文件中创建多个不同的页面。你可以使用不同的href属性来区分使用同一个唯一id的页面.
因此此信息框其实是一个页面。
**/
<div data-role="page" data-dialog="true" id="pagetwo">
  <div data-role="header">
    <h1>我是一个对话框！</h1>
  </div>
  <div data-role="main" class="ui-content">
    <p>对话框与普通页面不同，它显示在当期页面上, 但又不会填充完整的页面，顶部图标 "X" 用于关闭对话框。</p>
    <a href="#pageone">跳转到第一个页面</a>
  </div>

  <div data-role="footer">
    <h1>对话框底部文本</h1>
  </div>
</div> 

2.data-role=”navbar”–导航栏

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>欢迎访问我的主页</h1>
    <div data-role="navbar">
      <ul>
      //data-icon=''是封装的icon，更多用法请查询官网demo
        <li><a href="#" data-icon="home">主页</a></li>
        <li><a href="#" data-icon="arrow-r">第二页</a></li>
        <li><a href="#" data-icon="search">搜索</a></li>
      </ul>
    </div>
  </div>

这里需要注意！！别直接复制新版demo的导航栏，别直接复制新版demo的导航栏，别直接复制新版demo的导航栏，会出bug，bug，bug。可以去找1.2版的demo..或者自己敲啦.

3.data-role=’panel’–面板

<div data-role="page" id="pageone">
  <div data-role="panel" id="myPanel"> 
    <h2>面板头部</h2>
    <p>你可以通过点击面板外部区域或按下 Esc 键或滑动来关闭面板。</p>
  </div> 

  <div data-role="header">
    <h1>页面头部</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>点击下面按钮打开面板。</p>
    <!--ui-btn添加在 <a> 元素上并以按钮形式展示; ui-btn-inline在同一行上显示按钮; ui-corner-all为元素添加圆角; ui-shadow为元素添加阴影-->
    <a href="#myPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">打开面板</a>
  </div>

  <div data-role="footer">
    <h1>页面底部</h1>
  </div> 
</div> 

点击 ‘打开面板’后，则如下变化：

注意：一个页面只能有一个panel，超过的设置无效！

4.data-role=”collapsible”–可折叠块

  <div data-role="main" class="ui-content">
  <!--默认情况下，内容是被折叠起来的。如需在页面加载时展开内容，请使用 data-collapsed="false"-->
    <div data-role="collapsible">
      <h1>点击我 - 我可以折叠！</h1>
      <p>我是可折叠的内容。</p>
    </div>
  </div>

效果如下：

5.jQueryMobile封装了部分icon可供用户使用，用法如下：

<a href="#main" class="ui-btn-active" data-icon='home'>首页</a>

6.Transition属性是用来美化a标签跳转的过渡效果的：

<a href="#searchPage" data-icon='search' data-transition="turn">搜索</a>

7.主题设置–data-theme

<div data-role="page" id='searchPage' data-theme="b">

目前主题有a,b,c,d,e5种可以使用，可以在任意位置使用。如果在page使用，则选中整个页面，如果在header使用，则只选中header部分。

最后补充一句，这里写的只是笔者认为用得相对较多的，有很多不全面的地方，如果要看详细的代码和最全面的封装模块，还请移步jqueryMobile官网。