jQueryMobile（三）

五】、jQueryMobile工具栏

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

<div data-role='header' data-position='inline'></div>
<div data-role='footer' data-position='inline'></div>

//代码：

<!--在头部工具栏添加主页和搜索-->
<div data-role="page">
    <div data-role="header" data-position="fixed" data-fullscreen="true">
        <a href="javascript:void(0)" class="ui-btn ui-icon-home ui-btn-icon-left">主页</a>
        <h1>header</h1>
        <a href="javascript:void(0)" class="ui-btn ui-icon-search ui-btn-icon-left">搜索</a>
    </div>
    <div data-role="content">
        content goes there

    </div>
    <div data-role="footer" style="text-align: center;" data-position="fixed" data-fullscreen="true">
        <!--<h1>footer</h1>-->
        <div data-role="controlgroup" data-type="horizontal">
            <a href="javascript:void(0)" class="ui-btn ui-icon-plus ui-btn-icon-left">关注我</a>
            <a href="javascript:void(0)" class="ui-btn ui-icon-plus ui-btn-icon-left">关注我</a>
            <a href="javascript:void(0)" class="ui-btn ui-icon-plus ui-btn-icon-left">关注我</a>
        </div>
    </div>
</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'