Jquery插件---实现类似淘宝打分，多条。
网上坑爹的打分工具有木有？我要多个打分啊！一条打分有个毛用啊~
网上找了个打分工具，没用啊~！没能满足我的需求，我就自己改了一个。虽然改的不辛苦，但是还是自己摸索出来的~o(∩_∩)o 废话不多说代码贴了：
打分的图标样式：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 5 <title>无标题文档</title> 6 <script type="text/javascript" src="css/jquery-1.6.2.min.js"></script> 7 8 </head> 9 <body> 10 <script type="text/javascript"> 11 $.fn.studyplay_star=function(options,callback){ 12 //默认设置 13 var settings ={ 14 MaxStar :5, 15 StarWidth :28, 16 CurrentStar :5, 17 Enabled :true, 18 ClassIndex:1 19 }; 20 if(options) { jQuery.extend(settings, options); }; 21 var container = jQuery(this); 22 container.css({ "position": "relative" }) 23 .html('<ul class="studyplay_starBg' + settings.ClassIndex + '"></ul>') 24 .find(".studyplay_starBg" + settings.ClassIndex).width(settings.MaxStar * settings.StarWidth) 25 .html('<li class="studyplay_starovering' + settings.ClassIndex+ 26 '" style="width:' + settings.CurrentStar * settings.StarWidth + 27 'px; z-index:0;" id="studyplay_current' + settings.ClassIndex + '"></li>'); 28 if(settings.Enabled) 29 { 30 var ListArray = ""; 31 for(k=1;k<settings.MaxStar+1;k++) 32 { 33 ListArray += '<li class="studyplay_starON' + settings.ClassIndex + 34 '" style="width:' + settings.StarWidth * k + 'px;z-index:' + (settings.MaxStar - k + 1) + ';"></li>'; 35 } 36 container.find('.studyplay_starBg' + settings.ClassIndex).append(ListArray) 37 container.find('.studyplay_starON' + settings.ClassIndex).hover(function () { 38 $(this).removeClass('studyplay_starON'+settings.ClassIndex).addClass("studyplay_starovering" + settings.ClassIndex); 39 $("#studyplay_current"+settings.ClassIndex).hide(); 40 }, 41 function () { 42 $(this).removeClass('studyplay_starovering' + settings.ClassIndex).addClass("studyplay_starON" + settings.ClassIndex); 43 $("#studyplay_current"+settings.ClassIndex).show(); 44 }) 45 .click(function(){ 46 var studyplay_count = settings.MaxStar - $(this).css("z-index") + 1; 47 $("#studyplay_current"+settings.ClassIndex).width(studyplay_count*settings.StarWidth) 48 //回调函数 49 if (typeof callback == 'function') { 50 callback(studyplay_count); 51 return ; 52 } 53 }) 54 } 55 } 56 </script> 57 <script type="text/javascript"> 58 $(document).ready(function () { 59 $("#z").studyplay_star({ MaxStar: 5, CurrentStar: 0, Enabled: true ,ClassIndex:1}, function (value) { alert(value+'z') }); 60 $("#x").studyplay_star({ MaxStar: 5, CurrentStar: 0, Enabled: true ,ClassIndex:2}, function (value) { alert(value+'x') }); 61 }); 62 </script> 63 64 <div id="z"></div> 65 <p> </p> 66 67 <div id="x"></div> 68 </body> 69 </html> 70 <style> 71 .studyplay_starBg1{ 72 background:url(images/20100807121800.gif) 0 -33px;position:absolute; top:0; left:0; height:28px; padding:0px; cursor:pointer; 73 } 74 .studyplay_starovering1{ 75 background:url(images/20100807121800.gif); height:28px; position:absolute; top:0; left:0; 76 } 77 .studyplay_starON1{ 78 position:absolute; top:0; left:0; height:22px; 79 } 80 .studyplay_starBg2{ 81 background:url(images/20100807121800.gif) 0 -33px;position:absolute; top:0; left:0; height:28px; padding:0px; cursor:pointer; 82 } 83 .studyplay_starovering2{ 84 background:url(images/20100807121800.gif); height:28px; position:absolute; top:0; left:0; 85 } 86 .studyplay_starON2{ 87 position:absolute; top:0; left:0; height:22px; 88 } 89 </style>
为了让大家方便，提供个下载。
▄︻┳═一https://files.cnblogs.com/x-xk/Jquery%E6%8F%92%E4%BB%B6-%E5%A4%9A%E6%9D%A1%E6%89%93%E5%88%86.zip
我也不知道我这个规范不规范，但是能用。精通插件的高手，请指点我一二 谢谢了........o(∩_∩)o
我期待能让插件更简单。
