上一章介紹了OnsenUI一些入門(mén)的知識(shí)以及它和AngularJS配合的初始化方法。這一章，咱們繼續(xù)對(duì)這塊內(nèi)容進(jìn)行介紹，對(duì)OnsenUI提供的組件進(jìn)行更進(jìn)一步的學(xué)習(xí)。

     咱們從手機(jī)應(yīng)用布局的最上面開(kāi)始。手機(jī)應(yīng)用布局最頂端，也就是經(jīng)常提到的工具欄，是幾乎每個(gè)應(yīng)用都會(huì)存在的組件。這么經(jīng)常出現(xiàn)的組件，OnsenUI當(dāng)然會(huì)提供。<ons-toolbar>，這個(gè)就是OnsenUI提供的組件，這個(gè)組件使用起來(lái)非常的簡(jiǎn)單，最常見(jiàn)的使用場(chǎng)景就是<ons-page>下。

     除了了解它使用的位置，還要再看它的基本布局。<ons-toolbar>組件分左中右三部分：

萬(wàn)碼學(xué)堂,電腦培訓(xùn),計(jì)算機(jī)培訓(xùn),Java培訓(xùn),JavaEE開(kāi)發(fā)培訓(xùn),青島軟件培訓(xùn),軟件工程師培訓(xùn)

    從上面的代碼能看出來(lái)，<ons-toolbar>的左中右三部分的劃分由三個(gè)內(nèi)置樣式類(lèi)實(shí)現(xiàn)。并且左邊的按鈕可以通過(guò)<ons-back-button>實(shí)現(xiàn)頁(yè)面返回上一頁(yè)功能，而不必指定路由完成該功能。另外，工具欄左中右三部分的內(nèi)容可以隨意定制，可以根據(jù)自己的項(xiàng)目需要，實(shí)現(xiàn)自己想要的任意效果。最后需要提醒大家的是，如果，你在左中右三個(gè)樣式類(lèi)div下直接書(shū)寫(xiě)文本數(shù)據(jù)，你會(huì)發(fā)現(xiàn)它的顯示效果不會(huì)是上下居中的效果，關(guān)于這個(gè)問(wèn)題咱們可以通過(guò)樣式來(lái)解決，但是，可以通過(guò)添加<ons-back-butto>或者<ons-toolbar-button>包裹你顯示的文本來(lái)解決。

    介紹完了工具欄，咱們?cè)賮?lái)說(shuō)一個(gè)在項(xiàng)目開(kāi)發(fā)過(guò)程中比較常用的組件—側(cè)邊欄，也有說(shuō)法是抽屜布局<ons-sliding-menu>。

    側(cè)邊欄的使用頻率還是相對(duì)來(lái)說(shuō)比較高的，大家經(jīng)常見(jiàn)到的側(cè)邊欄就應(yīng)該是在左邊。在OnsenUI中，側(cè)邊的實(shí)現(xiàn)非常簡(jiǎn)單，它已經(jīng)幫你集成了你想要實(shí)現(xiàn)的各種效果，你只需要了解其的各個(gè)屬性即可。

    根據(jù)側(cè)邊欄的顯示效果，大家應(yīng)該能想到它的組成應(yīng)該是兩部分，一部分是主頁(yè)面，另一部分應(yīng)該是側(cè)邊欄頁(yè)面。OnsenUI提供了兩種方式實(shí)現(xiàn)主頁(yè)面和側(cè)邊欄頁(yè)面的聲明。這里咱們直接介紹咱們以后再項(xiàng)目中會(huì)使用的方法：

