Fork me on GitHub

jQuery jPList plugin is deprecated. Please check pure JavaScript (ES6) jPList Library alternative instead.

Star Rating Control Usage

Star Rating Control

Add jPList scripts to the HEAD:

    		
<!-- Link to font awesome project, used to render stars without images -->
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet" />

<!-- Handlebars Templates Library: http://handlebarsjs.com -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.4/handlebars.min.js"></script>
		
<!-- jPList Core -->		
<link href="jplist.core.min.css" rel="stylesheet" type="text/css" />
<script src="jplist.core.min.js"></script>	

<!-- Star Rating Control -->			
<link href="jplist.start-rating-control.min.css" rel="stylesheet" type="text/css" />
<script src="jplist.start-rating-control.min.js"></script>

<script>
$('document').ready(function(){
	
	$('#demo').jplist({				
		itemsBox: '.list' 
		,itemPath: '.list-item' 
		,panelPath: '.jplist-panel'	
	});
	
});
</script>
			
	

Add basic HTML structure to the BODY:

    
<!-- demo -->
<div id="demo">
	
	<!-- panel -->
	<div class="jplist-panel">						
		...
	</div>				 
	
	<!-- HTML data -->   
	<div class="list">
		
		<!-- item 1 -->
		<div class="list-item">	
			
			<!-- star rating control is located in each list item and not in the panels -->
			<div 
			   data-control-type="star-rating" 
			   class="jplist-star-rating"
			   data-rating="4"
			   data-total="1">
			</div>
			
			...
		
		</div>
		
		<!-- item 2 -->
		<div class="list-item">	
			
			<!-- star rating control is located in each list item and not in the panels -->
			<div 
			   data-control-type="star-rating" 
			   class="jplist-star-rating"
			   data-rating="5"
			   data-total="3">
			</div>
			
			...
			
		</div>
		
		...
		
	</div>
	
	<!-- no results found -->
	<div class="jplist-no-results">
		<p>No results found</p>
	</div>
					
</div>
			
	

Stars Handlebars Template:

    
<!-- star rating handlebars template, included only once on the page -->
<script id="star-rating-template" type="text/x-handlebars-template">
                  
   <!-- star rating -->
   <div class="jplist-star-rating-outer" data-content="&#xf006;&#xf006;&#xf006;&#xf006;&#xf006;">
      <div class="jplist-star-rating-inner" data-content="&#xf005;&#xf005;&#xf005;&#xf005;&#xf005;" style="width: {{percent}}%"></div>
      <div class="jplist-hidden jplist-star-rating-percent">{{percent}}</div>
   </div>
                  
   <!-- reviews number -->
   <div class="jplist-reviews">
      <span class="jplist-reviews-number">{{total}}</span> 
      {{#if one}}
         review
      {{else}}
         reviews
      {{/if}}							
   </div>
                  
</script>