jRating评分插件使用

jRating是一款基于jQuery的高度可配置的Ajax星级评价插件,支持自定义星星数量、显示大小及是否允许小数等细节。本文介绍如何安装、配置并使用该插件。
jRating is a very flexible jQuery plugin for quickly creating an Ajaxed star rating system. It is possible to configure every details from "the number of the stars" to "if the stars can represent decimals or not".
There is also an option to display small or big stars and images can be changed with any other file easily.

Although jRating can be used with any scripting language, a PHP file that handles the requests is already included in the download package on github

IMPLEMENTATION: 

1. FIRST, INCLUDE THE CSS & JQUERY FILES

<!-- include CSS & JS files -->
<!-- CSS file -->
<link rel="stylesheet" type="text/css" href="jRating.jquery.css" media="screen" />
<!-- jQuery files -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jRating.jquery.js"></script>
2. ADD YOUR HTML

<!-- basic exemple -->
<div class="exemple">
   <!-- in this exemple, 12 is the average and 1 is the id of the line to update in DB -->
   <div class="basic" id="12_1"></div>
    <!-- in this other exemple, 8 is the average and 2 is the id of the line to update in DB -->
   <div class="basic" id="8_2"></div>
</div>
3. NOW, CALL THE JRATING PLUGIN

<script type="text/javascript">
$(document).ready(function(){
      // simple jRating call
      $(".basic").jRating();
      // more complex jRating call
      $(".basic").jRating({
         step:true,
         length : 20, // nb of stars
         onSuccess : function(){
         alert('Success : your rate has been saved :)');
      }
   });
});
</script>

OPTIONS: 
showRateInfoBooleanDefault :  true - Disable the rate info. Can be set to true or false
bigStarsPathStringDefault :  'jquery/icons/stars.png' - Relative path of the large star picture (stars.png).
smallStarsPathStringDefault :  'jquery/icons/small.png' - Relative path of the small star picture (small.png).
phpPathStringDefault :  'php/jRating.php' - Relative path of the PHP page (jRating.php).
typeStringDefault :  'big' - Appearance type. Can be set to 'small' or 'big'.
stepBooleanDefault :  false - If set to true, filling of the stars is done star by star (step by step).
isDisabledBooleanDefault :  false - If set to true, jRating is disabled
lengthIntegerDefault :  5 - Number of star to display.
decimalLengthIntegerDefault :  0 - Number of decimals in the rate
rateMaxIntegerDefault :  20 - Maximal rate
rateInfosXIntegerDefault :  45 - In pixel - Absolute left position of the information box during mousemove.
rateInfosYIntegerDefault :  5 - In pixel - Absolute top position of the information box during mousemove.
METHODS: 
onSuccessFunctionReturns :  null - Callback function in case of success during rating.
onErrorFunctionReturns :  null - Callback function in case of failure during rating.
SCREENSHOTS

http://www.myjqueryplugins.com/jquery-plugin/jrating#field_methods

转载于:https://my.oschina.net/mickelfeng/blog/89588

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值