JS組件系列——不容錯過的兩款Bootstrap Icon圖標選擇組件

前言：最近好多朋友在羣裏面聊到bootstrap icon圖標的問題，好比最多見的菜單管理，每一個菜單確定須要一個對應的菜單圖標，要是有一個可視化的圖標選擇組件就行了，最好是直接選擇圖標，就能獲得對應的class樣式。因而乎各類百度，皇天不負有心人，最後被博主找到了，感受效果還不錯，而且支持自定義的圖標，今天就拿出來分享下，絕對的乾貨哦！

1、Bootstrap icon picker組件

這個組件是在github上面搜索的時候找到的，初初看上去，確實是很不錯的，而且是基於bootstrap風格的，因此更加適合使用bootstrap風格佈局的項目。既然是github上面的，毋庸置疑，這是一個開源組件，源碼地址。好了，說了這麼多，一塊兒來看看它到底長啥樣子吧。

一、組件效果預覽

第一次初始化

支持「上一頁」和「下一頁」

支持自定義圖標的選擇

支持模糊搜索圖標，好比咱們搜索camera

選擇圖標後對應的樣式放入到文本框裏面

二、組件代碼示例

（1）普通用法

此組件基於bootstrap和jquery，須要引用的文件以下

 　 <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/Bootstrap-icon-picker-master/Bootstrap-icon-picker-master/css/icon-picker.css" rel="stylesheet" />

    <script src="~/Scripts/jquery-1.9.1.js"></script>
    <script src="~/Content/Bootstrap-icon-picker-master/Bootstrap-icon-picker-master/js/iconPicker.js"></script>

在html頁面上面放置一個普通的的input文本框

 <input type="text" class="form-control" id="txt_boostrap_icon">

JS初始化

 　　　　$(function () {
            //bootstrap icon初始化
            $("#txt_boostrap_icon").iconPicker();
        });

這樣初始化以後就能看到如上圖的效果了。有木有很簡單~~

而後咱們須要獲取選中的值，和普通input文本框的使用方法沒有任何區別 var bootstrap_icon = $("#txt_boostrap_icon").val(); 

（2）自定義圖標

咱們看到使用上面的方法初始化以後，圖標的個數是固定的那麼幾十個。若是咱們須要往裏面加一些咱們本身的icon圖標怎麼辦呢？又或者，咱們須要使用背景圖片來做爲圖標，該怎麼辦？別急，辦法老是會有的！咱們先來簡單看看它的js源碼：

總共也就一百多行代碼，要看懂也不難。咱們重點來看看上面紅線匡裏面的變量 icons ，觀察發現這個數組裏面存放的就是咱們全部圖標的集合。再來看看生成的html源碼。

由此咱們猜測是否能夠自定義樣式也命名爲glyphicon-這樣的一些樣式來自定義圖標呢？有了這個想法，咱們在css文件裏面新加兩個樣式

而後在 icons 變量裏面加test十一、test十二、test1三、test14四個項以後

var icons = new Array("adjust", "align-center", "align-justify", "align-left", "align-right", "arrow-down", "arrow-left", "arrow-right", "arrow-up",......... "zoom-out","test11","test12","test13", "test14");

好了，大功告成。接下來就是刷新頁面看效果了。

 因此這個組件最大的好處就是擴展本身的圖標方便，不論是Font Awesome Icons仍是使用背景圖片均可以無縫對接。槓槓的！

2、jQuery fontIconPicker組件

jquery fonticonpicker是博主在找jquery插件的時候無心中發現的，不發現沒關係，仔細研究後發現這組件真心不錯，尤爲是界面效果很棒。而且開源，文檔全，功能豐富。源碼下載地址

一、組件效果預覽

初始化的時候自定義了四種主題（博主更偏心第一種bootstrap風格的）

 

支持分頁

鼠標放上面效果

支持模糊搜索

支持自定義每頁顯示的圖標個數，好比咱們改爲每頁顯示30個圖標

選擇某個圖標後的效果

博主以爲效果然心不錯。

二、組件代碼示例

（1）普通用法

