jQuery Mobile 应用笔记

1．    页面结构：
头部依序加载
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.2.js"></script>
 
   页面基础代码：
   <div data-role="page">  <!-- 页面主体区块 -->

      <div data-role="header">  <!-- 头部区域 -->
        <h1>页面头部</h1>
      </div>
 
      <div data-role="content">  <!-- 页面内容区域 -->
        <p>页面内容</p>
      </div>
 
      <div data-role="footer">  <!-- 页脚区域 -->
        <h4>页脚</h4>
      </div>

</div>  <!-- 页面主题区块 -->

默认主题为黑色
data-theme="a"
a：黑色
b：蓝色
c：灰色
d：灰白色
e：金黄色

2．    页面设置内链接锚点实现主体区块切换
   <div data-role="page" id=”page1”>
      …….
      <a href=”# page2”>区域2</a>
      ……..
</div>
   <div data-role="page" id=”page1”>
      …….
      <a href=”# page1”>区域1</a>
      ……..
</div>


3．    外部页面切换
<a href=”About.html”>我的介绍</a>  <!-- 当前页面框架加载页面 -->

<a href=”About.html” rel="external">我的介绍</a> <!—脱离当前页面框架，独自打开页面 -->

4．    返回上一页链接、按钮
<p> <a href="#" data-rel="back">返回首页</a> </p>

<div data-role="page" data-add-back-btn="true" data-back-btn-text="返回按钮文字">

5．    对话框
   <a href="./About.html" data-rel="dialog" data-transition="pop">对话框</a>
   <!-- 当前页面框架加载对话框页面 -->
   
对话框自身已有关闭按钮，也可手动增加关闭按钮
<a href="#" data-role="button" data-rel="back">关闭</a>
   
6．    头部栏按钮导航
   <div data-role="header" data-position="inline">
      <a href="#" data-add-back-btn="false" data-icon="arrow-l">上一页</a>
      <h1>页面头部</h1>
      <a href="#page2" data-icon="arrow-r">下一页</a>
   </div>
   
   按钮链接可增加class="ui-btn-right" class="ui-btn-left" 进行左/右浮动定位

7．    导航栏   
    <div data-role="navbar">
      <ul>
        <li><a href="#" class="ui-btn-active">北京</a></li>
        <li><a href="#" data-icon="info">上海</a></li>
        <li><a href="#" data-icon="home">广州</a></li>
        <li><a href="#">重庆</a></li>
      </ul>
</div>

8．    按钮图标
data-icon=""

左箭头 data-icon="arrow-l"     右箭头 data-icon="arrow-r"
上箭头 data-icon="arrow-u"   下箭头 data-icon="arrow-d"
删除 data-icon="delete"         添加 data-icon="Plus"
减少 data-icon="minus"         检查 data-icon="Check"
齿轮 data-icon="gear"           前进 data-icon="Forward"

后退 data-icon="Back"           网格 data-icon="Grid"
五角?data-icon="Star"           警告 data-icon="Alert"

信息 data-icon="info"            首页 data-icon="home"
搜索 data-icon="Search"

9．导航栏自定义按钮图标位置
   <div data-role="navbar" data-iconpos="left">  <!-- "left" / "right" / "top" / "bottom" -->

10．页脚尾部栏
    <div data-role="controlgroup" data-type="horizontal">
       <a href="#" data-role="button">公司主页</a>
       <a href="#" data-role="button">联系我们</a>
</div>

11．内容格式化
    <div class="ui-grid-a">
      <div class="ui-block-a">
        <div class="ui-bar ui-bar-c">A</div>
      </div>
      <div class="ui-block-b">
        <div class="ui-bar ui-bar-c">B</div>
      </div>
    </div>
    
12．折叠区块
    <div data-role="collapsible" data-collapsed="true">
        <h3>点击查看更多</h3>  <!—标题在h1 – h6之间选择 -->
        <p>一位优秀的Web端工程师，不仅要有过硬的技术，而且要有执着、沉稳的品质。</p>
     </div>
折叠区块可以嵌套使用
<div data-role="collapsible" data-collapsed="true">
        <h3>点击查看更多</h3>  <!—标题在h1 – h6之间选择 -->
        <p>第一层内容</p>
        <div data-role="collapsible" data-collapsed="true">
          <h3>点击查看更多</h3>  <!—标题在h1 – h6之间选择 -->
          <p>第二层内容</p>
          <div data-role="collapsible" data-collapsed="true">
            <h3>点击查看更多</h3>  <!—标题在h1 – h6之间选择 -->
             <p>第三层内容</p>
           </div>
        </div>
    </div>

    折叠区块可以组合使用
