<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>仿淘寶星級評分效果 www.aspxhome.com</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="owner" content="" />
<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow" />
<style type="text/css">
<!-- /* 星級評分 */
.shop-rating {
height: 25px;
overflow: hidden;
zoom: 1;
padding: 2px 0px;
position: relative;
z-index: 999;
}
.shop-rating span {
height: 23px;
display: block;
line-height: 23px;
float: left;
}
.shop-rating span.title {
width: 125px;
text-align: right;
margin-right: 5px;
}
.shop-rating ul {
float: left;
margin: 0;
padding: 0
}
.shop-rating .result {
margin-left: 20px;
padding-top: 2px;
}
.shop-rating .result span {
color: #ff6d02;
}
.shop-rating .result em {
color: #f60;
font-family: arial;
font-weight: bold;
}
.shop-rating .result strong {
color: #666666;
font-weight: normal;
}
.rating-level,.rating-level a {
background:
url(HTTP://www.aspxhome.com/article/UploadPic/20109/3/star_v2-25.png)
no-repeat scroll 1000px 1000px;
}
.rating-level {
background-position: 0px 0px;
width: 120px;
height: 23px;
position: relative;
z-index: 1000;
}
.rating-level li {
display: inline;
}
.rating-level a {
line-height: 23px;
height: 23px;
position: absolute;
top: 0px;
left: 0px;
text-indent: -999em;
*zoom: 1;
outline: none;
}
.rating-level a.one-star {
width: 20%;
z-index: 6;
}
.rating-level a.two-stars {
width: 40%;
z-index: 5;
}
.rating-level a.three-stars {
width: 60%;
z-index: 4;
}
.rating-level a.four-stars {
width: 80%;
z-index: 3;
}
.rating-level a.five-stars {
width: 100%;
z-index: 2;
}
.rating-level .current-rating,.rating-level a:hover {
background-position: 0 -28px;
}
.rating-level a.one-star:hover,.rating-level a.two-stars:hover,.rating-level a.one-star.current-rating,.rating-level a.two-stars.current-rating
{
background-position: 0 -116px;
}
.rating-level .three-stars .current-rating,.rating-level .four-stars .current-rating,.rating-level .five-stars .current-rating
{
background-position: 0 -28px;
}
-->
</style>
</head>
<body>
<div class="shop-rating">
<span class="title">寶貝質量：</span>
<ul class="rating-level" id="stars1">
<li><a class="one-star" star:value="100" href="#">100</a></li>
<li><a class="two-stars" star:value="200" href="#">200</a></li>
<li><a class="three-stars" star:value="300" href="#">300</a></li>
<li><a class="four-stars" star:value="400" href="#">400</a></li>
<li><a class="five-stars" star:value="500" href="#">500</a></li>
</ul>
<span class="result" id="stars1-tips"></span>
<input type="hidden" id="stars1-input" name="a" value="" size="2" />
</div>
<!-- # 星級評分 # star:value = 分數-->
<div class="shop-rating">
<span class="title">客服服務：</span>
<ul class="rating-level" id="stars2">
<li><a class="one-star" star:value="1" href="#">1</a></li>
<li><a class="two-stars" star:value="2" href="#">2</a></li>
<li><a class="three-stars" star:value="3" href="#">3</a></li>
<li><a class="four-stars" star:value="4" href="#">4</a></li>
<li><a class="five-stars" star:value="5" href="#">5</a></li>
</ul>
<span class="result" id="stars2-tips"></span>
<input type="hidden" id="stars2-input" name="b" value="" size="2" />
</div>
<!-- END 星級評分 -->
<!-- # 星級評分 # star:value = 分數-->
<div class="shop-rating">
<span class="title">物流速度：</span>
<ul class="rating-level" id="stars3">
<li><a class="one-star" star:value="1" href="#">1</a></li>
<li><a class="two-stars" star:value="2" href="#">2</a></li>
<li><a class="three-stars" star:value="3" href="#">3</a></li>
<li><a class="four-stars" star:value="4" href="#">4</a></li>
<li><a class="five-stars" star:value="5" href="#">5</a></li>
</ul>
<span class="result" id="stars3-tips"></span>
<input type="hidden" id="stars3-input" name="b" value="" size="2" />
</div>
<!-- END 星級評分 -->
<input type="button" value="test" οnclick="teststars()" />
<script type="text/javascript">
var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } }}
var Extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; }}
function stopDefault( e ) { if ( e && e.preventDefault ){ e.preventDefault(); }else{ window.event.returnValue = false; } return false;} /** * 星星打分組件 * * @author Yunsd * @date 2010-7-5 */
var Stars = Class.create();Stars.prototype = { initialize: function(star,options) { this.SetOptions(options);
//默認屬性
var flag = 999; //定義全局指針
var isIE = (document.all) ? true : false; //IE?
var starlist = document.getElementById(star).getElementsByTagName('a'); //星星列表
var input = document.getElementById(this.options.Input) || document.getElementById(star+"-input"); // 輸出結果
var tips = document.getElementById(this.options.Tips) || document.getElementById(star+"-tips"); // 打印提示
var nowClass = " " + this.options.nowClass; // 定義選中星星樣式名
var tipsTxt = this.options.tipsTxt; // 定義提示文案
var len = starlist.length; //星星數量
for(i=0;i<len;i++){
// 綁定事件 點擊 鼠標滑過
starlist[i].value = i;
starlist[i].onclick = function(e){
stopDefault(e);
this.className = this.className + nowClass;
flag = this.value;
input.value = this.getAttribute("star:value");
tips.innerHTML = tipsTxt[this.value]
}
starlist[i].onmouseover = function(){
if (flag< 999){
var reg = RegExp(nowClass,"g");
starlist[flag].className = starlist[flag].className.replace(reg,"")
}
}
starlist[i].onmouseout = function(){
if (flag< 999){
starlist[flag].className = starlist[flag].className + nowClass;
}
}
};
if (isIE){
//FIX IE下樣式錯誤
var li = document.getElementById(star).getElementsByTagName('li');
for (var i = 0, len = li.length; i < len; i++) {
var c = li[i];
if (c)
{
c.className = c.getElementsByTagName('a')[0].className;
}
}
}
},
//設置默認屬性
SetOptions: function(options) { this.options = {
//默認值
Input: "",
//設置觸保存分數的
Tips: "",//設置提示文案容器
nowClass: "current-rating",
//選中的樣式名
tipsTxt: ["1分-嚴重不合格","2分-不合格","3分-合格","4分-優秀","5分-完美"]
//提示文案
};
Extend(this.options, options || {}); }}/* For TEST */
function teststars(){
alert(document.getElementById("stars1-input").value + "|" + document.getElementById("stars2-input").value)
}
var Stars1 = new Stars("stars1",{nowClass:"current-rating",tipsTxt:["100分-嚴重不合格","200分-不合格","300分-合格","400分-優秀","500分-完美"]});
var Stars2 = new Stars("stars2");
var Stars3 = new Stars("stars3",{nowClass:"current-rating",tipsTxt:["100分-嚴重不合格","200分-不合格","300分-合格","400分-優秀","500分-完美"]});
</script>
</body>
</html>
