Star Selector, submitting code is applicable to comments, etc.
No use to JS Library, is a separate JS code
Copy Code code as follows:
<form action= "" method= "get" >
<div id= "Star_level" star_width= ">"
<p> Services </p>
<ul class= "Star_rating" >
<li style= "Display:none;" >
<input type= "text" name= "Serve" value= ""/>
</li>
<li class= "current_rating" >default level</li>
<li><a href= "#" title= "1 of 5 stars" class= "One_star" >1</a></li>
<li><a href= "#" title= "2 of 5 stars" class= "Two_stars" >2</a></li>
<li><a href= "#" title= "3 of 5 stars" class= "Three_stars" >3</a></li>
<li><a href= "#" title= "4 of 5 stars" class= "Four_stars" >4</a></li>
<li><a href= "#" title= "5 of 5 stars" class= "Five_stars" >5</a></li>
</ul>
<p> Price </p>
<ul class= "Star_rating" >
<li style= "Display:none;" >
<input type= "text" name= "price" value= "title=" is set to 2, indicating that the default 2 stars are lit. "/>
</li>
<li class= "current_rating" >default level</li>
<li><a href= "#" title= "1 of 5 stars" class= "One_star" >1</a></li>
<li><a href= "#" title= "2 of 5 stars" class= "Two_stars" >2</a></li>
<li><a href= "#" title= "3 of 5 stars" class= "Three_stars" >3</a></li>
<li><a href= "#" title= "4 of 5 stars" class= "Four_stars" >4</a></li>
<li><a href= "#" title= "5 of 5 stars" class= "Five_stars" >5</a></li>
</ul>
<p> Quality </p>
<ul class= "Star_rating" >
<li style= "Display:none;" >
<input type= "text" name= "mass" value= ""/>
</li>
<li class= "current_rating" >default level</li>
<li><a href= "#" title= "1 of 5 stars" class= "One_star" >1</a></li>
<li><a href= "#" title= "2 of 5 stars" class= "Two_stars" >2</a></li>
<li><a href= "#" title= "3 of 5 stars" class= "Three_stars" >3</a></li>
<li><a href= "#" title= "4 of 5 stars" class= "Four_stars" >4</a></li>
<li><a href= "#" title= "5 of 5 stars" class= "Five_stars" >5</a></li>
</ul>
</div>
<input type= "Submit" value= "please see the Address bar parameters"/>
</form>
Copy Code code as follows:
<script type= "Text/javascript" >
<!--
function __start () {
var initialize_width=0;
if (Document.getelelmentbyid) {return false};
if (Document.getelementsbytagname==null) {return false;}
var Startlevelobj=document.getelementbyid ("Star_level")
if (Startlevelobj==null) {return false;}
Initialize_width=parseint (Startlevelobj.getattribute ("Star_width"), 10);
if (isNaN (initialize_width) | | | initialize_width==0) {return false;}
var ul_obj=startlevelobj.getelementsbytagname ("ul");
if (ul_obj.length<1) {return false;}
var length=ul_obj.length;
var li_length=0;
var a_length=0;
var li_obj=null;
var a_obj=null;
var defaultinputobj=null;
var defaultvalue=null;
for (Var i=0;i<length;i++) {
Li_obj=ul_obj[i].getelementsbytagname ("Li");
Li_length=li_obj.length;
if (li_length<0) {return false;}
Get default values
Defaultinputobj=li_obj[0].getelementsbytagname ("input"); if (!defaultinputobj) {return false;}
Defaultvalue=parseint (defaultinputobj[0].value,10);
if (!isnan (defaultvalue) && defaultvalue!=0) {
Alert ("With initial value!");
li_obj[1].style.width=initialize_width*defaultvalue+ "px";
defaultvalue=0;
}
for (Var j=0;j<li_length;j++) {
A_obj=li_obj[j].getelementsbytagname ("a");
if (a_obj.length<1) {continue;}
if (A_obj[0].classname.indexof ("star") >0) {
A_obj[0].onclick=function () {
Return Give_value (this);
}
A_obj[0].onfocus=function () {
This.blur ();
}
}
}
}
}
function Give_value (obj) {
var status=true;
var Parent_obj=obj.parentnode;
var i=0;
while (status) {
i++;
if (parent_obj.nodename== "UL") {break;}
Parent_objparent_obj=parent_obj.parentnode;
if (i>1000) {break;} To prevent the failure to find the UL cycle of death
}
var hidden_input=parent_obj.getelementsbytagname ("input") [0];
if (hidden_input.length<1) {/*alert ("Sorry?\nprogram error!") */;}
var txt=obj.firstchild.nodevalue;//ensure that no spaces exist, because the firstchild used here
if (isNaN (parseint (txt,10))) {/*alert (' Level error! ') */;return false;
Hidden_input.setattribute ("Value", txt.tostring ());
Fixed the selected state, first find the initialization color that Li
var current_li=parent_obj.getelementsbytagname ("Li");
var length=current_li.length;
var ok_li_obj=null;
for (Var i=0;i<length;i++) {
if (Current_li[i].classname.indexof ("current_rating") >=0) {
ok_li_obj=current_li[i];break;//found
}
}
__current_width=txt*14;
ok_li_obj.style.width=__current_width+ "px";
return false;
}
__start ();
-->
</script>
Copy Code code as follows:
body{font-size:12px;}
ul{padding:0;margin:0;}
/*star.css*/
. star_rating {list-style:none;margin:-1px 0 0-1px; padding:0; width:70px; height:12px; position:relative; background: URL (rating_stars.gif) 0 0 repeat-x; overflow:hidden;font-size:0;}
. star_rating Li{padding:0;margin:0;float:left;}
. star_rating Li A{display:block;width:14px;height:12px;text-decoration:none;text-indent:-9000px;z-index:20; position:absolute;padding:0;margin:0;}
. star_rating Li A:hover{background:url (rating_stars.gif) 0 12px;z-index:2;left:0;}
. star_rating a.one_star{left:0;}
. star_rating a.one_star:hover{width:14px;}
. star_rating a.two_stars{left:14px;}
. star_rating a.two_stars:hover{width:28px;}
. star_rating a.three_stars{left:28px;}
. star_rating a.three_stars:hover{width:42px;}
. star_rating a.four_stars{left:42px;}
. star_rating a.four_stars:hover{width:56px;}
. star_rating a.five_stars{left:56px;}
. star_rating a.five_stars:hover{width:70px;}
. star_rating Li.current_rating{background:url (rating_stars.gif) 0 24px;position:absolute;height:12px;display: block;text-indent:-9000px;z-index:1;left:0;}
/*end star.css*/
#star_level {margin:0 0 20px 20px;}
#star_level p{margin:20px 0 5px 0;}
