第十三篇、jQuery Mobile

API-->搜索data

0.page

　　data-transition="slide" // 页面切换效果

　　data-position="fixed" // 锁定头部或者尾部

0.1 data-role="header" 添加返回按钮或者文字

 

<style type="text/css">
            #home a{
                /*针对图片*/
                padding: 0px;
                background-color: rgba(0,0,0,0);
                border: none;
                
                /*针对文字*/
                margin: 5px auto;
                padding: 5px;
            }
            #home a:focus{
                box-shadow: none; /*去掉点击后有阴影的稳定*/
            }
            
        </style>



<div data-role="header" data-theme="a" data-position="fixed" id="home">
                <a href="#" data-shadow="false" role="button">文字</a>
                <h1>我是头部</h1>
            </div>

 

 

 

1.创建Button

　　<button>按钮</button>

　　<input type="button" value="按钮"/ >

　　<a href="#" class="ui-btn ui-shadow(阴影)">按钮</a> // 一排可以放多个按钮ui-btn-inline(横向排列)

　　<div data-role="controlgroup" data-type="horizontal（默认是垂直方向排列，指定后没有间距）">

　　　　<a href="#" class="ui-btn ui-shadow">按钮</a>

　　　　<a href="#" class="ui-btn ui-shadow">按钮</a>

　　　　<a href="#" class="ui-btn ui-shadow">按钮</a>

　　</div>

　　

2.checkboxradio(单选和复选框)

　　<label><input type="checkbox"/>苹果</label>

　　fieldset（创建一组排序）

　　单选框只能选择一个（例如性别的选择）

 

3.collapsible（可展开项）可以展开文字，列表

　　data-collapsed="false"

　　data-collapsed-theme="false"

 

4.Grid Layout 删格系统a-d(2~5列)

　　<div class="ui-grid-solo(只有一列)"></div>

 

5.listview

　　无序：

　　<ul data-role="listview">

　　　　<li>a</li>

　　</ul>

　　有序：ol

　　过滤的效果（搜索框）

 

6.navbar

7.popup(弹出窗口)

8.selectmenu

9.jQuery Mobile事件(滑动，长按等等)