首页>>表单>>星级选择器 提交代码(2013-10-04)

星级选择器 提交代码

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

没有用到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