Jquery plug-in star-rating.js to achieve star rating effect, jquery star rating plug-in

Jquery plug-in star-rating.js to achieve star rating effect, jquery star rating plug-in

Special effects

Jquery star rating plug-in star-rating.js download plug-in, click the stars or the left of the heart, is half, the right is 1 point. Click the minus sign and set the score to 0. Not compatible with browsers earlier than Internet Explorer 8.

Demo Diagram

Usage

Step 1: Introduce the following code:

Copy codeThe Code is 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>

Step 2. Introduce the corresponding input box for the desired effect:

Copy codeThe Code is as follows:
<Input id = "input-2b" type = "number" class = "rating" min = "0" max = "5" step = "0.5" data-size = "xl"
Data-symbol = "symbol" data-default-caption = "{rating} hearts" data-star-captions = "{}">

Step 3: If you need to reset or submit the button, introduce the following code:

Copy codeThe Code is as follows:
<Button type = "submit" class = "btn-primary"> Submit </button>
<Button type = "reset" class = "btn-default"> Reset </button>

Step 4: Introduce the js call code:

Copy codeThe Code is as follows:
<Script>
JQuery (document). ready (function (){
$ (". Rating-kv"). rating ();
});
</Script>

Download demo address on this site

The above is all the content of this article. I hope you will like it.