A Basic Star Rating Bar

by Faisal Pathan

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://bseth99.github.io/projects/jquery-ui/ratingbar.js"></script>
<link rel="stylesheet" href="http://bseth99.github.io/projects/jquery-ui/ratingbar.css">


   <div data-role="ratingbar" data-steps="2">
     <ul>
       <li><a href="#"><span class="glyphicon glyphicon-star"></span></a></li>
       <li><a href="#"><span class="glyphicon glyphicon-star"></span></a></li>
       <li><a href="#"><span class="glyphicon glyphicon-star"></span></a></li>
       <li><a href="#"><span class="glyphicon glyphicon-star"></span></a></li>
       <li><a href="#"><span class="glyphicon glyphicon-star"></span></a></li>
     </ul>
   </div><br/>

JavaScript

$( '[data-role="ratingbar"]' )
    .ratingbar()
    .click(function() {

     // Grab value
     alert( $( this ).attr( 'data-value' ) );

     return false;
});