這個組件不須要bootstrap的支持，可是須要jquery的支持，不過咱們測試的須要仍是將bootstrap.css給引用進來。

 　　<script src="~/Scripts/jquery-1.9.1.js"></script>
    <script src="~/Content/fontIconPicker-2.0.0/jquery.fonticonpicker.js"></script>

    <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/fontIconPicker-2.0.0/css/jquery.fonticonpicker.css" rel="stylesheet" />
    <link href="~/Content/fontIconPicker-2.0.0/themes/grey-theme/jquery.fonticonpicker.grey.css" rel="stylesheet" />
    <link href="~/Content/fontIconPicker-2.0.0/themes/dark-grey-theme/jquery.fonticonpicker.darkgrey.css" rel="stylesheet" />
    <link href="~/Content/fontIconPicker-2.0.0/themes/bootstrap-theme/jquery.fonticonpicker.bootstrap.css" rel="stylesheet" />
    <link href="~/Content/fontIconPicker-2.0.0/themes/inverted-theme/jquery.fonticonpicker.inverted.css" rel="stylesheet" />
    <link href="~/Content/fontIconPicker-2.0.0/fontIconPicker-2.0.0/demo/fontello-7275ca86/css/fontello.css" rel="stylesheet" />

效果炫，封裝得就多了，必然引用的文件就多。

再來看看html準備

1）靜態html

　　　　　　　　　　　　　　　　<select id="myselect" name="myselect" class="myselect">
                                <option value="">No icon</option>
                                <option>icon-user</option>
                                <option>icon-search</option>
                                <option>icon-right-dir</option>
                                <option>icon-star</option>
                                <option>icon-cancel</option>
                                <option>icon-help-circled</option>
                                <option>icon-info-circled</option>
                                <option>icon-eye</option>
                                <option>icon-tag</option>
                                <option>icon-bookmark</option>
                                <option>icon-heart</option>
                                <option>icon-thumbs-down-alt</option>
                                <option>icon-upload-cloud</option>
                                <option>icon-phone-squared</option>
                                <option>icon-cog</option>
                                <option>icon-wrench</option>
                                <option>icon-volume-down</option>
                                <option>icon-down-dir</option>
                                <option>icon-up-dir</option>
                                <option>icon-left-dir</option>
                                <option>icon-thumbs-up-alt</option>
                            </select>

2）若是是動態設置圖標，這裏只須要放一個空的select便可

<select id="myselect" name="myselect" class="myselect"></select>

JS初始化

1）靜態初始化（針對select裏面已經寫好了option的狀況）

$(function () {
      //jquery icon初始化
      $('#myselect').fontIconPicker(); // Load with default options
  });

2）動態初始化（針對空的select標籤）

$(function () {
            //jquery icon初始化
            $('#myselect').fontIconPicker({
                theme: 'fip-bootstrap',//四種主題風格：fip-grey, fip-darkgrey, fip-bootstrap, fip-inverted
                source: ["icon-music", "icon-search", "icon-mail", "icon-mail-alt", "icon-heart", "icon-heart-empty", "icon-star", "icon-star-empty", "icon-star-half", "icon-star-half-alt", "icon-user", "icon-users", "icon-male", "icon-female", "icon-video", "icon-videocam", "icon-picture", "icon-camera", "icon-camera-alt", "icon-th-large", "icon-th", "icon-th-list", "icon-ok", "icon-ok-circled", "icon-ok-circled2", "icon-ok-squared", "icon-cancel", "icon-cancel-circled", "icon-cancel-circled2", "icon-plus", "icon-plus-circled", "icon-plus-squared", "icon-plus-squared-small", "icon-minus", "icon-minus-circled", "icon-minus-squared", "icon-minus-squared-alt", "icon-minus-squared-small", "icon-help", "icon-help-circled", "icon-info-circled", "icon-info", "icon-home", "icon-link", "icon-unlink", "icon-link-ext", "icon-link-ext-alt", "icon-attach", "icon-lock", "icon-lock-open", "icon-lock-open-alt", "icon-pin", "icon-eye", "icon-eye-off", "icon-tag", "icon-tags", "icon-bookmark", "icon-bookmark-empty", "icon-flag", "icon-flag-empty", "icon-flag-checkered", "icon-thumbs-up", "icon-thumbs-down", "icon-thumbs-up-alt", "icon-thumbs-down-alt", "icon-download", "icon-upload", "icon-download-cloud", "icon-upload-cloud", "icon-reply", "icon-reply-all", "icon-forward", "icon-quote-left", "icon-quote-right", "icon-code", "icon-export", "icon-export-alt", "icon-pencil", "icon-pencil-squared", "icon-edit", "icon-print", "icon-retweet", "icon-keyboard", "icon-gamepad", "icon-comment", "icon-chat", "icon-chat-empty", "icon-bell", "icon-bell-alt", "ion-android-alert", "ion-android-apps"],
                emptyIcon: true,//是否顯示空
                emptyIconValue: "none",//空值
                iconsPerPage: 30, //每頁顯示圖標的個數，默認20
                hasSearch: true,//是否顯示試試框，默認true

            }); 
        });

