JS組件系列之BootstrapIcon圖標(biāo)選擇組件_javascript技巧

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 20:50:16

JS組件系列之BootstrapIcon圖標(biāo)選擇組件_javascript技巧

JS組件系列之BootstrapIcon圖標(biāo)選擇組件_javascript技巧:前言：最近好多朋友在群里面聊到bootstrap icon圖標(biāo)的問題，比如最常見的菜單管理，每個(gè)菜單肯定需要一個(gè)對(duì)應(yīng)的菜單圖標(biāo)，要是有一個(gè)可視化的圖標(biāo)選擇組件就好了，最好是直接選擇圖標(biāo)，就能得到對(duì)應(yīng)的class樣式。于是乎各種百度，皇天不負(fù)有心人，最后被博主

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀JS組件系列之BootstrapIcon圖標(biāo)選擇組件_javascript技巧:前言：最近好多朋友在群里面聊到bootstrap icon圖標(biāo)的問題，比如最常見的菜單管理，每個(gè)菜單肯定需要一個(gè)對(duì)應(yīng)的菜單圖標(biāo)，要是有一個(gè)可視化的圖標(biāo)選擇組件就好了，最好是直接選擇圖標(biāo)，就能得到對(duì)應(yīng)的class樣式。于是乎各種百度，皇天不負(fù)有心人，最后被博主

前言：最近好多朋友在群里面聊到bootstrap icon圖標(biāo)的問題，比如最常見的菜單管理，每個(gè)菜單肯定需要一個(gè)對(duì)應(yīng)的菜單圖標(biāo)，要是有一個(gè)可視化的圖標(biāo)選擇組件就好了，最好是直接選擇圖標(biāo)，就能得到對(duì)應(yīng)的class樣式。于是乎各種百度，皇天不負(fù)有心人，最后被博主找到了，感覺效果還不錯(cuò)，并且支持自定義的圖標(biāo)，今天就拿出來(lái)分享下，絕對(duì)的干貨哦！

一、Bootstrap icon picker組件

這個(gè)組件是在github上面搜索的時(shí)候找到的，初初看上去，確實(shí)是很不錯(cuò)的，并且是基于bootstrap風(fēng)格的，所以更加適合使用bootstrap風(fēng)格布局的項(xiàng)目。既然是github上面的，毋庸置疑，這是一個(gè)開源組件，源碼地址。好了，說了這么多，一起來(lái)看看它到底長(zhǎng)啥樣子吧。

1、組件效果預(yù)覽

第一次初始化

支持“上一頁(yè)”和“下一頁(yè)”

支持自定義圖標(biāo)的選擇

支持模糊搜索圖標(biāo)，比如我們搜索camera

選擇圖標(biāo)后對(duì)應(yīng)的樣式放入到文本框里面

2、組件代碼示例（1）普通用法

此組件基于bootstrap和jquery，需要引用的文件如下


支持分頁(yè)

鼠標(biāo)上上面效果

支持模糊搜索

支持自定義每頁(yè)顯示的圖標(biāo)個(gè)數(shù)

選擇某個(gè)圖標(biāo)后的效果

2、組件代碼示例
（1）普通用法


這個(gè)組件不需要bootstrap的支持，但是需要jquery的支持，不過我們測(cè)試的需要還是將bootstrap.css給引用進(jìn)來(lái)。



聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com    

    
    
        JS組件系列之BootstrapIcon圖標(biāo)選擇組件_javascript技巧
        JS組件系列之BootstrapIcon圖標(biāo)選擇組件_javascript技巧:前言：最近好多朋友在群里面聊到bootstrap icon圖標(biāo)的問題，比如最常見的菜單管理，每個(gè)菜單肯定需要一個(gè)對(duì)應(yīng)的菜單圖標(biāo)，要是有一個(gè)可視化的圖標(biāo)選擇組件就好了，最好是直接選擇圖標(biāo)，就能得到對(duì)應(yīng)的class樣式。于是乎各種百度，皇天不負(fù)有心人，最后被博主
        推薦度：
    
    
        
            點(diǎn)擊下載本文
            文檔為doc格式
        
    

              
        
                
            標(biāo)簽：
                        js
                        javascript
                        javascript技巧
                    
                
            
             
                    
                        熱門焦點(diǎn)