jQueryMobile（三）

五】、jQueryMobile工具栏

头部、尾部的定位：
data-position='inline' 默认
data-position='fixed' 固定在头部/尾部
data-fullscreen='true' 固定在头部/尾部（要设置fixed），但是点击显示，再点击隐藏

//代码：

 1 <!--在头部工具栏添加主页和搜索-->
 2 <div data-role="page">
 3     <div data-role="header" data-position="fixed" data-fullscreen="true">
 4         <a href="javascript:void(0)" class="ui-btn ui-icon-home ui-btn-icon-left">主页</a>
 5         <h1>header</h1>
 6         <a href="javascript:void(0)" class="ui-btn ui-icon-search ui-btn-icon-left">搜索</a>
 7     </div>
 8     <div data-role="content">
 9         content goes there
10 
11     </div>
12     <div data-role="footer" style="text-align: center;" data-position="fixed" data-fullscreen="true">
13         <!--<h1>footer</h1>-->
14         <div data-role="controlgroup" data-type="horizontal">
15             <a href="javascript:void(0)" class="ui-btn ui-icon-plus ui-btn-icon-left">关注我</a>
16             <a href="javascript:void(0)" class="ui-btn ui-icon-plus ui-btn-icon-left">关注我</a>
17             <a href="javascript:void(0)" class="ui-btn ui-icon-plus ui-btn-icon-left">关注我</a>
18         </div>
19     </div>
20 </div>

六】、导航栏
创建导航栏
data-role='navbar'
添加导航栏中按钮被按下的状态：
class='ui-btn-active'
添加导航栏中按钮被按下的状态（持续的状态，返回后仍然被选中）:
class='ui-btn-active ui-state-persist'
定位导航栏中的图标：
data-iconpos='left'

七】、可折叠块
创建可折叠块：
data-role='collapsible'
h1>p>
h1是标题，p是可折叠的内容块

设置展开
data-collapsed='false'

可折叠块集合
data-role='collapsibleset'

改变可折叠块的样式，使其宽度撑满屏幕
data-inset='false'

变小：
data-mini='true'

改变可折叠块的图标：
data-collapsed-icon='arrow-d'
data-expanded-icon='arrow-u'