Хотите звезд? Будет вам!

Столкнулся с задачей реализации голосования звездочками с помощью JavaScript и jQuery библиотекой. Первым же делом попробовал найти готовую плюшку, но к сожалению не нашел реализации этой достаточно популярной идеи. Даже библиотека Interface.js почему-то не предлагает такой возможности.

Единственное, что удалось найти - реагилизацию данного голосования под библиотеку Prototype в плагине Starbox, но как показала практика использование jQuery и Prototype в одном проекте достаточно сильно его отягощают, что, естественно, крайне нежелательно. Хотя плагин и позволяет настроить голосование любым образом под себя, с кучей настроек и уже готовыми функциями обработки, от этого варианта все же пришлось избавиться и написать собственный скрипт голосования.

Файл index.php:

   echo '<h2 class="title">Голосование</h2><br>

       <div id="rate_div" class="rate_div"></div>

    <script language="javascript" type="text/javascript">
     function select_star($star)
     {
      for($i=$star+1;$i<10;$i++)
                         jQuery("img#star"+$i).attr("src","/images/star2.gif");

      for($i=0;$i<$star+1;$i++)
                         jQuery("img#star"+$i).attr("src","/images/star1.gif");
     }

     function set_star($mark)
     {
      for($i=Math.round($mark/10);$i<10;$i++)
                         jQuery("img#star"+$i).attr("src","/images/star2.gif");

      for($i=0;$i<Math.round($mark/10);$i++)
                         jQuery("img#star"+$i).attr("src","/images/star1.gif");
     }

     function submit_vote($vote)
     {
      jQuery.post("/scripts/vote.php",
        { id: '.$vars['id'].', mark: $vote },
        function(data){
           set_star(data);
        }
      );

                        for($i=0;$i<10;$i++)
                        {
                          jQuery("img#star"+$i).attr("onmouseover","").attr("onmouseout","").attr("onclick","");
                        }
     }

     for($i=0;$i<10;$i++)
                jQuery("div#rate_div").append("<img src=\"/images/star2.gif\" hspace=\"1\" id=\"star"+$i+"\" onmouseover=\"select_star("+$i+")\" onmouseout=\"set_star(34);\" onclick=\"submit_vote("+(($i+1)*10)+");\">");

                    set_star('.$vars['mark'].');
      </script>
    ';

Где $vars['mark'] - оценка текущего элемента для голосования, $vars['id'] - id для обработки результаточ текущего элемента для голосования.

Файл обработчик голосования vote.php:

<?
 include("../connection.php");

 $vote=explode("|",mysql_result(mysql_query("select rate from goods where id=".$_POST['id']),0,0));
 $vote[0]=round(($vote[0]*$vote[1]+$_POST['mark'])/($vote[1]+1));
    mysql_query("update goods set rate='".$vote[0]."|".($vote[1]+1)."' where id=".$_POST['id']);

 echo $vote[0];
?>

Где голоса хранятся в виде "оценка0-100|количество голосовавших" в базе данных. Все остальные надстройки каждый уже сможет дописать для себя сам. Примерно вот так это может выглядеть у вас: