Super Simple jQuery Five-Star Rating Plugin with jQuery and CSS3
File Size: | 74.4 KB |
---|---|
Views Total: | 8406 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Rating is a super tiny jQuery plugin for creating a basic five-star rating widget based on CSS3 transforms.
How to use it:
1. Include jQuery javascript library and the jQuery rating plugin in your document.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="jquery-rating.js"></script>
2. Create a group of DIVs for the rating widget.
<div id="1" class="ratenode nomal"></div> <div id="2" class="ratenode nomal"></div> <div id="3" class="ratenode nomal"></div> <div id="4" class="ratenode nomal"></div> <div id="5" class="ratenode nomal"></div>
3. The CSS to draw stars using CSS3 transforms. The stars can be scaled as large as possible to fit any container.
.rating { float: left; margin: 6px 0; position: relative; display: block; color: red; width: 0px; height: 0px; border-right: 10px solid transparent; border-bottom: 7px solid #CC6600; border-left: 10px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); } .rating:before { border-bottom: 8px solid #CC6600; border-left: 3px solid transparent; border-right: 3px solid transparent; position: absolute; height: 0px; width: 0px; top: -4.5px; left: -6.5px; display: block; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); } .rating:after { position: absolute; display: block; color: red; top: 0.3px; left: -10.5px; width: 0px; height: 0px; border-right: 10px solid transparent; border-bottom: 7px solid #CC6600; border-left: 10px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); content: ''; } .nomal { float: left; margin: 6px 0; position: relative; display: block; color: red; width: 0px; height: 0px; border-right: 10px solid transparent; border-bottom: 7px solid grey; border-left: 10px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); } .nomal:before { border-bottom: 8px solid grey; border-left: 3px solid transparent; border-right: 3px solid transparent; position: absolute; height: 0px; width: 0px; top: -4.5px; left: -6.5px; display: block; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); } .nomal:after { position: absolute; display: block; color: red; top: 0.3px; left: -10.5px; width: 0px; height: 0px; border-right: 10px solid transparent; border-bottom: 7px solid grey; border-left: 10px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); content: ''; }
4. Initialize the rating widget.
$.rating.init();
5. Get the current rating.
$.rating.getCurrentRating()
Change log:
2014-07-31
- fix :It's easy to have conflict of class name of CSS
2014-07-29
- support init rating
This awesome jQuery plugin is developed by Jayin. For more Advanced Usages, please check the demo page or visit the official website.