萬(wàn)碼學(xué)堂,電腦培訓(xùn),計(jì)算機(jī)培訓(xùn),Java培訓(xùn),JavaEE開(kāi)發(fā)培訓(xùn),青島軟件培訓(xùn),軟件工程師培訓(xùn)

    大家應(yīng)該看到了，在<ons-sliding-menu>里，通過(guò)指定main-page和menu-page屬性就可以把主頁(yè)面和側(cè)邊欄頁(yè)面確定。除了上面寫(xiě)到的side屬性用來(lái)定義側(cè)邊欄的位置，側(cè)邊欄還有其他的屬性用來(lái)控制顯示效果。close-on-tap屬性用來(lái)定義通過(guò)點(diǎn)擊背景自動(dòng)關(guān)閉側(cè)邊欄。swipeable屬性用來(lái)定義側(cè)邊欄是否會(huì)響應(yīng)你的滑動(dòng)開(kāi)關(guān)側(cè)邊欄，當(dāng)然這個(gè)屬性需要配合另外兩個(gè)屬性才能有效果，第一個(gè)：swipe-target-width屬性用來(lái)定義側(cè)邊欄的顯示最大展開(kāi)寬度，第二個(gè)：max-slide-distance屬性用來(lái)定義在主頁(yè)面滑出側(cè)邊欄的最大滑動(dòng)邊距。最后給大家介篩一個(gè)與顯示動(dòng)畫(huà)效果相關(guān)的。相信大家見(jiàn)過(guò)的側(cè)邊欄應(yīng)該有多種形式，當(dāng)然，OnsenUI也提供了三種，可用值為reveal（默認(rèn)）push和overlay。大家看到名字應(yīng)該能想到是什么樣的顯示效果了，那還等什么呢，趕緊去試試吧！

    結(jié)尾咱們介紹一個(gè)和工具欄具有同等地位的組件，為什么要和工具欄組件比較呢？因?yàn)?，工具欄是顯示在頁(yè)面的頂端，而它顯示在頁(yè)面的底部。它就是大家應(yīng)該天天會(huì)接觸的<ons-tabbar>。

   選項(xiàng)卡欄由<ons-tabbar>組件和<ons-tab>組件組成。通常一個(gè)標(biāo)簽欄有三到五個(gè)項(xiàng)目，它們與圖標(biāo)和標(biāo)簽一起顯示。每個(gè)選項(xiàng)卡欄項(xiàng)目分配到不同的頁(yè)面。

要將選項(xiàng)卡欄放置到應(yīng)用中，請(qǐng)放置<ons-tabbar>元素。一個(gè)<ons-tabbar>元素只接受<ons-tab>的元素?cái)?shù)量。選項(xiàng)卡欄項(xiàng)目可以有一個(gè)icon屬性和一個(gè)label屬性。對(duì)于icon屬性，請(qǐng)指定<ons-icon>元素中使用的相同圖標(biāo)名稱(chēng)。示例代碼如下：

萬(wàn)碼學(xué)堂,電腦培訓(xùn),計(jì)算機(jī)培訓(xùn),Java培訓(xùn),JavaEE開(kāi)發(fā)培訓(xùn),青島軟件培訓(xùn),軟件工程師培訓(xùn)

    剛才咱們說(shuō)了，<ons-tabbar>是顯示在頁(yè)面的底部的。但是這種說(shuō)法不是絕對(duì)的，咱們可以通過(guò)修改標(biāo)簽欄的屬相，來(lái)修改它的顯示位置，這個(gè)屬性就是position，它的值默認(rèn)為bottom，你可以通過(guò)修改為top，讓你的標(biāo)簽欄顯示在頁(yè)面的頂部。關(guān)于標(biāo)簽欄里的布局設(shè)置，大家可以根據(jù)自己的需要，隨意調(diào)整。

    關(guān)于標(biāo)簽欄里的子項(xiàng)—<ons-tab>，可以通過(guò)指定page屬性，來(lái)實(shí)現(xiàn)點(diǎn)擊某一個(gè)子項(xiàng)的時(shí)候，跳轉(zhuǎn)到對(duì)應(yīng)頁(yè)面。并且active屬性可以設(shè)置哪一個(gè)子項(xiàng)默認(rèn)是激活狀態(tài)。

    今天咱們從一個(gè)頁(yè)面的頂部，中間主頁(yè)面，一直到底部標(biāo)簽欄，進(jìn)行了比較詳細(xì)的介紹，結(jié)合前一章項(xiàng)目的搭建?，F(xiàn)在的你就可以去試試我上面說(shuō)的這些組件了，希望你能發(fā)現(xiàn)更多的組件屬相，加油！