easy Html5 - Jquery Mobile之ToolBars(Header and Footer)

jquery 在web js框架上的風暴還在繼續卻也隨着移動終端走向了mobile；那麼jquery mobile到底包括些什麼呢

簡介
工具欄是在移動網站和應用中的頭部，尾部或者內容中的工具條；Jquery Mobile提供了一套標準的工具和導航欄的工具，能夠在絕大多數狀況下直接使用；頭部通常作網站或應用的標題，功能導航等，通常都是些文字或者按鈕；尾部是一個頁面的最下端，內容能夠根據具體應用須要來排版，也能夠放功能導航、各類連接等；內容中使用通常是做爲功能的展現，顯示內容同時附帶着功能；jquery mobile還提供了這些工具欄的一些特性即工具欄定位；經過設置工具欄定位，可使工具欄一直處於頭部或者底部，當滾動時，若是工具欄被滾動到屏幕以外，jquery mobile會自動動畫過分將工具條從新顯示到頭部或者底部；並且任什麼時候候，當點擊定位了的工具欄時，點擊屏幕會讓工具欄消失，再點擊時會從新顯示；固然還支持全屏的定位模式，當工具條被滾動到屏幕以外時，不會當即顯示滾動條，而是當點擊屏幕時，工具條會自動顯示在固定的位置上。

Header
1.頁面Header是一個data-role爲header的div，固然咱們能夠在這個div裏定義其餘任何內容，好比經常使用的後退按鈕等；

<div data-role="header" data-theme="c">
            <h1>Page Header</h1>
</div><!-- /header -->

2.通常在header裏添加的button不要太多，添加在header裏的按鈕帶有自動定位功能；

好比當添加一個按鈕時：

<div data-role="header" data-theme="c"  data-position="fixed">
           
            <h1>Page Header</h1>
           <!-- <a href="../index.htm" data-icon="back">back</a>-->
            <a href="../index.htm" data-icon="check">Save</a>

           <!-- <a href="../index.htm" class="ui-btn-left" data-icon="back">back1</a>
            <a href="../index.htm" data-icon="check">Save1</a>-->
        </div><!-- /header -->

添加兩個按鈕時：

<div data-role="header" data-theme="c"  data-position="fixed">
           
            <h1>Page Header</h1>
            <a href="../index.htm" data-icon="back">back</a>
            <a href="../index.htm" data-icon="check">Save</a>

           <!-- <a href="../index.htm" class="ui-btn-left" data-icon="back">back1</a>
            <a href="../index.htm" data-icon="check">Save1</a>-->
        </div><!-- /header -->

更多按鈕時：

<div data-role="header" data-theme="c"  data-position="fixed">
           
            <h1>Page Header</h1>
            <a href="../index.htm" data-icon="back">back</a>
            <a href="../index.htm" data-icon="check">Save</a>

            <a href="../index.htm" class="ui-btn-left" data-icon="back">back1</a>
            <a href="../index.htm" data-icon="check">Save1</a>
        </div><!-- /header -->

自動定位功能實際是當header內容之有一個按鈕時，會自動給這個按鈕添加ui-btn-left樣式，當有兩個時會給前面一個添加ui-btn-left樣式，給第二個自動添加ui-btn-right樣式；更多時，第三個到第n個應用ui-btn樣式；

固然咱們能夠本身設置按鈕的位置：

<div data-role="header" data-theme="c"  data-position="fixed">
           
            <h1>Page Header</h1>
          <!--  <a href="../index.htm" data-icon="back">back</a>-->
            <a href="../index.htm" class="ui-btn-right" data-icon="check">Save</a>

          <!-- <a href="../index.htm" class="ui-btn-left" data-icon="back">back1</a>
            <a href="../index.htm" data-icon="check">Save1</a>-->
        </div><!-- /header -->

固然畢竟header只是一個div，固然咱們能夠接着在這個div裏聽任何內容，只要你願意；

 

3.固定header的位置；

當咱們在作app時，頁面顯示更多內容，固然會首選滾動條，可是你們都會知道僅在中部內容上添加滾動條；那麼咱們的web站點或應用呢；咱們也但願在滾動內容時，頭和腳固定位置不動；這個jquery mobile經過header或者footer的data-position來設置的；默認的data-position是inline，即你不設置data-position屬性，或者設置data-posiiton=」inline」時，頁面頭和腳會跟隨者頁面的滾動條滾動；當設置data-posiiton爲fixed時，頭和腳就會懸浮起來，當內容滾動時，頭和腳也會跟着滾動，可是位置一直在最上方和最下方；

這個很簡單隻須要給header和footer添加data-position="fixed"就ok了

<div id="mainPage"  data-role="page" data-add-back-btn="true">

        <div data-role="header" data-theme="c"  data-position="fixed">
           
            <h1>Page Header</h1>
            <a href="../index.htm" data-icon="back">back</a>
            <a href="../index.htm" class="ui-btn-right" data-icon="check">Save</a>

          <!-- <a href="../index.htm" class="ui-btn-left" data-icon="back">back1</a>
            <a href="../index.htm" data-icon="check">Save1</a>-->
        </div><!-- /header -->

        <div data-role="content">    
            <h3>About us</h3>    
          In browsers that support CSS position: fixed (most desktop browsers, iOS5+, Android 2.2+, BlackBerry 6, and others), toolbars that use the "fixedtoolbar" plugin will be fixed to the top or bottom of the viewport, while the page content scrolls freely in between. In browsers that don't support fixed positioning, the toolbars will remain positioned in flow, at the top or bottom of the page.

            To enable this behavior on a header or footer, add the data-position="fixed" attribute to a jQuery Mobile header or footer element.

            Fullscreen fixed toolbars sit on top of the content at all times when they are visible, and unlike regular fixed toolbars, fullscreen toolbars do not fall back to static positioning when toggled. Instead they disappear from the screen entirely. Fullscreen toolbars are ideal for more immersive interfaces, like a photo viewer that is meant to fill the entire screen with the photo itself and no distractions.

To enable this option on a fixed header or footer, add the data-fullscreen attribute to the element.

        </div><!-- /content -->

        <div data-role="footer" data-position="fixed">
           
            <h4>Page Fotter</h4>
           
        </div><!-- /footer -->
    </div><!-- /page -->

Footer
1.footer和header同樣，也是一個帶有data-role=footer的div容器；擁有和header同樣的data-position屬性；這裏就不在多講了；

2.區別的是，footer不會有header那樣的裏面的按鈕會有自動定位功能；footer裏的內容會按照具體的css樣式來顯示內容；

3.固然咱們能夠再footer裏添加各類自定義的功能(由於它只是一個div麼 :) )；

4.有些狀況下咱們也會須要一個尾部欄爲全局導航元素，但願頁面切換時尾部欄也固定並顯示，創造一個持續的尾部欄能夠作到這一點；給尾部欄添加data-id屬性，而且在全部關聯的頁面的尾部欄設定一樣的data-id的值，就可使尾部欄在頁面切換時也固定並顯示；