Ajax Russia : Аякс по-русски

Все наверное не раз видели в интернете звёздочки для рейтингов. Это мог быть рейтинг для фоток, или рейтинг для статьи на блоге или ещё что нибудь. Сейчас расскажу как сделать такой рейтинг самому.

Использовать мы будем Starbox. Starbox это скрипт на базе Prototype и Scriptaculous, который позволяет добавлять рейтинги буквально парой строчек кода.

• Установка
  Starbox требует Prototype 1.6.0.2 и Scriptaculous 1.8.1. Скачайте и подгрузите их в HEAD вместе с starbox.js и starbox.css. Картинки для звёзд надо распаковать в папку images.
  PLAIN TEXT
  HTML:

  1. <script type='text/javascript' src='js/prototype.js'></script>
  2. <script type='text/javascript' src='js/scriptaculous.js?load=effects'></script>
  3. <script type='text/javascript' src='js/starbox.js'></script>
  4. <link rel="stylesheet" type="text/css" href="css/starbox.css" />

• Использование
  Сделаем пустой DIV для рейтинга, и запустим Starbox скрипт.
  PLAIN TEXT
  HTML:

  1. <div id="rating"></div>
  2. <script type="text/javascript">
  3.   new Starbox('rating', 0);
  4. </script>

• Отправляем рейтинг на сервер
  У Starbox есть свой custom event - starbox:rated. Его мы будем ждать с помощью Prototype и посылать на сервер.
  PLAIN TEXT
  JavaScript:

  1. document.observe('starbox:rated', function(event){
  2.   function saveStar(event) {
  3.     new Ajax.Request('savestar.php', {
  4.       parameters: event.memo
  5.     });
  6.   }
  7. });

  event.memo содержит информацию на какую звезду кликнули и её рейтинг. Как обработать эти данные на сервере и записать в базу я объяснять не буду. Google вам в помощь

Скачать Starbox и почитать подробнее об использовании можно на сайте разработчика.