常用元件 / 導航欄及圖示

常用元件

筋斗雲框架有一些使用mui字首的CSS類，包括：

• mui-container H5應用容器，一般在HTML的body物件上設定。
• mui-page 邏輯頁，由框架自動設定
• mui-btn 按鈕，如果再疊加primary類，則表示顯示為預設按鈕。
• mui-dialog 對話方塊
• mui-menu 選單
• mui-navbar 導航欄

注意：筋斗雲框架不是UI元件庫，它只提供極為有限的一些元件，更豐富的UI元件請使用weui庫或其它第三方元件庫。

如果想調整框架中元件的顯示樣式，一般在app.css檔案中設定。

導航欄及圖示

[任務]

• 為H5應用底部導航欄上每項加上圖示，且點中與未點中顯示的圖示不一樣。
• 將小圖示拼合成大圖優化圖示資源載入。

導航欄用CSS類"mui-navbar"標識。

這是訂單列表頁中的例子，用導航欄和幾個列表構建一個多欄頁面， 當點選一項時，框架會自動為該項新增CSS類"active"，並只顯示"mui-linkto"屬性指向的元件。 被指向的元件僅限於當前邏輯頁面：

    <div class="mui-navbar">
        <a mui-linkto="#lst1">待服務</a>
        <a mui-linkto="#lst2">已完成</a>
    </div>

整個H5應用有一個底部導航，用id="footer"標識，放置在H5應用的主html檔案中，如：

<div id="footer">
    <a href="#home" mui-opt="ani:'none'">
        <span>首頁</span>
    </a>
    <a href="#orders" mui-opt="ani:'none'">
        <span>訂單</span>
    </a>
    <a href="#me" mui-opt="ani:'none'">
        <span>我</span>
    </a>
</div>

底部導航可自動顯示或隱藏，如果當前頁面是在導航項中的，導航欄就會自動顯示。 上面mui-opt屬性用來指定顯示頁面的引數（參考MUI.showPage的引數），"ani:'none'"表示不顯示動畫切頁效果。

如果要給導航中的每項加圖片，可以用CSS類icon:

<a href="#home" mui-opt="ani:'none'">
    <i class="icon icon-home"></i>
    <span>首頁</span>
</a>

定義一個CSS類icon-home為它指定圖示即可。 由於點選一項時會自動給該項加上active類，所以要想控制當前選中項或未選中項顯示不同的圖片，可以設定：

.icon-home {
    background-image: url(icon/24/home.png);
}
.active .icon-home {
    background-image: url(icon/24/home-active.png);
}

這些圖示一般建議放在server/icon目錄下，並最終在釋出時優化拼合成一張大圖，稱為製作“精靈圖”（sprite）。

對圖示的CSS設定一般寫在icon.css中，然後使用jdcloud-sprite工具生成拼合後的大圖以及icon.out.css在H5應用中使用。 檢視index.html可知它實際引用的是優化後的icon.out.css檔案，icon.css只是作為原始檔，用於生成icon.out.css。

在開發時，建議先把圖示的CSS定義分別在icon.css與icon.out.css中各寫一份。 待準備做優化時，只需在一臺可製作精靈圖的電腦上一次性生成icon.out.css比較方便。

圖示優化方法（製作精靈圖）

先安裝imagemagick軟體，確認在命令列中可以執行convert等命令。 安裝好php 5.4或更高版本，然後在專案的tool目錄下，執行命令：

php jdcloud-sprite.php ../server/icon.css -2x -group -sprite icon/icon@2x.png

檢視server/icon.out.css檔案是否已更新？在server/icon目錄下是否生成了拼合後的大圖？

命令中引數-2x表示源圖示都是2x圖示，即顯示為24x24大小的圖示，其實際尺寸是48x48。 在手機上一般使用2x圖示，否則會看出有些模糊。 引數-group表示按圖示寬度分組拼合圖片，這樣效率更高些，也可以去掉這個引數。

其實在檔案tool/Makefile中已經包含了這個命令，確保開發環境有make工具， 就可以在git-bash中直接執行下面命令來優化圖示：

./make-sprite.sh