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

Posted Опубликовал cross в Дизайн и юзабилити, Разработка сайтов     Comments 20 comments
Янв
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|количество голосовавших" в базе данных. Все остальные надстройки каждый уже сможет дописать для себя сам. Примерно вот так это может выглядеть у вас:

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

  1. Индексация и настрой… или все будет Х
  2. Все будет X…
  3. Наверное и Вы хотите $300 за час работы?
  4. А Вы хотите выкинуть $90 ?
  5. Закругляя края

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

  • Прикрутил бы голосовалку к этой записи для примера. Один вопрос: оно перегружает страницу при нажатии?

  • Нет, не перегружает. Тут полнейший Ajax :)

  • ништяк

  • Ajax в массы! :twisted:

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

    Те возможности, которые дает JavaScript и Ajax способны перевернуть интернет…

  • Да кой чего приходится писать самому.

  • спасибо.

  • Спасибо. Отличный блог! :wink:

  • спасибо! супер!

  • Спасибо, интересно

  • Не за что, надеюсь все кому действительно нужно это голосование – нашли для себя пользу.

  • Спасибо за полезный скрипт !

  • Поставлю себе, вроде хорошо смотриться

  • Защита от накрутки? Хотя бы самая простая? Где?

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

    В данном же примере – просто принцип голосования описан.

  • я НЕ понимаю куда именно его вставить(

  • Даже не знаю, что сказать :)

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

  • При особом желании можешь написать мне в асю и я помогу реализовать твою идею. Врядли это невозможно сделать :)

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

Оставить коммент

Donation Bar

Order Links

Топ комментаторов

  • No commentators.