很不錯(cuò)的兩款Bootstrap Icon圖標(biāo)選擇組件
一、Bootstrap icon picker組件
這個(gè)組件是在github上面搜索的時(shí)候找到的，初初看上去，確實(shí)是很不錯(cuò)的，并且是基于bootstrap風(fēng)格的，所以更加適合使用bootstrap風(fēng)格布局的項(xiàng)目。既然是github上面的，毋庸置疑，這是一個(gè)開(kāi)源組件，源碼地址。好了，說(shuō)了這么多，一起來(lái)看看它到底長(zhǎng)啥樣子吧。
1、組件效果預(yù)覽
第一次初始化
支持“上一頁(yè)”和“下一頁(yè)”
支持自定義圖標(biāo)的選擇
支持模糊搜索圖標(biāo)，比如我們搜索camera
選擇圖標(biāo)后對(duì)應(yīng)的樣式放入到文本框里面
2、組件代碼示例
（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頁(yè)面上面放置一個(gè)普通的的input文本框
<input type="text" class="form-control" id="txt_boostrap_icon">
JS初始化
$(function () {
//bootstrap icon初始化
$("#txt_boostrap_icon").iconPicker();
});
這樣初始化之后就能看到如上圖的效果了。有木有很簡(jiǎn)單~~
然后我們需要獲取選中的值，和普通input文本框的使用方法沒(méi)有任何區(qū)別 var bootstrap_icon = $("#txt_boostrap_icon").val();
（2）自定義圖標(biāo)
我們看到使用上面的方法初始化之后，圖標(biāo)的個(gè)數(shù)是固定的那么幾十個(gè)。如果我們需要往里面加一些我們自己的icon圖標(biāo)怎么辦呢？又或者，我們需要使用背景圖片來(lái)作為圖標(biāo)，該怎么辦？別急，辦法總是會(huì)有的！我們先來(lái)簡(jiǎn)單看看它的js源碼：
總共也就一百多行代碼，要看懂也不難。我們重點(diǎn)來(lái)看看上面紅線匡里面的變量icons，觀察發(fā)現(xiàn)這個(gè)數(shù)組里面存放的就是我們所有圖標(biāo)的集合。再來(lái)看看生成的html源碼。
由此我們猜想是否可以自定義樣式也命名為glyphicon-這樣的一些樣式來(lái)自定義圖標(biāo)呢？有了這個(gè)想法，我們?cè)赾ss文件里面新加兩個(gè)樣式
然后在icons變量里面加test11、test12、test13、test14四個(gè)項(xiàng)之后
好了，大功告成。接下來(lái)就是刷新頁(yè)面看效果了。
所以這個(gè)組件最大的好處就是擴(kuò)展自己的圖標(biāo)方便，不管是用content寫還是使用背景圖片都可以無(wú)縫對(duì)接。杠杠的！
二、jQuery fontIconPicker組件
jquery fonticonpicker是博主是找jquery插件的時(shí)候無(wú)意中發(fā)現(xiàn)的，不發(fā)現(xiàn)不要緊，仔細(xì)研究后發(fā)現(xiàn)這組件真心不錯(cuò)，尤其是界面效果很棒。并且開(kāi)源，文檔全，功能豐富。
1、組件效果預(yù)覽
初始化的時(shí)候有自定義了四種主題（博主更偏愛(ài)第一種bootstrap風(fēng)格的）
支持分頁(yè)
鼠標(biāo)上上面效果
支持模糊搜索
支持自定義每頁(yè)顯示的圖標(biāo)個(gè)數(shù)
選擇某個(gè)圖標(biāo)后的效果
2、組件代碼示例
（1）普通用法
這個(gè)組件不需要bootstrap的支持，但是需要jquery的支持，不過(guò)我們測(cè)試的需要還是將bootstrap.css給引用進(jìn)來(lái)。
<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" />
效果炫，必然引用的文件就多了。
再來(lái)看看html準(zhǔn)備
1）靜態(tài)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）如果是動(dòng)態(tài)設(shè)置圖標(biāo)，這里只需要放一個(gè)空的select即可
<select id="myselect" name="myselect" class="myselect"></select>
JS初始化
1）靜態(tài)初始化（針對(duì)select里面已經(jīng)寫好了option的情況）
$(function () {
//jquery icon初始化
$('#myselect').fontIconPicker(); // Load with default options
});
2）動(dòng)態(tài)初始化（針對(duì)空的select標(biāo)簽）
$(function () {
//jquery icon初始化
$('#myselect').fontIconPicker({
theme: 'fip-bootstrap',//四種主題風(fēng)格：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, //每頁(yè)顯示圖標(biāo)的個(gè)數(shù)，默認(rèn)20
hasSearch: true,//是否顯示試試框，默認(rèn)true
});
});
其實(shí)也很簡(jiǎn)單，就那么幾個(gè)可以設(shè)置的參數(shù)，代碼里面已經(jīng)寫了相應(yīng)的注釋，這里就不做過(guò)多講解。
同樣，獲取選中的值，可以直接使用jquery的val()即可。
（2）自定義圖標(biāo)
看了上面bootstrap icon的自定義圖標(biāo)，你是否也在想，這個(gè)組件也能支持自定義就好了。呵呵，博主也是這樣想得。行不行呢？我們先來(lái)試一試。
1）使用背景圖片的圖標(biāo)嘗試，結(jié)果失敗
首先直接在頁(yè)面上面定義一個(gè)使用背景圖片的樣式
<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對(duì)應(yīng)的數(shù)組的最后，看似大功告成。我們刷新下界面看看
事與愿違，圖標(biāo)背景圖無(wú)法正常顯示。這是為什么呢？好奇心又來(lái)了，審核元素看看：
原來(lái)這個(gè)組件生成的是i標(biāo)簽，它和上面的span是不同的，span可以作為容器，而只能作為一種斜體標(biāo)簽。所以此種嘗試失敗。但是不服氣了，你說(shuō)i標(biāo)簽不是容器沒(méi)有實(shí)際的占位是吧，我們將i里面寫入多個(gè)空格行不行呢？
可以看到向i標(biāo)簽里面加入空格之后，確實(shí)可以讓圖片顯示出來(lái)，貌似問(wèn)題完美解決！但是，但是，別高興太早了，選中的時(shí)候還是不行，因?yàn)檫x中的里面還是空的i標(biāo)簽。所以總的來(lái)說(shuō)，這種方式可以作為一種參考思路，后面有時(shí)間看是否可以適當(dāng)修改下源碼實(shí)現(xiàn)這個(gè)功能，目前這階段是不支持自定背景圖片的！
2）使用css寫的圖標(biāo)嘗試，結(jié)果成功
既然自定義背景圖片不行，那么如果我們自定icon呢，也就是如果我們都通過(guò):before{content:""}這種方式來(lái)寫的圖標(biāo)是否可以呢？答案是可以的。我們找到一個(gè)專門放icon的網(wǎng)站，去里面下載icon包，引用到我們項(xiàng)目的頁(yè)面中來(lái)。
我們隨便選兩個(gè)"ion-android-archive"、"ion-android-arrow-back"放到初始化source對(duì)應(yīng)的數(shù)組的最后。刷新界面
選中之后
三、比較
以上就是兩種icon圖標(biāo)選擇組件的使用示例。對(duì)比一下，這種組件其實(shí)各有利弊。
1、從界面效果來(lái)看，第二種（jquery fontIconPicker）要比第一種（Bootstrap icon picker）要好看，界面更炫，用戶體驗(yàn)更好。這個(gè)沒(méi)有爭(zhēng)議。
2、從組件的輕量級(jí)上面來(lái)說(shuō)，第一種是要比第二種更優(yōu)的，很明顯，第二種引用了那么多的css，肯定或多或少會(huì)導(dǎo)致組件的臃腫。
3、從使用是否方便的角度來(lái)看，第一種使用更加簡(jiǎn)單，更易擴(kuò)展；第二種api 更加全面，可自定義的項(xiàng)比較多，使用靈活，但是自定義背景圖片目前會(huì)有問(wèn)題。
好了，這篇就到這里。如果你的項(xiàng)目正好也需要用到這種圖標(biāo)選擇組件，可以用起來(lái)試試。
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個(gè)精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程
- 本地Bootstrap文件字體圖標(biāo)引入?yún)s無(wú)法顯示問(wèn)題的解決方法
- Bootstrap字體圖標(biāo)無(wú)法正常顯示的解決方法
- BootStrap glyphicon圖標(biāo)無(wú)法顯示的解決方法
- Bootstrap3 input輸入框插入glyphicon圖標(biāo)的方法
- bootstrap布局中input輸入框右側(cè)圖標(biāo)點(diǎn)擊功能
- BootStrap glyphicons 字體圖標(biāo)實(shí)現(xiàn)方法
- JS組件系列之Bootstrap Icon圖標(biāo)選擇組件
- 詳解Bootstrap glyphicons字體圖標(biāo)
- bootstrap中添加額外的圖標(biāo)實(shí)例代碼
相關(guān)文章
適用于javascript開(kāi)發(fā)者的Processing.js入門教程
這篇文章主要介紹了適用于javascript開(kāi)發(fā)者的Processing.js入門教程，感興趣的小伙伴們可以參考一下2016-02-02
Layui Table js 模擬選中checkbox的例子
今天小編就為大家分享一篇Layui Table js 模擬選中checkbox的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
javascript陷阱 一不小心你就中招了(字符運(yùn)算)
看似簡(jiǎn)單的加法運(yùn)行，卻有很多問(wèn)題，一定要注意字符與數(shù)字的運(yùn)算，注意使用js的強(qiáng)制類型轉(zhuǎn)換，否則會(huì)出現(xiàn)很多問(wèn)題。我們?cè)诰帉慾s的過(guò)程中，最好通過(guò)alert逐行測(cè)試2013-11-11
JavaScript中Array的filter函數(shù)詳解
這篇文章主要介紹了JavaScript中Array的filter函數(shù)詳解,filter?為數(shù)組中的每個(gè)元素調(diào)用一次callback函數(shù),W更多具體內(nèi)容，需要的朋友可以參考一下2022-07-07
javascript使用數(shù)組的push方法完成快速排序
排序的方法有很多，本節(jié)為大家介紹的是使用數(shù)組的push方法完成快速排序，當(dāng)然你也可以舉一反三2014-09-09
vue2.x的深入學(xué)習(xí)--關(guān)于h函數(shù)的說(shuō)明
下面小編就為大家分享一篇基于h函數(shù)詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2021-08-08
在本章中，我們將分析Prototypejs中關(guān)于JavaScript繼承的實(shí)現(xiàn),需要的朋友可以參考下2016-10-10
javascript實(shí)現(xiàn)攝像頭拍照預(yù)覽
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)攝像頭拍照預(yù)覽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
本文主要分享了js實(shí)現(xiàn)3d懸浮效果的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
js左側(cè)多級(jí)菜單動(dòng)態(tài)的解決方案
實(shí)現(xiàn)的效果很簡(jiǎn)單，就是點(diǎn)一下顯示，再點(diǎn)一下就隱藏，只不過(guò)是多了幾級(jí)的問(wèn)題。好，現(xiàn)在來(lái)說(shuō)說(shuō)我的設(shè)計(jì)思路，首先從第一級(jí)別開(kāi)始，添加如下代碼2010-02-02