2 つの非常に優れた Bootstrap アイコンのアイコン選択コンポーネント_JavaScript スキル

1. ブートストラップ アイコン ピッカー コンポーネント

このコンポーネントは github で検索したときに見つかりました。一見すると非常に優れており、ブートストラップ スタイルに基づいているため、ブートストラップ スタイルのレイアウトを使用するプロジェクトに適しています。 github 上にあるので、これがオープンソース コンポーネントであることは間違いありません、ソース コード アドレス。さて、ここまでは述べたので、それがどのようなものかを見てみましょう。

1. コンポーネントエフェクトのプレビュー

最初の初期化

「前のページ」と「次のページ」をサポート

カスタム アイコンの選択をサポートします

あいまい検索アイコンをサポートします。たとえば、カメラを検索します

アイコンを選択し、対応するスタイルをテキスト ボックスに入力します

2. コンポーネントのコード例
(1) よくある使い方
このコンポーネントはブートストラップと 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 type="text" class="form-control" id="txt_boostrap_icon">

JS の初期化

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

初期化後、上記のような効果が確認できます。とても簡単ですね~~

次に、選択された値を取得する必要があります。これは、通常の入力テキスト ボックスの使用と何ら変わりません。

(2) カスタムアイコン

上記の方法で初期化すると、アイコンの数が数十個に固定されていることがわかります。独自のアイコンを追加する必要がある場合はどうすればよいでしょうか?または、背景画像をアイコンとして使用する必要がありますが、どうすればよいでしょうか?心配しないでください、必ず方法はあります。まず、js ソース コードを簡単に見てみましょう:

コードは全部で 100 行を超えるだけなので、理解するのは難しくありません。上の赤​​い線の変数アイコンに注目してください。この配列に格納されているのはすべてのアイコンのコレクションであることがわかります。生成されたHTMLソースコードを見てみましょう。

ここから、スタイルをカスタマイズして glyphicon という名前を付けて、アイコンをカスタマイズできるのではないかと思います。この考えを念頭に置いて、CSS ファイルに 2 つの新しいスタイルを追加します

次に、4 つの項目 test11、test12、test13、test14 を icons 変数に追加します

コードをコピー コードは次のとおりです。

var icons = new Array("adjust", "align -center" 、"align-justify"、"align-left"、"align-right"、"arrow-down"、"arrow-left"、"arrow-right"、"arrow-up"、... .. "ズームアウト","test11","test12","test13", "test14");

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

所以这个组件最大的好处就是扩展自己的图标方便，不管是用content写还是使用背景图片都可以无缝对接。杠杠的！

二、jQuery fontIconPicker组件

jquery fonticonpicker是博主是找jquery插件的时候无意中发现的，不发现不要紧，仔细研究后发现这组件真心不错，尤其是界面效果很棒。并且开源，文档全，功能丰富。

1、组件效果预览

初始化的时候有自定义了四种主题（博主更偏爱第一种bootstrap风格的）

支持分页

鼠标上上面效果

支持模糊搜索

支持自定义每页显示的图标个数

选择某个图标后的效果

2、组件代码示例
（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標籤。所以總的來說，這種方式可以作為一種參考思路，後面有時間看是否可以適當修改下源碼實現這個功能，目前這階段是不支持自定背景圖片的！

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

既然自訂背景圖片不行，那麼如果我們自定icon呢，也就是如果我們都透過:before{content:""}這種方式來寫的圖示是否可以呢？答案是可以的。我們找到一個專門放icon的網站，去裡面下載icon包，引用到我們專案的頁面中來。

我們隨便選兩個"ion-android-archive"、"ion-android-arrow-back"放到初始化source對應的陣列的最後。刷新介面

選取之後

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

1.從介面效果來看，第二種（jquery fontIconPicker）比第一種（Bootstrap icon picker）好看，介面更炫，使用者體驗更好。這個沒有爭議。

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

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

好了，這篇就到這裡。如果你的專案剛好也需要用到這種圖示選擇元件，可以用起來試試看。