<! DOCTYPE html>
<meta charset= "Utf-8" >
<title>jquery star reviews scoring Components </title>
<script src= "/ajaxjs/jquery-1.6.2.min.js" ></script>
<script>
var prate = function (box,callback) {
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;
if (callBack) {callBack ();}
})
}
</script>
<style type= "Text/css" >
H1{font:26px/3 ' Microsoft Yahei ', ' Simhei '; color: #000; text-indent:2em;text-shadow:1px 1px 2px #ccc}
. P_rate{height:14px;position:relative;width:80px;overflow:hidden;display:inline-block;background:url (/jscss/ demoimg/201208/rate.png) repeat-x;margin:40px 100px}
. P_rate I{position:absolute;top:0;left:0;cursor:pointer;height:14px;width:16px;background:url (/jscss/demoimg/ 201208/rate.png) Repeat-x 0-500px}
. p_rate. select{background-position:0 -32px}
. p_rate. hover{background-position:0 -16px}
</style>
<body>
<span class= "P_rate" id= "P_rate" >
<i title= "1 points" ></i>
<i title= "2 points" ></i>
<i title= "3 points" ></i>
<i title= "4 points" ></i>
<i title= "5 points" ></i>
</span>
<script>
var rate = new Prate ("P_rate", function () {
Alert (rate.index+ ' min ')
});
</script>
</body>