jQuery Mobile 工具栏

 页眉栏：通常包含标题/Logo，或一到两个按钮

               2个按钮时，会自动分列两侧

           1个按钮时，会默认位于左侧

           会自动居中

           可设定按钮位置：class="ui-btn-right"

               e.g. 

               <div data-role="header">

                    <h1>主页</h1>   //自动居中

                   <a href="#"  data-role="button"  class="ui-btn-right">搜索</a>

            </div>

 页脚栏：具伸缩性，能包含所需数量的按钮

            居中： class="ui-btn"

            可以在页脚中组合按钮：data-role="controlgroup"  data-type="horizontal |vertical"

            e.g.

            <div data-role="footer"  class="ui-btn"> 

                    <div data-role="controlgroup"  data-type="horizontal">

                          <a href="#"  data-role="button"  data-icon="plus" >button1</a>

                          <a href="#"  data-role="button"  data-icon="minus" >button2</a> 

                          <a href="#"  data-role="button">button3</a>

                    </div>

            </div>

  定位页眉和页脚：（三种方式）

        inline：位于行内（默认） data-position="inline"

        fixed：固定置于项部和底部  data-position="fixed"   （触摸屏幕可切换页眉页脚的隐藏和显示）

        fullscreen：与fixed类似，同时，页眉页脚可呈透明显示   （触摸屏幕可切换页眉页脚的隐藏和显示） －对于照片，图像和视频非常理想

                          data-position="fixed"  data-fullscreen="true"

        e.g.

        <div  data-role="header"  data-position="fixed"  data-fullscreen="true"></div>

        <div  data-role="footer"  data-position="fixed"  data-fullscreen="true"></div>