jquery星级评论打分组件
2013-03-21 17:05 java20130722 阅读(155) 评论(0) 编辑 收藏 举报下面是html源码,其中需要用到“jquery.min.js”文件和一个“rate.png”文件。
rate.png文件如下:
html源码文件如下:
<!DOCTYPE html> <!-- saved from url=(0045)http://www.nolure.com/p/demo/jquery-rate.html --> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>jquery星级评论打分组件</title> <script src="./jquery.min.js"></script> <link rel="stylesheet" href="http://www.nolure.com/p/css/base.css"> <script> function onScoreChanged(){ rs = ""; tr = document.getElementById("table_score").getElementsByTagName("tr"); if(tr.length == 0) return; // get table header header = tr[0]; for(i=1; i<tr.length; i++){ td = tr[i].getElementsByTagName("td"); rowLabel = td[0].innerHTML; for(j=1; j<td.length; j++){ } } } /* * 通用打分组件 * callBack打分后执行的回调 * this.Index:获取当前选中值 */ var pRate = function(box){ this.Index = null; var B = $("#"+box), rate = B.children("i"), w = rate.width(), n = rate.length, me = this; for(var i=0;i<n;i++){ rate.eq(i).css({ 'width':w*(i+1), 'z-index':n-i }); } rate.hover(function(){ var S = B.children("i.select"); $(this).addClass("hover").siblings().removeClass("hover"); if($(this).index()>S.index()){ S.addClass("hover"); } },function(){ rate.removeClass("hover"); }) rate.click(function(){ rate.removeClass("select hover"); $(this).addClass("select"); me.Index = $(this).index() + 1; B.parents().children("#v_rate")[0].value = "" + me.Index; alert(B.parents().children("#v_rate")[0].value); }) } </script> <style type="text/css"> .p_rate{height:14px;position:relative;width:80px;overflow:hidden;display:inline-block;background:url(rate.png) repeat-x; } .p_rate i{position:absolute;top:0;left:0;cursor:pointer;height:14px;width:16px;background:url(rate.png) repeat-x 0 -500px} .p_rate .select{background-position:0 -32px} .p_rate .hover{background-position:0 -16px} .table_score{border:1px solid #DADADA; width:500px; margin:40px 100px;} .table_score td{border:1px solid #DADADA; width:25%; text-align:center; } </style> <link type="text/css" rel="stylesheet" href="chrome-extension://cpngackimfmofbokmjmljamhdncknpmg/style.css"> <script type="text/javascript" charset="utf-8" src="chrome-extension://cpngackimfmofbokmjmljamhdncknpmg/page_context.js"></script> </head> <body screen_capture_injected="true"> <table id="table_score" class="table_score"> <tr> <td></td> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>I</td> <td> <span class="p_rate" id="rate11"> <i title="1分" style="width: 16px; z-index: 5;" class=""></i> <i title="2分" style="width: 32px; z-index: 4;" class=""></i> <i title="3分" style="width: 48px; z-index: 3;" class=""></i> <i title="4分" style="width: 64px; z-index: 2;" class=""></i> <i title="5分" style="width: 80px; z-index: 1;" class=""></i> </span> <input id="v_rate" type="hidden"> </td> <td> <span class="p_rate" id="rate12"> <i title="1分" style="width: 16px; z-index: 5;" class=""></i> <i title="2分" style="width: 32px; z-index: 4;" class=""></i> <i title="3分" style="width: 48px; z-index: 3;" class=""></i> <i title="4分" style="width: 64px; z-index: 2;" class=""></i> <i title="5分" style="width: 80px; z-index: 1;" class=""></i> </span> <input id="v_rate" type="hidden"> </td> <td> <span class="p_rate" id="rate13"> <i title="1分" style="width: 16px; z-index: 5;" class=""></i> <i title="2分" style="width: 32px; z-index: 4;" class=""></i> <i title="3分" style="width: 48px; z-index: 3;" class=""></i> <i title="4分" style="width: 64px; z-index: 2;" class=""></i> <i title="5分" style="width: 80px; z-index: 1;" class=""></i> </span> <input id="v_rate" type="hidden"> </td> </tr> <tr> <td>II</td> <td> <span class="p_rate" id="rate21"> <i title="1分" style="width: 16px; z-index: 5;" class=""></i> <i title="2分" style="width: 32px; z-index: 4;" class=""></i> <i title="3分" style="width: 48px; z-index: 3;" class=""></i> <i title="4分" style="width: 64px; z-index: 2;" class=""></i> <i title="5分" style="width: 80px; z-index: 1;" class=""></i> </span> <input id="v_rate" type="hidden"> </td> <td> <span class="p_rate" id="rate22"> <i title="1分" style="width: 16px; z-index: 5;" class=""></i> <i title="2分" style="width: 32px; z-index: 4;" class=""></i> <i title="3分" style="width: 48px; z-index: 3;" class=""></i> <i title="4分" style="width: 64px; z-index: 2;" class=""></i> <i title="5分" style="width: 80px; z-index: 1;" class=""></i> </span> <input id="v_rate" type="hidden"> </td> <td> <span class="p_rate" id="rate23"> <i title="1分" style="width: 16px; z-index: 5;" class=""></i> <i title="2分" style="width: 32px; z-index: 4;" class=""></i> <i title="3分" style="width: 48px; z-index: 3;" class=""></i> <i title="4分" style="width: 64px; z-index: 2;" class=""></i> <i title="5分" style="width: 80px; z-index: 1;" class=""></i> </span> <input id="v_rate" type="hidden"> </td> </tr> </table> <script> // getElementsByClassName not supportted in IE8 and previous vertion var lis = document.getElementById('table_score').getElementsByTagName('span'); for(var i=0;i<lis.length;i++){ var Rate = new pRate(lis[i].id); } </script> <input id="rate_result" type="hidden"> <div> <object id="ClCache" click="sendMsg" host="" width="0" height="0"></object> </div> </body> </html>