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的值，就可以使尾部欄在頁面切換時也固定並顯示；

 

實例代碼