jQueryMobile（三）

五】、jQueryMobile工具栏

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

//代码：

 <!--在头部工具栏添加主页和搜索-->

 <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'

巴特西

jQueryMobile（三）

最新文章

热门文章