JS コンポーネント シリーズ -- 見逃せない 2 つの Bootstrap Icon アイコン選択コンポーネント_html/css_WEB-ITnose

はじめに: 最近、多くの友人がグループ内のブートストラップ アイコンの問題について話しました。たとえば、最も一般的なメニュー管理では、ビジュアルがある場合、各メニューに対応するメニュー アイコンが必要です。アイコンの選択 コンポーネントは問題なく、アイコンを直接選択して、対応するクラス スタイルを取得するのが最善です。そこで、Baidu と Huangtian を試した結果、効果が非常に優れていると感じました。これは非常に便利です。

1. Bootstrap アイコンピッカーコンポーネント

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

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

最初の初期化

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

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

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

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

2. コンポーネントコード例

(1) よくある使い方

このコンポーネントはブートストラップとjqueryとrequires 参照するファイルは以下の通りです

 　 <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();        });

初期化後、上に示すように効果を確認できます。とても簡単ですね~~

次に、選択された値を取得する必要があります。これは、通常の入力テキスト ボックスの使用と何ら変わりません。 var bootstrap_icon = $("#txt_boostrap_icon").val();

(2) カスタムアイコン

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

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

ここから、スタイルをカスタマイズして glyphicon という名前を付けることができるかどうか疑問に思います。アイコンをカスタマイズするには、これらのスタイルのいくつかはどうでしょうか?このアイデアでは、CSS ファイル

に 2 つの新しいスタイルを追加し、アイコン変数

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");

はい、終わりました。次のステップでは、ページを更新して効果を確認します。

このコンポーネントの最大の利点は、独自のアイコンをコンテンツと一緒に記述しても、背景画像を使用しても、シームレスに接続できるので便利です。てこの作用！

2. jQuery fontIconPicker コンポーネント

jquery fonticonpicker は、ブロガーが jquery プラグインを探していたときに偶然発見されました。慎重に研究した結果、このコンポーネントは非常に優れており、特にインターフェイス効果が優れていることがわかりました。オープンソースであり、完全なドキュメントがあり、機能が豊富です。ソース コードのダウンロード アドレス

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

初期化中に 4 つのカスタマイズされたテーマがあります (ブロガーは最初のブートストラップ スタイルを好みます)

ページングをサポート

マウスオーバー効果

あいまい検索をサポート

各ページに表示されるアイコンの数のカスタマイズをサポート

アイコンを選択した場合の効果

2. コンポーネントのコード例

(1) 一般的な使用法

このコンポーネントはブートストラップのサポートを必要としませんが、jquery のサポートは必要です。テストにはブートストラップを使用する必要があります。.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

2) アイコンを動的に設定したい場合は、 empty select here

　　　　　　　　　　　　　　　　<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>

JS 初期化

<select id="myselect" name="myselect" class="myselect"></select>

1) 静的初期化（select にオプションが書かれている場合）

2) 動的初期化 (空の select タグ用) )

$(function () {      //jquery icon初始化      $('#myselect').fontIconPicker(); // Load with default options  });

実際には、設定できるパラメータがいくつかあるだけなので、コード内に記述されています。ここではあまり説明しません。

$(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) カスタム アイコン

上記のブートストラップ アイコンのカスタム アイコンを見て、このコンポーネントもカスタマイズをサポートできると考えていますか?あはは、ブロガーもそう思います。大丈夫ですか？まずは試してみましょう。

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下载 ，去里面下载icon包，引用到我们项目的页面中来。

我们随便选两个"ion-android-archive"、"ion-android-arrow-back"放到初始化source对应的数组的最后。刷新界面

选中之后

三、比较

以上就是两种icon图标选择组件的使用示例。对比一下，这种组件其实各有利弊。

1、从界面效果来看，第二种（jquery fontIconPicker）要比第一种（Bootstrap icon picker）要好看，界面更炫，用户体验更好。这个没有争议。

2、从组件的轻量级上面来说，第一种是要比第二种更优的，很明显，第二种引用了那么多的css，肯定或多或少会导致组件的臃肿。

3、从使用是否方便的角度来看，第一种使用更加简单，更易扩展；第二种api 更加全面，可自定义的项比较多，使用灵活，但是自定义背景图片目前会有问题。

好了，这篇就到这里。如果你的项目正好也需要用到这种图标选择组件，可以用起来试试。有什么问题我们一起交流。如果本文能够对你有丝毫帮助，麻烦抬起你的小手点个推荐，博主一定继续努力，将更好的文章分享给大家。