码迷,mamicode.com
首页 > Web开发 > 详细

js的选择星级评分插件

时间:2015-09-02 13:22:34      阅读:288      评论:0      收藏:0      [点我收藏+]

标签:

需要引入jquery和raty的js,并且低版本的jquery可能会出现样式问题,或者点击没反应,可换高版本试试

raty文档及下载:

http://www.wbotelhos.com/raty/

 

把下载后文件夹中的lib下文件拷到自己项目下

技术分享

 1 <script language="javascript" type="text/javascript" src="/JavaScript/jquery/jquery-2.1.0.min.js"></script>
 2 <script language="javascript" type="text/javascript" src="/JavaScript/star/jquery.raty.js"></script>
 3 
 4 <div id="star"></div><!--> 显示星级用<-->
 5 <div id="result" style="display:none;"></div><!--> 用户选中星级后的结果<-->
 6 
 7 <script>
 8 $("#star").raty({
 9     hints: [1, 2, 3, 4, 5],//鼠标悬浮在星星对应显示的值
10     path:"<%=PropertiesConfigureTools.getRESOURCE_URL()%>/JavaScript/star/images",//可以改成你存放的图片路径
11     starOff: star-off.png,//可以改变图片
12     starOn: star-on.png,//可以改变图片
13     size: 24,//div长度
14     target: #result,//结果位置
15     targetKeep : true//属性设置为true,用户的选择值才会被保持在目标DIV中,否则只是鼠标悬停时有值,而鼠标离开后这个值就会消失。
16     half:true
17     
18 });
19 //将隐藏div的值发送给服务器即可
20 </script>

 

 1 $(function() {
 2   $.fn.raty.defaults.path = ´lib/img´;
 3   $(´#function-demo´).raty({
 4     number: 3,//多少个星星设置        
 5     targetType: ´hint´,//类型选择,number是数字值,hint,是设置的数组值
 6     path      : ´demo/img´,
 7     hints     : [´差´,´一般´,´好´],
 8     cancelOff : ´cancel-off-big.png´,
 9     cancelOn  : ´cancel-on-big.png´,
10     size      : 24,
11     starHalf  : ´star-half-big.png´,
12     starOff   : ´star-off-big.png´,
13     starOn    : ´star-on-big.png´,
14     target    : ´#function-hint´,
15     cancel    : false,
16     targetKeep: true,
17     targetText: ´请选择评分´,
18 
19     click: function(score, evt) {
20       alert(´ID: ´ + $(this).attr(´id´) + "
21 score: " + score + "
22 event: " + evt.type);
23     }
24   });    
25   
26   $(´#function-demo1´).raty({
27     number: 10,//多少个星星设置
28     score: 2,//初始值是设置
29     targetType: ´number´,//类型选择,number是数字值,hint,是设置的数组值
30     path      : ´demo/img´,
31     cancelOff : ´cancel-off-big.png´,
32     cancelOn  : ´cancel-on-big.png´,
33     size      : 24,
34     starHalf  : ´star-half-big.png´,
35     starOff   : ´star-off-big.png´,
36     starOn    : ´star-on-big.png´,
37     target    : ´#function-hint1´,
38     cancel    : false,
39     targetKeep: true,
40     precision : false,//是否包含小数
41     click: function(score, evt) {
42       alert(´ID: ´ + $(this).attr(´id´) + "
43 score: " + score + "
44 event: " + evt.type);
45     }
46   });    
47 });

 

js的选择星级评分插件

标签:

原文地址:http://www.cnblogs.com/jinzhiming/p/4778227.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!