jquery星级评论打分组件 -

mywebcode

浏览: 999914 次

最近访客更多访客>>

u012363178

qq_33632159

cshui

dd_9921

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (2181)

社区版块

存档分类

2014-04 ( 138)
2014-03 ( 64)
2014-02 ( 54)
更多存档...

jquery星级评论打分组件

下面是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>

分享到：