Системы рейтинга используются достаточно широко на различных сайтах. В данном уроке мы создадим интерфейс такой системы с интерактивностью.
С помощью плагина
jQuery Color мы будем анимировать изменение цвета. Просто используем функцию animate(), чтобы получить отличный переход между разными цветами. В сочетании со скругленными углами и тенями CSS3 получится отличный интерфейс для цветной системы рейтинга.
Так как CSS3 поддерживается не всеми браузерами, то в полную силу система будет работать только в новейших программах для просмотра интернета. В остальных браузерах вместо кругов будут выводиться прямоугольники, а в остальном функционал сохранится.
HTML
Для системы рейтинга будет использоваться минимум кода разметки:
<ul id="rating">
<li><a href="#">Просто кусочек кала</a></li>
<li><a href="#">Ничего нового и интересного</a></li>
<li><a href="#">Средненько, хотя мне нравится</a></li>
<li><a href="#">Хорошо, давайте еще</a></li>
<li><a href="#">Самое лучшее, что может быть</a></li>
</ul>
Обязательно включите в раздел head подключение jQuery и плагина Color.
CSS
Как и код HTML, CSS также достаточно простой. Список рейтинга выводится в режиме inline, а для каждого пункта задается фиксированная ширина и высота. Обратите внимание на цвет фона кругов: #333. Свойство text-indent is used to hide the text.
#rating {
list-style:none;
width:460px;
margin:20px auto; }
#rating li {
display:inline;
float:left; }
#rating li a {
display:block;
width:80px;
height:80px;
margin:5px;
border:1px solid #888;
background-color:#333;
text-indent:-9999px;
-moz-box-shadow:0 0 5px #888;
-moz-border-radius:40px;
-webkit-box-shadow:0 0 5px #888;
-webkit-border-radius:40px;
-o-box-shadow:0 0 5px #888;
-o-border-radius:40px; }
#ratinginfo {
clear:left;
width:350px;
margin:120px auto; }
#ratinginfo p {
text-align:center;
background-image:url("../images/textbg.png");
font:20px Georgia,'Times New Roman',serif;
padding:10px;
-moz-box-shadow:0 0 5px #888;
-moz-border-radius:40px;
-webkit-box-shadow:0 0 5px #888;
-webkit-border-radius:40px;
-o-box-shadow:0 0 5px #888;
-o-border-radius:40px; }
В коде CSS имеются стили для идентификатора #ratinginfo. В jQuery будет создаваться элемент, в котором отображается дополнительная информация о пункте рейтинга.
jQuery
После загрузки jQuery и плагина Color, мы готовы использовать JavaScript для анимации смены цветов кругов и вывода текста дополнительной информации.
// Длительность анимации
var animationTime = 500;
// Используемые цвета
var colours = ["bd2c33", "e49420", "ecdb00", "3bad54", "1b7db9"];
Нам понадобится несколько переменных. Первая хранит время анимации (для эффекта затухания). Вторая является массивом цветов, которые используются для пунктов оценки. Мы создаем пять степеней оценки, поэтому будут использоваться пять цветов.
// Добавляем информацию о рейтинге
var ratingInfobox = $("<div />")
.attr("id", "ratinginfo")
.insertAfter($("#rating"));
// Функция для раскрашивания рейтинга
var colourizeRatings = function(nrOfRatings) {
$("#rating li a").each(function() {
if($(this).parent().index() <= nrOfRatings) {
$(this).stop().animate({ backgroundColor : "#" + colours[nrOfRatings] } , animationTime);
}
});
};
Затем jQuery динамически создает новый элемент div с идентификатором #ratinginfo (для которого был определен набор свойств в CSS). Он будет вставлен после кругов оценки.
Также определяется функция colourizeRatings. В качестве параметра она получает номер цвета (nrOfRatings), который надо установить для пунктов оценки. В ней в цикле проверяются все пункты оценки для определения верности условия того, что индекс пункта index() меньше, чем заданный nrOfRatings. Все пункты, у которых индекс меньше, будут окрашены с использованием функции animate.
Обратите внимание на небольшой кусок кода:
$(this).parent().index()
Мы запрашиваем индекс родительского элемента, чтобы знать, в какой цвет раскрашивать круг. Родительским элементом для элемента ссылки является пункт списка. Пункт списка "знает" индекс, который он имеет в списке.
// Обработка события hover
$("#rating li a").hover(function() {
// Очищаем информацию о рейтинге и выклюючаем ее панель
ratingInfobox
.empty()
.stop()
.animate({ opacity : 1 }, animationTime);
// Добавляем информацию о рейтинге
$("<p />")
.html($(this).html())
.appendTo(ratingInfobox);
// Вызываем функцию раскрашивания для заданного индекса рейтинга
colourizeRatings($(this).parent().index());
}, function() {
// Отключаем панель информации рейтинга
ratingInfobox
.stop()
.animate({ opacity : 0 }, animationTime);
// Восстанавливаем оригинальный цвет
$("#rating li a").stop().animate({ backgroundColor : "#333" } , animationTime);
});
// Обрабатываем событие click и выводим рейтинг
$("#rating li a").click(function(e) {
e.preventDefault();
alert("Вы проголосовали за пункт номер " + ($(this).parent().index() + 1));
});
Обрабатываем событие hover для круга. Первым шагом нужно очистить информацию об оценке, затем добавляется новый текст и он проявляется. Далее вызывается функция colourizeRatings, которая снова использует функцию index() родителя. когда курсор мыши покидает пункт оценки, информационный блок убирается с экрана, а цвет круга снова меняется на #333.
Для демонстрационных целей также обрабатывается событие click(). Мы прерываем обработку события по умолчанию (нам не нужен переход по ссылке) и выводим сообщение для пользователя.
Вот и все, что нужно для создания интересного интерфейса системы оценки.
Заключение
В реальном проекте нужно обрабатывать событие клик с использованием AJAX запросов для учета голоса в базе данных. Также нужно сделать визуальную фиксацию оценки при нажатии левой кнопки мыши. Попробуйте сами расширить функционал кода урока.