Jqery Mobile 简单了解

1.对话框：

1.如果给一个指向新页面的链接添加一个data-rel="dialog"属性，就可以任何一个指向的页面一个对话框的形式显示出来。

JQmobile会自动给新页面一些样式。

2.转场效果：

1.首先知道转场有几种效果，分别是什么。

2.一般情况下，Jqmobile会自动给后退按钮默认的转场效果，但是如果想重新设置一个后退按钮的转场效果，就需要给按钮      一个新属性：data-transition:"转场名称";

<a href="#" data-role="button" data-transition="pop" data-inline="true">点击按钮转场</a>

3.按钮三种样式:

1.普通的button按钮：

2.带有图标的按钮：buttom delete图标

3.内链按钮：几个按钮放在一个水平线上，就需要有一个容器来承载了，容器的属性添加水平属性:data-inline="true";

4.组按钮：将按钮组合在一起，向导航栏一样的形式。它也需要一个容器div来承载他们，给一个容器添加属性：data- role="controlgroup",这是一个代表组的 属性，当然如果这样的话，显示出来的组是默认垂直的，如果希望是在水平线上的话，就给容器属性添加一个属性：data-type="horizontal";

4.网格布局：

1.因为屏幕通常都比较窄，所以使用多栏布局的方法在移动设备上不是推荐的方法。但是总有时候你会想要把一些小的元素并 排放置（比如按钮，或导航标签)

Jquery Mobile框架提供了一种简单的方法构建基于css的分栏布局，叫做ui-grid

Jquery Mobile提供了两种预设的配置布局：两列布局（class 含有 ui-grid-a）和三列布局 （class 含有 ui-grid-b） —几乎可满足需要列布局的任何情况。网格是100%宽的，不可见（没有背景或边框），也没有padding和margin，所以它们不 会影响内部元素的样式

5.可折叠的容器：

1.可折叠的内容，就是头部有+ 号，-号的组件；

2.要创建一个可折叠的区块，先创建一个容器，然后给容器添加data-role="collspsible"s;

3.容器内直接的标题（h1-h6）子节点，JQmobile会将之表现为可点击的按钮，并在左侧添加"+"按钮，表示是可以展开的；

 <div  data-role="collapsible-set">

<div  data-role="collapsible" data-collapsed="false">

<h3>请选择1</h3>

<p>I'm the collapsible set content for section B.</p>

</div>     

<div data-role="collapsible"> 

<h3>请选择2</h3>

<p>I'm the collapsible set content for section B.</p>

</div>

</div> 

6.创建表单元素：

1.文本域，搜索框，滑杆，开关，单选按钮，复选按钮，列表菜单，

2.代码：

 <div data-role="fieldcontain">

      <label for="search">Search Input:</label>

     <input type="search" name="password" id="search" value="" />

  </div>

注意： for  与 Id 的关系。

type类型：

搜索框：search

滑杆：range

开关：

单选按钮：

<div data-role="fieldcontain">

<fieldset data-role="controlgroup">

<legend>Agree to the terms:</legend>

<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />

<label for="checkbox-1">I agree</label>

 </fieldset>

</div>

复选按钮：checkbox

列表菜单：

<div  data-role="fieldcontain">

　  <label for="select-choice-1" class="select">Choose shipping method:</label>

　  <select name="select-choice-1" id="select-choice-1">

　　  <option value="standard">Standard: 7 day</option>

　　  <option value="rush">Rush: 3 days</option>

　　  <option value="express">Express: next day</option>

　　  <option value="overnight">Overnight</option>

　  </select>

</div>

7.列表ListView形式：

    <!---可折叠的 区块--->

<div data-role="collapsible-set">

<div data-role="collapsible">

<h1>请选择城市</h1>

<p>上海市</p>

</div>

<div data-role="collapsible">

<h1>请选择街道</h1>

<p>龙阳路</p>

</div>

</div>

<!---列表菜单--->

<div data-role="fieldcontain">

<label for="select">选择：</label>

<select name="selec" id="select">

<option value="11">北京市</option>

<option value="22">上海市</option>

<option value="33">南京市</option>

</select>

</div>

<!---列表--->

<div >

<ul data-role="listview" class="ui-listview" style="margin:0 0 8px 0 !important; padding:0;" >

<li>

<a href="#">

<h1>你好</h1>

    <p>你好世界</p>

</a>

    

</li>

</ul>

<ul data-role="listview" style="margin:0 0 8px 0!important; padding:0;" >

<li>

<a href="#">

<h1>你好</h1>

    <p>你好世界</p>

</a>

    

</li>

</ul>

</div>