基於Metronic的Bootstrap開發框架經驗總結（10）--優化Bootstrap圖標管理

時間 2019-11-16

標籤基於 metronic bootstrap 開發框架經驗總結優化圖標管理欄目 Bootstarp 简体版

原文原文鏈接

在基於Bootstrap開發的項目中，鮮豔顏色的按鈕，以及豐富的圖表是很吸引人的特色，爲了將這個特色發揮到極致，能夠利用Bootstrap圖標抽取到數據庫裏面，並在界面中進行管理和使用，這樣咱們能夠把這些圖標方便應用在各個頁面部件上，如菜單模塊，按鈕界面，表單輸入等多個場合進行使用。在前面隨筆《基於Metronic的Bootstrap開發框架經驗總結（4）--Bootstrap圖標的提取和利用》中，我對如何抽取Bootstrap圖標，並單獨開發一個頁面進行圖表的管理，本隨筆介紹如何在這個基礎上進行優化，實現更方便的使用。javascript

一、優化圖標管理界面

在前面隨筆中，咱們介紹了對圖標的抽取、圖標管理界面等內容。咱們再來回顧一下Bootstrap的圖表類型，Bootstrap圖標庫裏面分爲了三類內容：html

Font Awesome：Bootstrap專用圖標字體，Font Awesome 中包含的全部圖標都是矢量的，也就能夠任意縮放，避免了一個圖標作多種尺寸的麻煩。CSS對字體能夠設置的樣式也一樣可以運用到這些圖標上了。java

Simple Icons：收集衆多網站的Logo，並提供高質量、不一樣尺寸的png格式圖片給廣大網友，全部Icon版權歸其所屬公司。數據庫

Glyphicons:包括200個符號字體格式圖表集合，由Glyphicons提供，Glyphicons Halflings 通常是收費的，可是通過Bootstrap和Glyphicons做者之間的協商，容許開發人員不須要支付費用便可使用。bootstrap

咱們從樣式表中抽取這幾類圖標信息，放到數據庫裏面，而後方便界面管理和選擇處理。app

在前面隨筆介紹個人Bootstrap框架的時候，圖標管理界面以下所示。框架

選擇圖標的時候，提供一個彈出的對話框顯示分類不一樣的圖標，讓用戶選擇後返回便可。post

雖然有了這些功能界面，可以下降咱們尋找圖標的過程，可是實際使用的時候，仍是有一些不方便，由於尋找一個特定的圖標，須要翻了不少頁才能尋找到合適的，效率不高，經過了解咱們自身的圖標名稱和它顯示的內容仍是有很大的關聯關係的，所以咱們應該提供一個顯示名稱的搜索，方便查詢出來，並能夠在查詢列表中進行選擇，這樣就能夠大大加快咱們尋找Bootstrap圖標的速度了。學習

這個界面比原來改進了不少，咱們能夠經過名稱搜索，並獲取數據庫裏面符合條件的圖標進行分頁顯示，若是選擇其中之一，能夠把圖標和名稱顯示在上面，這樣能夠方便咱們使用。字體

查詢的操做和其餘分頁的部分相似，把數據經過AJax方式獲取後，在界面上進行分頁顯示便可。

                            <div class="form-group">
                                <label class="control-label col-md-2">圖標顯示名稱</label>
                                <div class="input-icon col-md-3">
                                    <div class="input-group">
                                        <div class="input-icon ">
                                            <input id="WHC_DisplayName" name="WHC_DisplayName" type="text" class="form-control" placeholder="顯示名稱...">
                                        </div>
                                        <span class="input-group-btn">
                                            <button id="btnSearch" class="btn btn-success" type="button" onclick="SearchDisplayName()">
                                                <i class="glyphicon glyphicon-list"></i>查詢
                                            </button>
                                        </span>
                                    </div>
                                </div>
                            </div>

        //根據名稱查詢圖標
        function SearchDisplayName()
        {
            var condition = "WHC_DisplayName=" + $("#WHC_DisplayName").val();
            SearchCondition(currentPage, condition);
        }
        
        //圖標查詢
        function Search(page) {
            var condition = "WHC_SourceType=SimpleLine";//SimpleLine,FontAwesome,Glyphicons

            SearchCondition(page, condition);
        }
        function SearchCondition(page, condition) {
            var iconUrl = "/BootstrapIcon/FindWithPager?page=" + page + "&rows=" + rows;

            $.getJSON(iconUrl + "&" + condition, function (data) {
                $("#grid_body").html("");
                $.each(data.rows, function (i, item) {
                    var tr = "<a href='javascript:;' onclick=\"SetIconClass('" + item.ClassName + "')\" class='icon-btn' title=\"" + item.DisplayName + "\">";
                    tr += "    <i class=\"" + item.ClassName + " \" style=\"font-size: 2.2em\"></i>";//
                    tr += "</a>";
                    $("#grid_body").append(tr);
                });

                var element = $('#grid_paging');
                if(data.total > 0) {
                    var options = {
                        bootstrapMajorVersion: 3,
                        currentPage: page,
                        numberOfPages: rows,
                        totalPages: Math.ceil(data.total / rows),
                        onPageChanged: function (event, oldPage, newPage) {
                            SearchCondition(newPage, condition);
                        }
                    }
                    element.bootstrapPaginator(options);
                } else {
                    element.html("");
                }
            });
        }

另外圖標的樣式咱們也方便一塊兒整合讓它顯示，如Primary Success Info Warning Danger等經典樣式，固然咱們也能夠設置顏色使圖標呈現更多的色彩。

相關的界面代碼以下所示。

                                <div class="input-icon col-md-6">
                                    <button type="button" class="btn btn-default" onclick="ChangeIconStyle('default')">Default</button>
                                    <button type="button" class="btn btn-primary" onclick="ChangeIconStyle('primary')">Primary</button>
                                    <button type="button" class="btn btn-success" onclick="ChangeIconStyle('success')">Success</button>
                                    <button type="button" class="btn btn-info" onclick="ChangeIconStyle('info')">Info</button>
                                    <button type="button" class="btn btn-warning" onclick="ChangeIconStyle('warning')">Warning</button>
                                    <button type="button" class="btn btn-danger" onclick="ChangeIconStyle('danger')">Danger</button>
                                </div>

    <script>
        //經過JS修改界面圖標的顯示和樣式
        function ChangeIconStyle(style) {
            var icon = $("#WebIcon").val();
            if (style != 'default') {
                $("#i_WebIcon").attr("class", icon + " icon-state-" + style);
                $("#lbl_WebIcon").attr("class", "label label-" + style);
                $("#lbl_WebIcon").text(icon + " icon-state-" + style);
            } else {
                $("#i_WebIcon").attr("class", icon);
                $("#lbl_WebIcon").attr("class", "");
                $("#lbl_WebIcon").text(icon);
            }
        }
    </script>