JS component series Bootstrap Icon select component, bootstrapicon

JS component series Bootstrap Icon select component, bootstrapicon

Recently, many friends talked about the bootstrap icon in the group. For example, the most common menu management, each menu must have a corresponding menu icon, if there is a visual icon to select the component, it is better to directly select the icon to get the corresponding class style. The various Baidu and Huang Tianyan did not have a good fortune. Finally, they were found by the bloggers. They felt that the effect was good and they supported custom icons. Today, I will share them with you. It's absolutely dry!

I. Bootstrap icon picker component

This component was found during the search on github. It looks good at the beginning and is based on the bootstrap style. Therefore, it is more suitable for projects with the bootstrap style layout. Since it is on github, there is no doubt that this is an open source component and the source code address. Well, let's take a look at how it looks.

1. Component effect Preview

First Initialization

Supports "previous" and "Next"

Allows you to select custom icons.

Fuzzy search icons are supported. For example, you can search for camera.

Select the icon and put the corresponding style in the text box.

2. Component code example (1) common usage

This component is based on bootstrap and jquery. The file to be referenced is as follows:

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

Place a common input text box on the html page

<input type="text">

JS Initialization

$ (Function () {// bootstrap icon initialization $ ("# txt_boostrap_icon"). iconPicker ();});

In this way, you can see the effect after initialization. Youmu has a very simple experience ~~

Then we need to obtain the selected value, which is no different from the usage of the common input text box var bootstrap_icon = $ ("# txt_boostrap_icon"). val ();

(2) custom icons

We can see that after initialization using the above method, the number of icons is fixed to dozens. What if we need to add some icons of our own to it? Or, we need to use a background image as an icon. What should we do? Don't worry, there will always be a solution! Let's take a brief look at its js source code:

There are more than one hundred lines of code in total, which is not difficult to understand. Let's take a look at the variable icons in the red line above, and find that the array contains a set of all our icons. Let's take a look at the generated html source code.

From this we can guess whether a custom style can also be named glyphicon-some of these styles customize icons? With this idea, we add two new styles to the css file.

Add test11, test12, test13, and test14 to the icons variable.

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

All right, all done. Next, refresh the page to see the effect.

Therefore, the biggest benefit of this component is the convenience of extending its own icons, whether it is written in content or using background images, it can be seamlessly integrated. Lever!

Ii. jQuery fontIconPicker component

Jquery fonticonpicker was accidentally found when the blogger looked for the jquery plug-in. It doesn't matter if he didn't find it. After careful research, he found that this component was really good, especially the interface effect was great. It is also open-source and provides comprehensive documentation and rich functions. Source code

1. Component effect Preview

During initialization, there are four custom themes (bloggers prefer the first bootstrap style)

Pagination supported

Top mouse Effect

Support fuzzy search

Allows you to customize the number of icons displayed on each page.

Effect after selecting an icon

2. Component code example

(1) common usage

This group does not support bootstrap, but supports jquery. in our test, we also reference 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" />

The effect is so dazzling that there will inevitably be more referenced files.

Let's take a look at html preparation.

1) static html

<select name="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) if it is a dynamic setting icon, you only need to put an empty select.

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

JS Initialization

1) Static initialization (option has been written in select)

$ (Function () {// jquery icon initialization $ ('# myselect'). fontIconPicker (); // Load with default options });

2) Dynamic initialization (for empty select tags)

$ (Function () {// jquery icon initialization $ ('# myselect '). fontIconPicker ({theme: 'fip-bootstrap ', // four theme styles: fip-gray, 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-penpencil", "icon-penpencil-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, // whether to display empty emptyIconValue: "none", // null isperpage: 30, // The number of icons displayed on each page. The default value is 20 hasSearch: true, // whether to display the try box. The default value is true });});

In fact, it is also very simple. There are just a few parameters that can be set. The corresponding comments have been written in the code, so I will not explain them too much here.

Similarly, to obtain the selected value, you can directly use jquery's val.

(2) custom icons

After reading the custom icon of the bootstrap icon above, are you still wondering whether this component can support customization. The same is true for bloggers. Okay? Let's try it first.

1) An error occurred while trying to use the icon of the background image.

First, define a style that uses the background image directly on the page.

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

Then put the "glyphicon-test13" into the end of the array corresponding to the initialization source, it seems that the success. Let's refresh the interface.

Contrary to expectations, the icon background image cannot be displayed normally. Why? The blogger's curiosity is coming again. Let's look at the review elements:

Originally, this component generates an I tag, which is different from the span above. A span can be used as a container, but only as an italic tag. Therefore, this attempt fails. But the blogger is not convinced. Do you mean that I labels are not containers without actual placeholder values? Can we write multiple spaces in I?

After adding spaces to the I tag, you can see that the image is displayed. It seems that the problem is solved perfectly! However, it is too early to be happy, because the selected I tag is still empty. In general, this method can be used as a reference train of thought. Later I have time to check whether the source code can be modified to implement this function. At this stage, custom background images are not supported!

2) use the css-written icon to try and the result is successful.

Since the custom background image does not work, if we customize the icon, that is, if we all write the icon through: before {content: ""}, can we? The answer is yes. Find a website icon for downloading, download the Icon package, and reference it to the project page.

Choose "ion-android-archive" and "ion-android-arrow-back" at the end of the array corresponding to the initialization source. Refresh page

Selected

Iii. Comparison

The above is an example of using the two icon selection components. In comparison, such components have their own advantages and disadvantages.

1. In terms of interface effects, the second type (jqueryfontIconPicker) is better than the first one (Bootstrap icon picker). The interface is more dazzling and the user experience is better. This is not controversial.

2. In terms of lightweight components, the first type is better than the second type. Obviously, the second type references so much css, which will definitely lead to component bloated more or less.

3. From the perspective of ease of use, the first method is simpler to use and easier to expand. The second method is more comprehensive, with many customizable items and flexible to use, however, there is a problem with the custom background image.

Articles you may be interested in:

• Learning the Bootstrap component drop-down menu
• JS component Bootstrap implementation pop-up box and prompt box effect code
• JS component Bootstrap Table row dragging implementation code
• JS component Bootstrap Table multi-row drag effect implementation code
• Bootstrap glyphicons font icons