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

Опубликовал cross в Дизайн и юзабилити, Разработка сайтов

Янв
27

Столкнулся с задачей реализации голосования звездочками с помощью 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|количество голосовавших" в базе данных. Все остальные надстройки каждый уже сможет дописать для себя сам. Примерно вот так это может выглядеть у вас:

Похожие посты:

20 Комментов к “Хотите звезд? Будет вам!”

27 Январь 2008 в 20:50
mekal :

Прикрутил бы голосовалку к этой записи для примера. Один вопрос: оно перегружает страницу при нажатии?
27 Январь 2008 в 22:30
cross :

Нет, не перегружает. Тут полнейший Ajax
28 Январь 2008 в 15:07
Олег :

ништяк
28 Январь 2008 в 15:27
Абсурдный Людь :

Ajax в массы!
30 Январь 2008 в 10:37
cross :

Однозначно, и JavaScript On в любом браузере, а еще оставить только IE и Opera и жизнь наладится…

Те возможности, которые дает JavaScript и Ajax способны перевернуть интернет…
30 Январь 2008 в 21:53
Yaroslav :

Да кой чего приходится писать самому.
31 Январь 2008 в 20:54
Geek :

спасибо.
1 Февраль 2008 в 01:46
Gadget :

Спасибо. Отличный блог!
1 Февраль 2008 в 17:37
Док :

спасибо! супер!
1 Февраль 2008 в 23:06
Александр :

Спасибо, интересно
2 Февраль 2008 в 00:39
cross :

Не за что, надеюсь все кому действительно нужно это голосование – нашли для себя пользу.
4 Февраль 2008 в 20:11
VLAD :

Спасибо за полезный скрипт !
8 Февраль 2008 в 18:30
Чук :

Поставлю себе, вроде хорошо смотриться
25 Апрель 2008 в 15:31
Antoni :

Защита от накрутки? Хотя бы самая простая? Где?
25 Апрель 2008 в 15:49
cross :

Наверное в посте о защите от накрутки голосования звездочками с помощью jQuery Ajax.

В данном же примере – просто принцип голосования описан.
24 Июнь 2008 в 07:19
Я :

я НЕ понимаю куда именно его вставить(
24 Июнь 2008 в 07:57
cross :

Даже не знаю, что сказать
17 Июль 2008 в 10:03
LorDEreTik :

а можеш написать пример с Radio.
т.к. id приходиться же присваивать к каждому радио, а их я формирую в цикле.
и вот у меня небольшая проблемка такой реализации =(
17 Июль 2008 в 10:13
cross :

При особом желании можешь написать мне в асю и я помогу реализовать твою идею. Врядли это невозможно сделать
17 Сентябрь 2010 в 16:23
a.yanyuk :

Столкнулся с задачей “пользователь голосует только один раз”. Какие есть варианты решения?)