jQuery Mobile 学习随笔

一、链接切换（page-page，html-html）

1）是否通过AJAX加载页面（默认为true）：data-ajax="true/fasle"

2）反转过渡动画：data-direction="reverse"

例：<a href="#dialog" data-transition="slide" data-direction="reserse" >从左向右滑（与slide相反）</a>

3）设置目标页面为对话框：data-rel="dialog"

例：<a href="#dialog" data-rel="dialog">转到dialog，目标页面显示为dialog。</a>

4）设置返回上一页：data-rel="back"

例：<a href="javascript:void(0);" data-rel="back" ><img src="../img/backbutton.png"></a>

5）HTML转另一HTML时，添加：data-rel="external"

例：<a href="test.html" rel="external">转另一HTML</a>

二、button设置

1）设置button（默认为屏幕宽度）：data-role="button" 

2）设置button宽度符合文本内容：data-inline="true" 

3）取消button圆角：data-corners="false"

例：<a href="#pageone" data-role="button" data-inline="true" data-corners="false" >同文本宽的直角按钮</a>

4）取消阴影：data-shadow="false"

5）mini尺寸：data-inline="true"

例：<a href="#pageone" data-role="button" data-shadow="false" data-mini="true" >无阴影的mini按钮</a>

6）选中样式：class="ui-btn-active"，保持选中状态：ui-state-persist

例：<a href="#" class="ui-btn-active ui-state-persist“>保持选中状态</a>

三、分组（链接button/单选/复选/菜单）

1）分组：data-role="controlgroup"

例：<div data-role="controlgroup" data-type="vertical" >
      <a href="#" data-role="button">按钮 1</a>
      <a href="#" data-role="button">按钮 2</a>
    </div>

2）在分组的基础上添加。垂直（默认）：data-type="vertical"；水平：data-type="horizontal" 

例：<div data-role="controlgroup" data-type="horizontal">
      <a href="#" data-role="button">按钮 1</a>
      <a href="#" data-role="button">按钮 2</a>
    </div>

四、button图标及图标位置

1）图标：data-icon="?"

<a href="#" data-role="button" data-icon="arrow-l">左箭头图标</a>
<a href="#" data-role="button" data-icon="arrow-r">右箭头图标</a>
<a href="#" data-role="button" data-icon="arrow-u">上箭头图标</a>
<a href="#" data-role="button" data-icon="arrow-d">下箭头图标</a>
<a href="#" data-role="button" data-icon="plus"">加号图标</a>
<a href="#" data-role="button" data-icon="minus">减号图标</a>
<a href="#" data-role="button" data-icon="delete">删除图标</a>
<a href="#" data-role="button" data-icon="check">检查图标</a>
<a href="#" data-role="button" data-icon="home">首页图标</a>
<a href="#" data-role="button" data-icon="info">信息图标</a>
<a href="#" data-role="button" data-icon="back">后退图标</a>
<a href="#" data-role="button" data-icon="forward">向前图标</a>
<a href="#" data-role="button" data-icon="refresh">刷新图标</a>
<a href="#" data-role="button" data-icon="grid">网格图标</a>
<a href="#" data-role="button" data-icon="gear">齿轮图标</a>
<a href="#" data-role="button" data-icon="search">搜索图标</a>
<a href="#" data-role="button" data-icon="star">星形图标</a>
<a href="#" data-role="button" data-icon="alert">提醒图标</a>

2）图标位置为：左：data-iconpos="left" ，右：data-iconpos="right" ，上：data-iconpos="top" ，下：data-iconpos="bottom" ，无文字：data-iconpos="notext"

五、header和footer

1）不固定（默认）：data-position="inline"

2）固定（点击内容消失）：data-position="fixed"

3）固定（点击内容不消失）：data-position="fixed" data-tap-toggle="false"

3）覆盖内容：data-position="fixed" data-fullscreen="true"

六、navbar导航栏

1）添加navbar：data-role="navbar"

2）导航栏中添加按钮分组

七、可折叠效果（默认折叠，可嵌套）

1）可折叠效果（必须要有标题标签）：data-role="collapsible"

2）取消默认折叠：data-collapsed="false"

例：<div data-role="collapsible" data-collapsed="false">
      <h1>点我折叠！标题标签必须有！</h1>
      <p>可折叠的内容。</p>
      <div data-role="collapsible" data-collapsed="false">
        <h1>点我折叠！标题标签必须有！</h1>
        <p>可折叠的内容。</p>
      </div>
    </div>

3）折叠组：data-role="collapsible-set"

4）标题标签去除圆角（默认为圆角）：data-inset="false"

例：<div data-role="collapsible-set" data-inset="false">
      <div data-role="collapsible">
        <h3>点击我 - 我是可折叠的！</h3>
        <p>我是可折叠的内容。</p>
      </div>
      <div data-role="collapsible">
        <h3>点击我 - 我是可折叠的！</h3>
        <p>我是可折叠的内容。</p>
      </div>
      <div data-role="collapsible">
        <h3>点击我 - 我是可折叠的！</h3>
        <p>可折叠的内容。</p>
      </div>
    </div>

5）折叠/展开图标：data-collapsed-icon="?" data-expanded-icon="?"

例：<div data-role="collapsible" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
      <h1>data-collapsed-icon 规定按钮的图标。</h1>
      <p>data-expanded-icon 规定内容被展开时按钮的图标。</p>
    </div>

6）折叠列表：

例：<div data-role="collapsible">
      <h1>A</h1>
      <ul data-role="listview">
        <li><a href="#">A1</a></li>
        <li><a href="#">A2</a></li>
      </ul>
    </div>
    <div data-role="collapsible">
      <h1>B</h1>
      <ul data-role="listview">
        <li><a href="#">B1</a></li>
        <li><a href="#">B2</a></li>
      </ul>
    </div>

7）折叠表单：

例：<form method="post" action="submit_form">
      <fieldset data-role="collapsible">
        <legend>点击我 - 我可以折叠！</legend>
          <p>喜爱的颜色：</p>
        <div data-role="controlgroup">
          <label for="red">红色</label>
          <input type="checkbox" name="favcolor" id="red" value="red">
          <label for="green">绿色</label>
          <input type="checkbox" name="favcolor" id="green" value="green">
        </div>	
      <input type="submit" data-inline="true" value="提交">
      </fieldset>
    </form>