2015年9月8日

jQuery mobile

Widgets-button

1.<button>BTN1</button>

2.<input type="button" value="BTN2">

3.<a href="#" class="ui-btn ui-shadow" >BTN3</a>

三者效果一样，一般建议使用<a>标签，表单提交可以 用另外两者。

jQuery Mobile 中的按钮会自动获得样式

• data-inline="true"：两个或多个按钮并排显示。

• data-role="controlgroup" 属性与 data-type="horizontal|vertical" 一同使用，以规定水平或垂直地组合.

• data-rel="back":创建后退按钮。

• data-corners: true/false规定按钮是否有圆角。

• data-mini:true/false规定是否是小型按钮。

• data-shadow:true/false规定按钮是否有阴影。

checkboxradio、collapsible

• 多选按钮

  <label>
   <input type="checkbox" name="cb0">Apple
  </label>

• 单选按钮

  <label>
   <input type="checkbox" name="cb0">Apple
  </label>

• 按钮横向排列

 <fieldset data-role="controlgroup"data-type="horizontal"  ></fieldset>

• 对话框收缩与展开

<--默认是展开，没有主题边框效果-->
<div data-role="collapsible" data-collapsed="false" data-content-theme="false">
    <--收缩栏标题。-->
    <h4>header</h4> 
    <--内容-->
    <p>我是展开了吗？</p>
    <--列表项-->
    <ul data-role="listview">
      <li>
         <a href="#">item one</a>                    
         <li><a href="#">item 1</a></li>
         <li><a href="#">item 2</a></li>
    </ul> 
</div>

Grid

一、
    <div class="ui-grid-d">
        <div class="ui-block-a" >
            <div class="ui-bar ui-bar-a">aa</div>
        </div>
        <div class="ui-block-b">
            <div class="ui-bar ui-bar-a">bb</div>
        </div>
        <div class="ui-block-c">
            <div class="ui-bar ui-bar-a">cc</div>
        </div>
        <div class="ui-block-d">
            <div class="ui-bar ui-bar-a">dd</div>
        </div>
        <div class="ui-block-e">
            <div class="ui-bar ui-bar-a">ee</div>
        </div>
    </div>


二、
     <div class="ui-grid-solo">
        <div class="ui-block-a">
            <input type="button" data-theme="b" value="Button">
        </div>
    </div>

ui-grid-a/b/c/d：表示2/3/4/5列。 ui-grid-solo：表示一列。 ui-block-a/b/c/d/e：表示第1/2/3/4/5列。 ui-bar-a/b：表示主题一、二。 data-theme="a/b":同上。

listview

一、
<form>
    <input id="autoinput" datatype="search">
</form>
<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-input="#autoinput">
        <li><a href="#">113</a></li>
        <li><a href="#">224</a></li>
        <li><a href="#">333</a></li>
        <li><a href="#">dsd</a></li>
        <li><a href="#">vsd</a></li>
        <li><a href="#">rv</a></li>
    </ul>

二、
 <ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
        <li><a href="#">113</a></li>
        <li><a href="#">1122w3</a></li>
        <li><a href="#">224</a></li>
        <li><a href="#">333</a></li>
        <li><a href="#">dsd</a></li>
        <li><a href="#">vsd</a></li>
        <li><a href="#">rv</a></li>
    </ul>

data-filter="true" data-filter-reveal="true" :数据过滤，默认隐藏列表。 data-autodividers="true"：字母索引。 data-inset="true"：为列表添加圆角和外边距。

navbar

<div data-role="header">
        <div data-role="navbar" >
            <ul data-theme="b">
                <li><a href="#" data-icon="gear"  class="ui-btn-active" >11</a> </li>
                <li><a href="#" data-icon="grid" data-theme="b">22</a> </li>
                <li><a href="#" data-icon="star">33</a> </li>
                <li><a href="#" data-icon="gear">44</a> </li>
            </ul>
        </div>
    </div>

必须有data-role="header"才有data-theme="b"效果。

popup

<a href="#pp" class="ui-btn" data-rel="popup">弹出窗口</a>
    <div  data-role="popup" id="pp">
        <p>弹出窗口的内容</p>
</div>

select

 <div class="ui-field-contain">
        <select name="select-native-1" id="select-native-1" data-iconpos="left">
            <option value="1">11</option>
            <option value="2" disabled="disabled">22</option>
            <option value="3">33</option>
            <option value="4">44</option>
            <option value="5">55</option>
        </select>
    </div>

disabled="disabled"：不能被选中。