<div data-role="collapsible-set">

<div data-role="collapsible" data-collapsed="true">
        <h3>图书</h3>
        <p><a href="#">文艺</a></p>
        <p><a href="#">少儿</a></p>
        <p><a href="#">社科</a></p>
</div>

<div data-role="collapsible" data-collapsed="true">
        <h3>音乐</h3>
        <p><a href="#">流行</a></p>
        <p><a href="#">民族</a></p>
        <p><a href="#">通俗</a></p>
</div>

<div data-role="collapsible" data-collapsed="true">
         <h3>影视</h3>
         <p><a href="#">欧美</a></p>
        <p><a href="#">怀旧</a></p>
        <p><a href="#">娱乐</a></p>
</div>

</div>

13．按钮
① <a href="#" data-role="button" class="ui-btn-active">常规按钮</a>
② <input type="button" value="确定" /> <!-- jQuery Mobile自动渲染 -->

<a href="#" data-role="button" data-inline="true">常规按钮</a>
<a href="#" data-role="button" data-inline="true">常规按钮</a>  <!—同一行排列 -->

14．按钮组
    <!-- 纵向排列 -->
    <div data-role="controlgroup">
      <a href="#" data-role="button" data-icon="check" class="ui-btn-active">确定</a>
      <a href="#" data-role="button" data-icon="delete">取消</a>
</div>

<!—横向排列 -->
<div data-role="controlgroup" data-type="horizontal">
   <a href="#" data-role="button" data-icon="check" class="ui-btn-active">确定</a>
  <a href="#" data-role="button" data-icon="delete">取消</a>
</div>

15．文本框
    <!—根据文本框类型type 自动渲染 -->
    搜索：<input type="search" value="" />
    姓名：<input type="text" value="" />
年龄：<input type="number" value="0"/>

16．滑动块
  <input type="text" id="age" />
<input type="range" id="txtR" value="0" min="0" max="50" onchange="$(‘#age’).val(this.value)" />

17．切换开关
    <select data-role="slider" onchange="if (this.value=='1') alert('开');else alert('关')">
          <option value="1">开</option>
        <option value="0">关</option>
    </select>

18．单选/复选按钮组
    <fieldset data-role="controlgroup" data-type="horizontal">
       <input type="radio" name="rdoA" id="rdo1" value="1" checked="checked" />
         <label for="rdo1">A</label>
         <input type="radio" name="rdoA" id="rdo2" value="2" />
         <label for="rdo2">B</label>
         <input type="radio" name="rdoA" id="rdo3" value="3" />
         <label for="rdo3">C</label>
</fieldset>

19．选择菜单
   <!-- data-type="horizontal" 横向排列 -->
   <!-- data-native-menu="false" 渲染弹出框选项 -->
   <!-- multiple="true" 多项选择 -->

<fieldset data-role="controlgroup" data-type="horizontal">
         <select name="selY" id="selY" data-native-menu="false">
            <option>年份</option>
            <option value="2013">2013</option>
            <option value="2014">2014</option>
        </select>
        <select name="selM" id="selM" data-native-menu="false" multiple="true">
            <option>月份</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
        </select>
</fieldset>

20．列表：
    <ul data-role="listview">
      <li><a href="#">图书</a></li>
      <li><a href="#">音乐</a></li>
    </ul>
    
    <li data-icon="false"> <!-- 可取消列表项中的箭头 -->

    嵌套列表：
    <ul data-role="listview">
　    <li>
　      <h3>图书</h3>
         <p>一本好书，就是一个良师益友。</p>
　　    <ul>
　　       <li><a href="#">计算机</a></li>
　　       <li><a href="#">社科</a></li>
　　    </ul>
　    </li>
　    <li>
　      <h3>音乐</h3>
         <p>好的音乐可以陶冶人的情操。</p>
　　    <ul>
　　       <li><a href="#">流行</a></li>
　　       <li><a href="#">通俗</a></li>
　　    </ul>
　    </li>
    </ul>

    有序列表：
    <ol data-role="listview" start="5" type="a">
      <li><a href="#">计算机</a></li>
      <li><a href="#">文艺</a></li>
      <li><a href="#">社科</a></li>
    </ol>

21．悬浮方式固定头部栏和尾部栏
<div data-role="header" data-position="fixed">
</div>

官网：http://jquerymobile.com/

中文API站点：http://www.jqmapi.com/