其實也很簡單，就那麼幾個能夠設置的參數，代碼裏面已經寫了相應的註釋，這裏就不作過多講解。

一樣，獲取選中的值，能夠直接使用jquery的val()便可。

（2）自定義圖標

看了上面bootstrap icon的自定義圖標，你是否也在想，這個組件也能支持自定義就行了。呵呵，博主也是這樣想的。行不行呢？咱們先來試一試。

1）使用背景圖片的圖標嘗試，結果失敗

首先直接在頁面上面定義一個使用背景圖片的樣式

<style type="text/css">
        .glyphicon-test13 {
            background: url('/Content/images/icons/p13.png') no-repeat center center!important;
            height: 15px!important;
            width: 14px!important;
        }
</style>

而後將"glyphicon-test13"放入到初始化source對應的數組的最後，看似大功告成。咱們刷新下界面看看

事與願違，圖標背景圖沒法正常顯示。這是爲何呢？博主好奇心又來了，審覈元素看看：

原來這個組件生成的是i標籤，它和上面的span是不一樣的，span能夠做爲容器，而i只能做爲一種斜體標籤，沒有容器的佔位功能，因此此種嘗試失敗。可是博主不服氣了，你說i標籤不是容器沒有實際的佔位是吧，咱們將i裏面寫入多個空格行不行呢？

能夠看到向i標籤裏面加入空格以後，確實可讓圖片顯示出來，貌似問題完美解決！可是，可是，別高興太早了，選中的時候仍是不行，由於選中的裏面仍是空的i標籤。因此總的來講，這種方式能夠做爲一種參考思路，後面有時間看是否能夠適當修改下源碼實現這個功能，目前這階段是不支持自定背景圖片的！

2）使用css寫的圖標嘗試，結果成功

既然自定義背景圖片不行，那麼若是咱們自定義icon呢，也就是若是咱們都經過:before{content:""}這種方式來寫的圖標是否可行呢？答案是確定的！咱們找到一個專門放icon的網站Icon下載，去裏面下載icon包，引用到咱們項目的頁面中來。

 

咱們隨便選兩個"ion-android-archive"、"ion-android-arrow-back"放到初始化source對應的數組的最後。刷新界面

選中以後

3、比較

以上就是兩種icon圖標選擇組件的使用示例。對比一下，這種組件其實各有利弊。

一、從界面效果來看，第二種（jquery fontIconPicker）要比第一種（Bootstrap icon picker）要好看，界面更炫，用戶體驗更好。這個沒有爭議。

二、從組件的輕量級上面來講，第一種是要比第二種更優的，很明顯，第二種引用了那麼多的css，確定或多或少會致使組件的臃腫。

三、從使用是否方便的角度來看，第一種使用更加簡單，更易擴展；第二種api 更加全面，可自定義的項比較多，使用靈活，可是自定義背景圖片目前會有問題。

好了，這篇就到這裏。若是你的項目正好也須要用到這種圖標選擇組件，能夠用起來試試。有什麼問題咱們一塊兒交流。若是本文可以對你有絲毫幫助，麻煩擡起你的小手點個推薦，博主必定繼續努力，將更好的文章分享給你們。