星级选择器 提交代码

星级选择器 提交代码

星级选择器，提交代码适用于评论等

没有用到js库，就是单独的js代码

演示

XML/HTML Code

1. <form action="" method="get">
2. <div id="star_level" star_width="14">
3. <p>服务</p>
4. <ul class="star_rating">
5. <li style="display:none;">
6. <input type="text" name="serve" value="" />
7. </li>
8. <li class="current_rating">default level</li>
9. <li><a href="#" title="1 of 5 stars" class="one_star">1</a></li>
10. <li><a href="#" title="2 of 5 stars" class="two_stars">2</a></li>
11. <li><a href="#" title="3 of 5 stars" class="three_stars">3</a></li>
12. <li><a href="#" title="4 of 5 stars" class="four_stars">4</a></li>
13. <li><a href="#" title="5 of 5 stars" class="five_stars">5</a></li>
14. </ul>
15. <p>价格</p>
16. <ul class="star_rating">
17. <li style="display:none;">
18. <input type="text" name="price" value="" title="这里设置为2的话，表示默认2颗星亮。" />
19. </li>
20. <li class="current_rating">default level</li>
21. <li><a href="#" title="1 of 5 stars" class="one_star">1</a></li>
22. <li><a href="#" title="2 of 5 stars" class="two_stars">2</a></li>
23. <li><a href="#" title="3 of 5 stars" class="three_stars">3</a></li>
24. <li><a href="#" title="4 of 5 stars" class="four_stars">4</a></li>
25. <li><a href="#" title="5 of 5 stars" class="five_stars">5</a></li>
26. </ul>
27. <p>质量</p>
28. <ul class="star_rating">
29. <li style="display:none;">
30. <input type="text" name="mass" value="" />
31. </li>
32. <li class="current_rating">default level</li>
33. <li><a href="#" title="1 of 5 stars" class="one_star">1</a></li>
34. <li><a href="#" title="2 of 5 stars" class="two_stars">2</a></li>
35. <li><a href="#" title="3 of 5 stars" class="three_stars">3</a></li>
36. <li><a href="#" title="4 of 5 stars" class="four_stars">4</a></li>
37. <li><a href="#" title="5 of 5 stars" class="five_stars">5</a></li>
38. </ul>
39. </div>
40. <input type="submit" value="提交后请看地址栏的参数" />
41. </form>

XML/HTML Code

1. <script type="text/javascript">
2. <!--
3. function __start(){
4. var initialize_width=0;
5. if(document.getElelmentById){return false};
6. if(document.getElementsByTagName==null){return false;}
7. var startLevelObj=document.getElementById("star_level")
8. if(startLevelObj==null){return false;}
9. initialize_width=parseInt(startLevelObj.getAttribute("star_width"),10);
10. if(isNaN(initialize_width) || initialize_width==0){return false;}
11. var ul_obj=startLevelObj.getElementsByTagName("ul");
12. if(ul_obj.length<1){return false;}
13. var length=ul_obj.length;
14. var li_length=0;
15. var a_length=0;
16. var li_obj=null;
17. var a_obj=null;
18. var defaultInputObj=null;
19. var defaultValue=null;
20. for(var i=0;i<length;i++){
21. li_obj=ul_obj[i].getElementsByTagName("li");
22. li_length=li_obj.length;
23. if(li_length<0){return false;}
24. //获取默认值
25. defaultInputObj=li_obj[0].getElementsByTagName("input");if(!defaultInputObj){return false;}
26. defaultValue=parseInt(defaultInputObj[0].value,10);
27. if(!isNaN(defaultValue) && defaultValue!=0){
28. //alert("有初始值!");
29. //li_obj[1].style.width=initialize_width*defaultValue+"px";
30. //defaultValue=0;
31. }
32. for(var j=0;j<li_length;j++){
33. a_obj=li_obj[j].getElementsByTagName("a");
34. if(a_obj.length<1){continue;}
35. if(a_obj[0].className.indexOf("star")>0){
36. a_obj[0].onclick=function(){
37. return give_value(this);
38. }
39. a_obj[0].onfocus=function(){
40. this.blur();
41. }
42. }
43. }
44. }
45. }
46. function give_value(obj){
47. var status=true;
48. var parent_obj=obj.parentNode;
49. var i=0;
50. while(status){
51. i++;
52. if(parent_obj.nodeName=="UL"){break;}
53. parent_objparent_obj=parent_obj.parentNode;
54. if(i>1000){break;}//防止找不到ul发生死循环
55. }
56. var hidden_input=parent_obj.getElementsByTagName("input")[0];
57. if(hidden_input.length<1){/*alert("sorry?\nprogram error!")*/;}
58. var txt=obj.firstChild.nodeValue;//确保不能存在空格哦，因为这里用的firstChild
59. if(isNaN(parseInt(txt,10))){/*alert('level error!')*/;return false;}
60. hidden_input.setAttribute("value",txt.toString());
61. //固定选中状态,先找到初始化颜色那个li
62. var current_li=parent_obj.getElementsByTagName("li");
63. var length=current_li.length;
64. var ok_li_obj=null;
65. for(var i=0;i<length;i++){
66. if(current_li[i].className.indexOf("current_rating")>=0){
67. ok_li_obj=current_li[i];break;//找到
68. }
69. }
70. __current_width=txt*14;
71. ok_li_obj.style.width=__current_width+"px";
72. return false;
73. }
74. __start();
75. //-->
76. </script>

CSS Code

1. body{font-size:12px;}
2. ul{padding:0;margin:0;}
3. /*star.css*/
4. .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;}
5. .star_rating li{padding:0;margin:0;float:left;}
6. .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;}
7. .star_rating li a:hover{background:url(rating_stars.gif) 0 12px;z-index:2;left:0;}
8. .star_rating a.one_star{left:0;}
9. .star_rating a.one_star:hover{width:14px;}
10. .star_rating a.two_stars{left:14px;}
11. .star_rating a.two_stars:hover{width:28px;}
12. .star_rating a.three_stars{left:28px;}
13. .star_rating a.three_stars:hover{width:42px;}
14. .star_rating a.four_stars{left:42px;}
15. .star_rating a.four_stars:hover{width:56px;}
16. .star_rating a.five_stars{left:56px;}
17. .star_rating a.five_stars:hover{width:70px;}
18. .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;}
19. /*end star.css*/
20. #star_level{margin:0 0 20px 20px;}
21. #star_level p{margin:20px 0 5px 0;}

原文地址:http://www.freejs.net/article_biaodan_59.html