jquery plugin Star-rating.js realize star rating special effects _jquery

Special Effects Introduction

jquery star rating plug-in star-rating.js download Plug-ins, click on the stars or the left side of the heart, is half a point, the right is 1 points. Click on the minus sign to score 0. Not compatible with browsers below IE8.

Demo diagram

How to use

The first step is to introduce the following code:

Copy Code code as follows:

<link href= "Http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel= "stylesheet" >
<script src= "Http://libs.baidu.com/jquery/1.10.2/jquery.min.js" ></script>
<link href= "Css/star-rating.css" media= "All" rel= "stylesheet" type= "Text/css"/>
<script src= "Js/star-rating.js" type= "Text/javascript" ></script>

The second step, you want to use what effect, you introduce the appropriate input box:

Copy Code code as follows:

<input id= "input-2b" type= "number" class= "rating" min= "0" max= "5" step= "0.5" data-size= "XL"
Data-symbol= "" data-default-caption= "{rating} Hearts" data-star-captions= "{}" >

In the third step, if you need to reset or submit a button, you can introduce the following code:

Copy Code code as follows:

<button type= "Submit" class= "btn btn-primary" >Submit</button>
<button type= "reset" class= "btn Btn-default" >Reset</button>

Fourth step, the introduction of JS calling code:

Copy Code code as follows:

<script>
JQuery (document). Ready (function () {
$ (". Rating-kv"). Rating ();
});
</script>

This site download demo address

The above mentioned is the entire content of this article, I hope you can enjoy.