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

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對應的陣列的最後，看似大功告成。我們刷新下介面看看