<! 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> title </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">
<! --
Body {Background: # FFF; text-align: center; margin: 0 auto; padding: 0; Font: 12px Arial; color: #000; line-Height: 1.2em}
Div, form, IMG, UL, ol, Li, DL, DT, DD {margin: 0; padding: 0; Border: 0 ;}
H1, H2, H3, H4, H5, H6 {margin: 0; padding: 0 ;}
Table, TD, TR, Th {font-size: 12px ;}
/* Star rating */
. 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 {
Background: URL (http://a.tbcdn.cn/app/rc/img/star_v2.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 {
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. one-star: hover ,. rating-Level. two-stars: hover ,. rating-Level. one-star.current-rating ,. rating-Level. two-stars.current-rating {background-position: 0-pixel PX ;}
. 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"> logistics company services: </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 Rating
# Star: value = score
-->
<Div class = "Shop-rating">
<SPAN class = "title"> logistics company services: </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 rating -->
<Input type = "button" value = "test" onclick = "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;
}
/**
* Star score component
*
* @ Author yunsd
* @ Date 2010-7-5
*/
VaR stars = Class. Create ();
Stars. Prototype = {
Initialize: function (Star, options ){
This. setoptions (options); // default attribute
VaR flag = 999; // defines the global pointer
VaR isie = (document. All )? True: false; // ie?
VaR starlist = Document. getelementbyid (STAR). getelementsbytagname ('A'); // star list
VaR input = Document. getelementbyid (this. Options. Input) | document. getelementbyid (Star + "-input"); // output the result
VaR tips = Document. getelementbyid (this. Options. Tips) | document. getelementbyid (Star + "-Tips"); // print the prompt
VaR nowclass = "" + this. Options. nowclass; // defines the selected star style name.
VaR tipstxt = This. Options. tipstxt; // define the prompt text
VaR Len = starlist. length; // number of stars
For (I = 0; I <Len; I ++) {// click to slide the mouse over the binding event
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) {// style error in fix IE
VaR li = Document. getelementbyid (STAR). getelementsbytagname ('lil ');
For (VAR I = 0, Len = Li. length; I <Len; I ++ ){
VaR c = Li [I];
If (c ){
C. classname = C. getelementsbytagname ('A') [0]. classname;
}
}
}
},
// Set the default attribute
Setoptions: function (options ){
This. Options = {// Default Value
Input: "", // set the input of the trigger save score
TIPS: "", // set the prompt text container
Nowclass: "Current-rating", // name of the selected Style
Tipstxt: ["1-severe unqualified", "2-unqualified", "3-qualified", "4-excellent ", "5 points-perfect"] // prompt text
};
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-severe unqualified", "200-unqualified ", "300-qualified", "400-excellent", "500-perfect"]})
VaR stars2 = new stars ("stars2 ")
</SCRIPT>
</Body>
</Html>
