bootstrap-use Icheck plugin to replace the checkbox with new clothes

The previous article talked about how to create a beautiful tree menu under the bootstrap framework. The beautiful menu is built, but now there is a real need: add a check box in front of each menu to tick some of the required data.

The following is the effect of the tree menu after adding the check box:

This looks like a farfetched feeling.
So find a way to add some styling to these checkboxes so that the entire interface looks a bit like that.

Through the query, there is a third-party bootstrap plug-in called Icheck, specifically for the check box, the Radio box to add a beautiful style.

You can check the official website: http://www.bootcss.com/p/icheck/for more information.
Icheck plug-in provides a few sets of very good looking skin, for our choice.

the most simple skin

Square Skin

Flat Skin

Polaris Skin

The following is an example of the square skin, which shows how to apply the plugin:

1. Download: https://github.com/fronteed/iCheck/Download the ICheck plugin's compression pack.
2. Copy: Icheck.js, Blue.css, blue.png, [email protected] This set of files to the project directory
3. Reference: Add a reference to the Icheck.js file and the Blue.css file. <link href="blue.css" rel="stylesheet">and the<script src="icheck.js"></script>
4. JS: Add a section of JS code to HTML

//给单选框复选框添加样式  $(‘input‘).iCheck({    ‘icheckbox_square-blue‘,    ‘iradio_square-blue‘,    ‘20%‘// optional  });

Note : blue.css, blue.png, [email protected], these three files to ensure that the skin is blue, replacement of other colors need to change these three files at the same time.

Special note : Event bindings! Icheck changed the event name of the checkbox and ComboBox. This should be noted in particular, see:

Then use the On () method to bind the event:

$(‘input‘).on(‘ifChecked‘function(event){  ‘ callback‘);});

And Icheck provides some ways to programmatically change the state of an input box: for example,
$(‘input‘).iCheck(‘check‘);-Set the status of the input box to checked
$(‘input‘).iCheck(‘uncheck‘);-Remove Checked status
Wait a minute.

The following image is the style of the tree menu after using the Icheck plugin:

This looks more like a match.

Recently has been using bootstrap this framework, the overall feeling is quite good, very efficient, beautiful. However, there are some third-party bootstrap plugins that need to be found to implement some features. Now the third-party plug-ins are also more and more, more and more rich.

There are 50 bootstrap plugins available for everyone to learn: http://www.oschina.net/news/56950/jquery-bootstrap-plugins-for-your-next-projects

bootstrap-use Icheck plugin to replace the checkbox with new clothes