easy Html5 - Jquery Mobile之ToolBars(Navigation and Persistent Bars)

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

 

簡介

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

 

Navigation Bar

導航欄在應用或站點中主要是為了保持一致的導航風格，同時可以讓用戶知道當前處於哪個頻道下，而且可以方便的導航到其他的頻道；Jquery Mobile 提供了一個基本的導航欄組件，每一行可以最多放5個按鈕，通常在頂部或者底部；導航欄的代碼為一個ul列表，被一個div包裹，這個容器需要有data-role="navbar"屬性；要設定某一個鏈接為活動（selected）狀態，只需要給鏈接增加class="ui-btn-active" 即可；

<div data-role="navbar">
                <ul>
                    <li><a href="#headerNavPage" class="ui-btn-active ui-state-persist">Bar@Header</a></li>
                    <li><a href="#footerNavPage">Bar@Footer</a></li>
                    <li><a href="#persistentBar">PersistentBar</a></li>
                </ul>
            </div><!-- /navbar -->

 

 

導航欄內每項的寬度都被設定為相同的，所以n個按鈕的寬度為瀏覽器寬度 1/n，但這是在5項以內的情況。如果導航欄多於5項，導航欄將自動表現為多行，即換行顯示；至於為什么多余5行就換行，這個是因為在mobile app上，當同一行顯示5個后，各自的寬度為瀏覽器寬度的1/5，這時候內容則非常有限；像一些著名的ios應用viddy等，頁下導航都控制在5個；還有國產的淘寶、當當、京東等，都只有5個；如果你一行想放5個以上，你去試試這些應用，如果下面有6個導航會是怎樣  :)

Header里添加導航欄

導航欄放的最多的位置就是header和Footer了；當然往Header和Footer里放導航欄也非常容易，只需要在Header或者Footer的div的title后添加帶有data-role=”navbar”的導航欄就可以了

 

 <div data-role="header"  data-position="fixed">
            <a href="../index.htm" data-icon="back">back</a>
            <h1>Easy Hotel</h1>
            <a href="../index.htm" class="ui-btn-right" data-icon="check">Save</a>
            <div data-role="navbar">
                <ul>
                    <li><a href="#1NavBar">1 NavBar</a></li>
                    <li><a href="#2NavBar">2 NavBar</a></li>
                   
                    <li><a href="#4NavBar">4 NavBar</a></li>
                    <li><a href="#5NavBar">5 NavBar</a></li>
                    <li><a href="#6NavBar">5+ NavBar</a></li>
                </ul>
            </div><!-- /navbar -->
            
        </div><!-- /header -->

 

Footer里添加導航欄

在footer里添加導航欄和在Header里添加導航欄一樣；直接把導航欄的容器添加到footer的容器里就可以了；

 <div data-role="footer" data-id="footnavigate" data-position="fixed">        
           <div data-role="navbar">
                <ul>
                    <li><a href="#headerNavPage" class="ui-btn-active ui-state-persist">Bar@Header</a></li>
                    <li><a href="#footerNavPage">Bar@Footer</a></li>
                    <li><a href="#persistentBar">PersistentBar</a></li>
                </ul>
            </div><!-- /navbar -->
        </div><!-- /footer -->

持久導航欄

持久導航欄是不論你導航到哪個子頁面，導航欄持久一直都在固定的位置；即使切換了頁面；jquery mobile實現方式，是給各個頁面footer(一般會把持久導航放footer里，當然也可以放header，但是header作為各個頁頭，一般文案會變化的)；添加相同的data-id屬性，同時把各個頁面的footer固定(data-position=”fixed”)，然后把導航欄放footer里，同時在各個頁面設置分別設置當前激活的導航項，要設置當前激活(selected)導航項只需要給導航項的鏈接a添加ui-btn-active ui-state-persist樣式就可以了；如案例中，從Bar@Header中點擊鏈接導航到Bar@Footer，整個下面的導航欄會一直存在，同時Bar@Footer也會被激活；然后在各個子頁面里分別實現就可以了；

 <!--headerNavPage-->
        <div data-role="footer" data-id="footnavigate" data-position="fixed">        
           <div data-role="navbar">
                <ul>
                    <li><a href="#headerNavPage" class="ui-btn-active ui-state-persist">Bar@Header</a></li>
                    <li><a href="#footerNavPage">Bar@Footer</a></li>
                    <li><a href="#persistentBar">PersistentBar</a></li>
                </ul>
            </div><!-- /navbar -->
        </div><!-- /footer -->

  <!--footerNavPage-->
      <div data-role="footer" data-id="footnavigate" data-position="fixed">        
           <div data-role="navbar">
                <ul>
                    <li><a href="#headerNavPage">Bar@Header</a></li>
                    <li><a href="#footerNavPage" class="ui-btn-active ui-state-persist">Bar@Footer</a></li>
                    <li><a href="#persistentBar">PersistentBar</a></li>
                </ul>
            </div><!-- /navbar -->
        </div><!-- /footer -->

  <!--persistentBar-->
        <div data-role="footer" data-position="fixed">        
           <div data-role="navbar">
                <ul>
                    <li><a href="#headerNavPage">Bar@Header</a></li>
                    <li><a href="#footerNavPage">Bar@Footer</a></li>
                    <li><a href="#persistentBar" class="ui-btn-active ui-state-persist">PersistentBar</a></li>
                </ul>
            </div><!-- /navbar -->
        </div>

 

實例代碼