|
前言：最近好多朋友在群里面聊到bootstrap icon圖標(biāo)的問題,，比如最常見的菜單管理,，每個(gè)菜單肯定需要一個(gè)對(duì)應(yīng)的菜單圖標(biāo),，要是有一個(gè)可視化的圖標(biāo)選擇組件就好了,，最好是直接選擇圖標(biāo),，就能得到對(duì)應(yīng)的class樣式,。于是乎各種百度,，皇天不負(fù)有心人,，最后被博主找到了,，感覺效果還不錯(cuò)，并且支持自定義的圖標(biāo),，今天就拿出來分享下,，絕對(duì)的干貨哦！ 一,、Bootstrap icon picker組件這個(gè)組件是在github上面搜索的時(shí)候找到的,，初初看上去，確實(shí)是很不錯(cuò)的,，并且是基于bootstrap風(fēng)格的,，所以更加適合使用bootstrap風(fēng)格布局的項(xiàng)目。既然是github上面的,，毋庸置疑,，這是一個(gè)開源組件，源碼地址,。好了,，說了這么多，一起來看看它到底長(zhǎng)啥樣子吧,。 1,、組件效果預(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頁面上面放置一個(gè)普通的的input文本框 <input type="text" class="form-control" id="txt_boostrap_icon"> JS初始化 $(function () { //bootstrap icon初始化 $("#txt_boostrap_icon").iconPicker(); }); 這樣初始化之后就能看到如上圖的效果了。有木有很簡(jiǎn)單~~ 然后我們需要獲取選中的值,，和普通input文本框的使用方法沒有任何區(qū)別 var bootstrap_icon = $("#txt_boostrap_icon").val(); （2）自定義圖標(biāo)我們看到使用上面的方法初始化之后,，圖標(biāo)的個(gè)數(shù)是固定的那么幾十個(gè),。如果我們需要往里面加一些我們自己的icon圖標(biāo)怎么辦呢？又或者,，我們需要使用背景圖片來作為圖標(biāo),，該怎么辦？別急,，辦法總是會(huì)有的,！我們先來簡(jiǎn)單看看它的js源碼：
總共也就一百多行代碼，要看懂也不難,。我們重點(diǎn)來看看上面紅線匡里面的變量 icons ,，觀察發(fā)現(xiàn)這個(gè)數(shù)組里面存放的就是我們所有圖標(biāo)的集合。再來看看生成的html源碼,。
由此我們猜想是否可以自定義樣式也命名為glyphicon-這樣的一些樣式來自定義圖標(biāo)呢,？有了這個(gè)想法，我們?cè)赾ss文件里面新加兩個(gè)樣式
然后在 icons 變量里面加test11,、test12,、test13、test14四個(gè)項(xiàng)之后 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"); 好了,，大功告成,。接下來就是刷新頁面看效果了。
所以這個(gè)組件最大的好處就是擴(kuò)展自己的圖標(biāo)方便,，不管是Font Awesome Icons還是使用背景圖片都可以無縫對(duì)接,。杠杠的！ 二,、jQuery fontIconPicker組件jquery fonticonpicker是博主在找jquery插件的時(shí)候無意中發(fā)現(xiàn)的,，不發(fā)現(xiàn)不要緊，仔細(xì)研究后發(fā)現(xiàn)這組件真心不錯(cuò),，尤其是界面效果很棒,。并且開源，文檔全,，功能豐富,。源碼下載地址 1、組件效果預(yù)覽初始化的時(shí)候自定義了四種主題（博主更偏愛第一種bootstrap風(fēng)格的）
支持分頁
鼠標(biāo)放上面效果
支持模糊搜索
支持自定義每頁顯示的圖標(biāo)個(gè)數(shù),，比如我們改成每頁顯示30個(gè)圖標(biāo)
選擇某個(gè)圖標(biāo)后的效果
博主覺得效果真心不錯(cuò),。 2、組件代碼示例（1）普通用法這個(gè)組件不需要bootstrap的支持,，但是需要jquery的支持,，不過我們測(cè)試的需要還是將bootstrap.css給引用進(jìn)來。  <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準(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, //每頁顯示圖標(biāo)的個(gè)數(shù),，默認(rèn)20 hasSearch: true,//是否顯示試試框,，默認(rèn)true }); }); 其實(shí)也很簡(jiǎn)單,，就那么幾個(gè)可以設(shè)置的參數(shù),，代碼里面已經(jīng)寫了相應(yīng)的注釋，這里就不做過多講解,。 同樣,，獲取選中的值，可以直接使用jquery的val()即可,。 （2）自定義圖標(biāo)看了上面bootstrap icon的自定義圖標(biāo),，你是否也在想，這個(gè)組件也能支持自定義就好了,。呵呵,，博主也是這樣想的。行不行呢,？我們先來試一試,。 1）使用背景圖片的圖標(biāo)嘗試，結(jié)果失敗 首先直接在頁面上面定義一個(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; } 然后將"glyphicon-test13"放入到初始化source對(duì)應(yīng)的數(shù)組的最后,，看似大功告成,。我們刷新下界面看看
事與愿違，圖標(biāo)背景圖無法正常顯示,。這是為什么呢,？博主好奇心又來了，審核元素看看：
原來這個(gè)組件生成的是i標(biāo)簽,，它和上面的span是不同的,，span可以作為容器，而i只能作為一種斜體標(biāo)簽,，沒有容器的占位功能,，所以此種嘗試失敗。但是博主不服氣了,，你說i標(biāo)簽不是容器沒有實(shí)際的占位是吧,，我們將i里面寫入多個(gè)空格行不行呢？
可以看到向i標(biāo)簽里面加入空格之后,，確實(shí)可以讓圖片顯示出來,，貌似問題完美解決！但是,，但是,，別高興太早了,，選中的時(shí)候還是不行，因?yàn)檫x中的里面還是空的i標(biāo)簽,。所以總的來說,，這種方式可以作為一種參考思路，后面有時(shí)間看是否可以適當(dāng)修改下源碼實(shí)現(xiàn)這個(gè)功能,，目前這階段是不支持自定背景圖片的,！ 2）使用css寫的圖標(biāo)嘗試，結(jié)果成功 既然自定義背景圖片不行,，那么如果我們自定義icon呢,，也就是如果我們都通過:before{content:""}這種方式來寫的圖標(biāo)是否可行呢？答案是肯定的,！我們找到一個(gè)專門放icon的網(wǎng)站Icon下載,，去里面下載icon包，引用到我們項(xiàng)目的頁面中來,。
我們隨便選兩個(gè)"ion-android-archive",、"ion-android-arrow-back"放到初始化source對(duì)應(yīng)的數(shù)組的最后。刷新界面
選中之后
三,、比較以上就是兩種icon圖標(biāo)選擇組件的使用示例,。對(duì)比一下，這種組件其實(shí)各有利弊,。 1,、從界面效果來看，第二種（jquery fontIconPicker）要比第一種（Bootstrap icon picker）要好看,，界面更炫,，用戶體驗(yàn)更好。這個(gè)沒有爭(zhēng)議,。 2,、從組件的輕量級(jí)上面來說，第一種是要比第二種更優(yōu)的,，很明顯,，第二種引用了那么多的css，肯定或多或少會(huì)導(dǎo)致組件的臃腫,。 3,、從使用是否方便的角度來看，第一種使用更加簡(jiǎn)單,，更易擴(kuò)展,；第二種api 更加全面，可自定義的項(xiàng)比較多,，使用靈活,，但是自定義背景圖片目前會(huì)有問題,。 好了，這篇就到這里,。如果你的項(xiàng)目正好也需要用到這種圖標(biāo)選擇組件,，可以用起來試試。有什么問題我們一起交流,。如果本文能夠?qū)δ阌薪z毫幫助,，麻煩抬起你的小手點(diǎn)個(gè)推薦，博主一定繼續(xù)努力,，將更好的文章分享給大家,。
|
|
|
