标签:
需要引入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 });
标签:
原文地址:http://www.cnblogs.com/jinzhiming/p/4778227.html