带Ajax提交功能的五角星评分效果代码_时代Java(NowJava.com) -JS/jQuery代码 -演示与下载 -时代Java

AJAX Rating Stars Demo


Examples

Simple form binding

<script type="text/javascript">
  var s1 = new Stars({
    maxRating: 5,
    bindField: 'myRating',
    imagePath: 'images/',
    value: 4.5
  });
</script>

JavaScript callback function

<script type="text/javascript">
  function rating(val)
  {
    alert('You rated it ' + val + ' star(s)!');
  }
  var s2 = new Stars({
    maxRating: 5,
    imagePath: 'images/',
    callback: rating
  });
</script>

Sending values through AJAX

<script type="text/javascript">
  function ajaxRating(xml)
  {
    var x = xml.responseXML;
    var xmlRating = x.getElementsByTagName('rating');
    var rating = xmlRating[0].firstChild.nodeValue;
    alert('You rated it ' + rating + ' star(s)!');
  }
  var s3 = new Stars({
    maxRating: 5,
    actionURL: 'rate.php?rating=',
    callback: ajaxRating,
    imagePath: 'images/',
    value: 3
  });
</script>

Locking Example 1: Lock on update

<script type="text/javascript">
  function rating(val)
  {
    alert('You rated it ' + val + ' star(s)!');
    s4.locked = true;
  }
  var s4 = new Stars({
    maxRating: 5,
    imagePath: 'images/',
    callback: rating
  });
</script>

Locking Example 2: Prelocked

<script type="text/javascript">

   var s5 = new Stars({
    maxRating: 5,
    value: 4,
    imagePath: 'images/',
    locked: true
  });
</script>

External Value Setting with a disabled callback

function setStarValue(val) {
	window.s7.setValue(val, false);
}
function uncalledCallBack(val)
{
	alert('was called anyway');
}
var s7 = new Stars({
	maxRating: 5,
	callback: uncalledCallBack
});

Instantiation Options

maxRating: integer. The maximum rating possible, also the number of stars to display.
locked: boolean (optional) Turns off the ability to use the rating stars, but still displays them.
imagePath: (optional) the path to look fro the star images in. Default: ./images/
bindField: (optional) the input object, or ID of the input object, to apply the rating value to.
value: (optional) the initial value of the rating.
actionURL: (optional) the URL to call when a rating is made. The rating value will be appended to the actionURL. (eg: '/rating.php?rating=' will be sent off as '/rating.php?rating=5' when the 5th star is clicked).
callback: (optional) the name of the javascript function to call when the widget is clicked. If actionURL is specified, this will be executed on the completion of the AJAX call with the XML document as the only parameter. If no actionURL is specified, the value of the rating widget will be passed in as the only parameter.

Properties

value: integer. The maximum rating possible, also the number of stars to display.
locked: boolean (optional) Turns off the ability to use the rating stars, but still displays them.

Methods

setValue(number value, boolean doCallBack): sets the value of the rating object. Also fires the callback/ajax functions, unless doCallBack is false (true is default).

代码整理:时代Java(NowJava.com) 

转载请注明出处,此代码仅供学习交流,请勿用于商业用途。

下载代码说明
X关闭

带Ajax提交功能的五角星评分颜色自动改变效果代码

带Ajax提交功能的五角星评分效果代码,可以使用五颗五角星作为评分的选项,鼠标滑过星星的颜色自动改变,点击后显示得分,可以通过ajax方式提交到后端,经测试功能相当不错建议web前端开发者下载使用。