jquery星级评分插件jquery.raty_滑动鼠标点击星星评分的功能插件
2014-10-07 15:50:24  By: dwtedx

本DEMO是一款功能强大的jquery评分插件jquery.raty、可灵活设置33个参数、可以显示数值和自定义字符串数组

比以往分享的星级评分插件功能强多了、使用也比较简单、最简单的使用初始化jquery代码就一行$(”#star“).raty();

具体的大家自己下载下来慢慢看吧

HTML代码

<div style="width:500px; margin:100px auto;">
  <div class="demo">
    <div id="function-demo" class="target-demo"></div>
    <div id="function-hint" class="hint"></div>
  </div>
  <div class="demo">
    <div id="function-demo1" class="target-demo"></div>
    <div id="function-hint1" class="hint"></div>
  </div>
</div>
JS代码

$(function() {
  $.fn.raty.defaults.path = ´lib/img´;
  $(´#function-demo´).raty({
	number: 3,//多少个星星设置		
	targetType: ´hint´,//类型选择,number是数字值,hint,是设置的数组值
	path      : ´demo/img´,
	hints     : [´差´,´一般´,´好´],
	cancelOff : ´cancel-off-big.png´,
	cancelOn  : ´cancel-on-big.png´,
	size      : 24,
	starHalf  : ´star-half-big.png´,
	starOff   : ´star-off-big.png´,
	starOn    : ´star-on-big.png´,
	target    : ´#function-hint´,
	cancel    : false,
	targetKeep: true,
	targetText: ´请选择评分´,

	click: function(score, evt) {
	  alert(´ID: ´ + $(this).attr(´id´) + "
score: " + score + "
event: " + evt.type);
	}
  });    
  
  $(´#function-demo1´).raty({
	number: 10,//多少个星星设置
	score: 2,//初始值是设置
	targetType: ´number´,//类型选择,number是数字值,hint,是设置的数组值
	path      : ´demo/img´,
	cancelOff : ´cancel-off-big.png´,
	cancelOn  : ´cancel-on-big.png´,
	size      : 24,
	starHalf  : ´star-half-big.png´,
	starOff   : ´star-off-big.png´,
	starOn    : ´star-on-big.png´,
	target    : ´#function-hint1´,
	cancel    : false,
	targetKeep: true,
	precision : false,//是否包含小数
	click: function(score, evt) {
	  alert(´ID: ´ + $(this).attr(´id´) + "
score: " + score + "
event: " + evt.type);
	}
  });    
});
最后给大家贴出源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1pJ3CN7X 密码: afow

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+