jquery mobile 入门2 （组件2）

                                                        jquery mobile   入门2

二 . 组件2

1. 列表视图

jQuery Mobile中的列表视图是标准的HTML 列表; 有序(ol) 和 无序(ul)，应用方法就是在ul或ol标签中添加data-role="listview"属性。

 
 
<ol data-role="listview">
  <li><a href="#">列表项m</a></li>
</ol>
<ul data-role="listview">
  <li><a href="#">列表项</a></li>
</ul>

　　指定列表分割，给列表项

• 元素添加 data-role="list-divider" 属性即可：

    
    
  <ul data-role="listview">
    <li data-role="list-divider">欧洲</li>
    <li><a href="#">法国</a></li>
    <li><a href="#">德国</a></li>
  </ul>

  　　 还可以通过ul或者ol的data-autodividers="true" 属性设置可以配置为自动生成的项目的分隔:

    
    
  <ul data-role="listview" data-autodividers="true">
    <li><a href="#">Adele</a></li>
    <li><a href="#">Agnes</a></li>
    <li><a href="#">Billy</a></li>
    <li><a href="#">Calvin</a></li>
  </ul>
    
    
  
     
      
    
    

• data-autodividers="true" ： 该功能默认取第一个字符做分隔。
  

  
  

  2.  网格

  jQuery Mobile 提供了一套基于CSS的分列布局。可以通过对class属性设置进行对网格布局。要使用网格需要添加class='ui-grid-solo|a|b|c|d'，其中solo|a|b|c|d分别对应了以下的列数：ui-block-a(一列）、ui-block-a|b(两列)、ui-block-a|b|c(三列)、ui-block-a|b|c|d(四列)、ui-block-a|b|c|d|e(五列)。即class 为 ui-grid-b（三列布局），则必须添加 ui-block-a、ui-block-b 和 ui-block-c 的三个子元素。

  如下代码是一个三列布局。

    
    
  <p>三列布局:</p>
  <div class="ui-grid-b">
      <div class="ui-block-a" style="border:1px solid black;"><span>一些文本</span></div>
      <div class="ui-block-b" style="border:1px solid black;"><span>一些文本</span></div>
      <div class="ui-block-c" style="border:1px solid black;"><span>一些文本</span></div>
  </div>

  
  

  3.滑动条

  
  

  滑动条我们可以通过 < input type="range" >来创建，使用以下属性来设置：

  max - 规定允许的最大值
  min - 规定允许的最小值
  step - 规定合法的数字间隔
  value - 规定默认值
  

  如果想在按钮中显示进度的值可以添加 data-show-value="true" 属性:

    
    
  <input type="range" name="points" id="points" value="50" min="0" max="100" data-show-value="true">

  如果想在滑动按钮上显示进度（类似一个小弹窗）可以使用 data-popup-enabled="true" 属性:

    
    
  <input type="range" id="points" value="50" min="0" max="100" data-popup-enabled="true">

  
  

  4. 拨动开关

  
  

  拨动开关通常用于 on/off 或 true/false 按钮，可以使用 < input type="checkbox" > 元素并指定 data-role 为 "flipswitch" 来创建开关。默认情况下，开关切换的文本为 "On" 和 "Off"。可以使用 data-on-text 和 data-off-text 属性来修改它。

    
    
  <label>切换开关:</label>
       <input type="checkbox" data-role="flipswitch" name="switch" id="switch" data-on-text="True" data-off-text="False">

  
  

  
  

  5. 页面切换

  jQuery Mobile 提供了各种页面切换到下一个页面的效果。使用data-transition属性来进行切换。data-transition的属性有：

  fade、flip、flop、pop、slide、slidefade、slideup、slidedown、turn、none。

    
    
  <a href="#anylink" data-transition="slide">切换到第二个页面</a>

  
  

  
  

  6.dialog

  对话框是用于显示页面信息显示或者表单信息的输入。在链接中添加data-rel="dialog"让用户点击链接时弹出对话框。

    
    
  <div data-role="page" id="pageone">
    <div data-role="main" class="ui-content">
      <a href="#pagetwo" data-rel="dialog">弹出对话框</a>
    </div>
  </div>
  <div data-role="page"  id="pagetwo">
    <div data-role="main" class="ui-content">
      <a href="#pageone">跳转到第一个页面</a>
    </div>
  </div>