JS Component Series bootstrap icon selection component _javascript Tips

Foreword: A lot of friends in the group chat to bootstrap icon of the problem recently, for example the most common menu management, each menu definitely needs a corresponding menu icon, if have a visual icon to select Component is good, it is best to directly select the icon, you can get the corresponding class style. As a result of a variety of Baidu, Emperor, and finally be Bo found the owner, the feeling is good, and support the custom icon, today to share, absolute dry Goods Oh!

First, Bootstrap icon picker components

This component was found at the top of the GitHub search, and at first glance it was really nice and based on bootstrap style, so it's more suitable for bootstrap style layouts. Since it is GitHub above, there is no doubt that this is an open source component, source address. Well, say so much, let's see what it looks like.

1. Component Effect Preview

Initialization for the first time

Back and Next page support

Options for supporting custom icons

Support for fuzzy search icons, such as our search camera

Select the icon after the corresponding style into the text box

2. Component code example (1) General usage

This component is based on Bootstrap and jquery, and the files that need to be referenced are

 <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 an ordinary input text box above the HTML page

<input type= "Text" >

JS Initialization

$ (function () {//bootstrap icon initializes $ ("#txt_boostrap_icon"). Iconpicker ();

This can be initialized to see the effect of the above image. There is wood is very simple ~ ~

And then we need to get the selected value, and the normal input text box doesn't have any difference in how it's used. var Bootstrap_icon = $ ("#txt_boostrap_icon"). Val ();

(2) Custom icon

We see that the number of icons is fixed to dozens of when initialized with the above method. What if we need to add some of our own icon icons to the inside? Or, we need to use a background image as an icon, what should we do? Don't worry, there will always be a way! Let's start with a simple look at its JS Source:

A total of more than 100 lines of code, it is not difficult to read. We're going to focus on the variable icons in the Red line, and see that the array contains all of our icons. Take a look at the generated HTML source code.

So we wonder if we can customize the style also named glyphicon-some of these styles from the definition icon? With this idea, we add two new styles to the CSS file.

Then add test11, test12, test13, test14 four items 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, that's it. The next step is to refresh the page to see the effect.

So the biggest advantage of this component is the expansion of its own icon convenience, whether it is written with content or use the background image can be seamless docking. The lever!

Two, JQuery Fonticonpicker component

jquery Fonticonpicker is the blogger is to find the jquery plug-in when inadvertently found, do not find it does not matter, carefully studied after the discovery of this component is really good, especially the interface effect is great. and open source, full document, feature-rich. SOURCE Download Address

1. Component Effect Preview

There are four themes that are customized when initialized (the blogger prefers the first bootstrap style)

Support Paging

Top effect on mouse

Support for Fuzzy search

Supports customizing the number of icons displayed per page

The effect of selecting an icon

2. Component code example

(1) General usage

This component does not require bootstrap support, but it needs jquery support, but the need for our testing is to bring bootstrap.css to the reference.

 <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 dazzling, must cite the document to be many.

And look at the HTML prep.

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 the icon is dynamically set, here you only need to put an empty select

<select name= "Myselect" ></select>

JS Initialization

1 static initialization (option is already written for select)

$ (function () {//jquery icon initializes $ (' #myselect '). Fonticonpicker ();//Load with default options};

2 dynamic initialization (for an empty select tag)

$ (function () {//jquery icon initializes $ (' #myselect '). Fonticonpicker ({theme: ' Fip-bootstrap ',///Four theme styles: 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,//whether to show empty emptyiconvalue:" None " ,//Null value iconsperpage:30,//The number of display icons per page, the default hassearch:true,//whether to show the test box, default true}); });

In fact, it is very simple, so a few parameters can be set, the code has written the corresponding comments, here do not do too much explanation.

Similarly, to get the selected value, you can use the Val () of jquery directly.

(2) Custom icon

Looking at the bootstrap icon on the top of the custom icons, whether you are also thinking that this component can support customization. Oh, bloggers also think so. Can I do that? Let's give it a try first.

1 Use the icon of the background image to try, the result failed

First, define a style that uses a background picture directly above 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 "glyphicon-test13" into the end of the array that initializes the source, and it looks like it's done. Let's refresh the interface to see

Contrary to the situation, the icon background image does not display correctly. What is this for? Bo main Curiosity came again, audit elements to see:

Originally this component generates an I tag, which is different from the span above, and span can be used as a container and only as an italic label. So this kind of attempt fails. But the blogger is not convinced, you said I label is not a container is not the actual occupy is it, we will write a number of spaces inside the I do not do?

Can be seen to the I tag inside the add space, you can really let the pictures show up, seemingly perfect solution to the problem! But, however, don't be too early, but not when selected, because the selected inside is still empty I tag. So overall, this way can be used as a reference, there is time to see if you can properly modify the source code to achieve this function, the current stage is not supported by the custom background picture!

2 use CSS to write the icon to try, the result is successful

Since the custom background picture is not good, if we customize the icon, that is, if we all through: Before{content: ""} This way to write the icons can it? The answer is yes. We found a special icon for the website icon download, to download the icon package, reference to the page of our project.

We randomly select two "ion-android-archive" and "Ion-android-arrow-back" to the end of the array that initializes the source. Refreshing the interface

When selected

Third, the comparison

These are examples of the use of two icon icons to select components. In contrast, this component has its own pros and cons.

1, from the interface effect, the second (Jqueryfonticonpicker) than the first (Bootstrap icon picker) to look good, the interface is more dazzling, the user experience better. This is not disputed.

2, from the components of the lightweight above, the first is better than the second, it is obvious that the second reference to so many CSS, certainly more or less will lead to bloated components.

3, from the point of view of the ease of use, the first use is simpler and easier to expand; the second API is more comprehensive, customizable, and flexible, but the custom background image is currently problematic.