Наша недавно выпущенная книга jQuery: от новичка до ниндзя , содержит множество великолепных готовых к использованию решений и обучает вас как базовым, так и более продвинутым концепциям jQuery по мере вашего продвижения. В качестве дегустатора приведу отрывок, в котором Крэйг Шарки показывает нам, как создать надежный и сложный виджет звездного рейтинга с использованием jQuery. Он доступен с клавиатуры и позволяет получить рейтинг в пол звездочки.
Если вы никогда ранее не использовали jQuery, скачайте бесплатный образец PDF и начните работу с введением в Главе 2. Глава 7, из которой взята эта статья, также включена в загрузку, так что если вы предпочитаете читать этот учебник в автономном режиме, вы можете сделать это на досуге.
Вы можете получить образец кода для этой статьи здесь .
Наш клиент хочет повысить вовлеченность пользователей и помочь своим пользователям чувствовать себя важными. Мы немного подумали об этом и бросили ему идею звездного рейтинга — в конце концов, люди не любят ничего больше, чем выражать свои чувства через назначение золотых звезд. Наш новый блестящий элемент управления появится, как показано на рисунке 1, «Звездный контроль» .
Основой для контроля звездного рейтинга является группа переключателей; это идеально, так как браузер обеспечивает один выбор из группы. Вы можете выбрать диапазон, из которого вы хотите выбрать пользователя, просто добавив правильное количество кнопок:
Пример 1. chapter_07/11_star_ratings/index.html (отрывок)
<div class = "stars"> <label> <input id = "rating-1" name = "rating" type = "radio" value = "1" /> 1 звезда </ label> <label> <input id = "rating-2" name = "rating" type = "radio" value = "2" /> 2 звезды </ label> <label> <input id = "rating-3" name = "rating" type = "radio" value = "3" /> 3 звезды </ label> <label> <input id = "rating-4" name = "rating" type = "radio" value = "4" /> 4 звезды </ label> ⋮ < / DIV>
Самой сложной частью, конечно, является замена этих переключателей нашим звездным управлением. Вы можете попытаться справиться со стилем HTML-элементов управления только с помощью CSS, но это будет намного проще и гибче, если разделить элемент управления на две части: базовую модель, в которой хранятся данные, и блестящий вид со звездами. Модель, в данном случае, является исходной группой переключателей HTML . Наш план атаки — скрыть переключатели и отобразить список ссылок, которые мы добавили через jQuery, в стиле звезд. Взаимодействие со ссылками переключит выбранный переключатель. Пользователи без JavaScript просто увидят переключатели сами, что нас устраивает.
Для звезд мы будем полагаться на спрайты CSS. Таким образом, наш элемент управления будет зависеть только от одного изображения (как показано на рисунке 2, «Звездное изображение спрайта CSS» ), что экономит на HTTP-запросах и облегчает редактирование нашими графическими дизайнерами.
Наш CSS будет применять изображение спрайта CSS к ссылкам, которые мы создаем, которые представляют пол-звезды. Для перемещения между различными состояниями изображения нам просто нужно обновить свойство background-position :
Пример 2. chapter_07/11_star_ratings/stars.css (отрывок)
.stars div a {background: transparent url (sprite_rate.png) 0 0 no-repeat; дисплей: встроенный блок; высота: 23 пикс; ширина: 12 пикселей; текстовый отступ: -999em; переполнение: скрытое;}. stars a.rating-right {background-position: 0 -23px; padding-right: 6px;}. звезды a.rating-over {background-position: 0 -46px; } .stars a.rating-over.rating-right {background-position: 0 -69px; } .stars a.rating {background-position: 0 -92px; } .stars a.rating.rating-right {background-position: 0 -115px; }
Мы решили сделать так, чтобы пользователь выбирал рейтинг из четырех звезд, а не из обычных пяти. Почему? Психология пользователя! Предложите человеку среднюю дорогу, и она его возьмет; не имея посредников, мы заставляем пользователей больше думать о своем выборе. Мы добиваемся лучших результатов, и мы сможем лучше представить пользователям лучший контент (выбранный ими)!
Но четыре — это ограниченная шкала, поэтому мы хотим учесть полузвездные рейтинги. Это осуществляется с помощью оптического обмана — вы, вероятно, заметили, что наши изображения звезд делятся пополам. Наш HTML будет содержать восемь радиокнопок, и каждая из них будет стоить пол звезды. В коде есть две части для преобразования наших восьми переключателей в четыре звезды. Во-первых, функция createStars возьмет контейнер с переключателями и заменит его звездными ссылками. Затем к каждой звезде будут добавлены соответствующие обработчики событий (в методе addHandlers ), чтобы пользователь мог взаимодействовать с addHandlers управления. Вот скелет нашего объекта starRating :
Пример 3. chapter_07/11_star_ratings/script.js (отрывок)
var starRating = {create: function (selector) {$ (selector) .each (function () {// Скрыть переключатели и добавлять звёздные ссылки}); }, addHandlers: function (item) {$ (item) .click (function (e) {// Обрабатывать щелчок звездой}) .hover (function () {// Обрабатывать наведение звездочки}}, function () {// Обрабатывать звезда зависает}); }}
Метод create перебирает каждый контейнер, соответствующий селектору, который мы передаем, и создает список ссылок, которые действуют как прокси для переключателей. Эти ссылки — то, что мы сделаем так, чтобы они выглядели как звезды. Он также скрывает оригинальные элементы формы, поэтому пользователь видит только наши милые звезды:
Пример 4. chapter_07/11_star_ratings/script.js (отрывок)
$ (селектор) .each (function () {var $ list = $ ('<div> </ div>'); // перебирать все переключатели в каждом контейнере $ (this) .find ('input: radio' ) .each (function (i) {var rating = $ (this) .parent (). text (); var $ item = $ ('<a href="#"> </a>') .attr (' title ', rating) .addClass (i% 2 == 1?' rating-right ':' ') .text (rating); starRating.addHandlers ($ item); $ list.append ($ item); if ($ (this) .is (': checked')) {$ item.prevAll (). andSelf (). addClass ('rating');}});
Мы начинаем с создания контейнера для новых ссылок (элемент div ); мы создадим одну новую ссылку для каждой из переключаемых кнопок. После выбора всех переключателей с помощью фильтра :radio , мы берем рейтинг каждого элемента и используем его для создания элемента гиперссылки.
Для действия addClass мы указываем имя класса условно с помощью тернарного оператора, основываясь на небольшом количестве математики. Как мы делали ранее в книге, мы используем оператор модуля ( % ), чтобы определить, является ли индекс четным или нечетным. Если индекс нечетный, мы добавим class rating-right ; это делает ссылку похожей на правую сторону звезды.
Как только наша ссылка будет готова, мы передадим ее методу addHandlers — здесь мы добавим события, необходимые для ее работы. Затем мы добавляем его в список контейнеров. Как только он окажется в контейнере, мы увидим, выбран ли текущий переключатель (мы используем фильтр формы :checked ). Если этот флажок установлен, мы хотим добавить class rating к этой полузвезде и ко всем полумесяцам до нее. Любой ссылке с class rating будет присвоено изображение золотой звезды (что позволит пользователям видеть текущий рейтинг).
Чтобы выбрать все элементы, которые нам нужны, чтобы превратить золото, мы собираемся заручиться поддержкой нескольких новых действий jQuery: prevAll и andSelf . Действие prevAll выбирает каждого родного брата перед текущим выбором (в отличие от действия prev , которое выбирает только непосредственно предыдущего родного брата). Для нашего примера мы хотим добавить class к предыдущим братьям и сестрам и текущему выбору. Для этого мы применяем действие andSelf , которое просто включает исходный выбор в текущий выбор. Теперь у нас есть все ссылки, которые будут золотыми, поэтому мы можем добавить class .
Вы могли догадаться, что наряду с prevAll jQuery предоставляет нам метод nextAll , который захватывает все родственные элементы элемента, встречающиеся после него в том же контейнере. JQuery 1.4 также представил два новых сопутствующих метода: prevUntil и nextUntil , Они вызываются с помощью селектора и будут сканировать одноуровневые элементы (вперед или назад, в зависимости от того, какой из них вы используете), пока они не попадут в элемент, соответствующий селектору.
Так, например, $('h2:first').nextUntil('h2'); даст вам все элементы, расположенные между первым h2 на странице и следующим h2 в том же элементе контейнера.
Если вы передадите второй параметр в prevUntil или nextUntil , он будет использоваться как селектор для фильтрации возвращаемых элементов. Так, например, если бы мы написали nextUntil('h2', 'div') , он вернул бы только элементы div между нашим текущим выбором и следующим h2 .
Выполнив всю эту тяжелую работу, мы теперь можем добавить новый список ссылок на элемент управления и избавиться от оригинальных кнопок. Теперь пользователь будет взаимодействовать только со звездами:
Пример 5. chapter_07/11_star_ratings/script.js (отрывок)
// Скрыть оригинальные радио-кнопки $ (this) .append ($ list) .find ('input: radio'). Hide ();
Элемент управления выглядит так, как будто он обретает форму, но пока ничего не делает. Нам нужно прикрепить некоторые обработчики событий и добавить некоторое поведение. Нас интересуют три события. Когда пользователи наводят курсор мыши на звезду, мы хотим обновить спрайт CSS, чтобы показать состояние наведения мыши; когда они уходят, мы хотим вернуть спрайт CSS в исходное состояние; и когда они нажимают, мы хотим сделать выбор золота:
Пример 6. chapter_07/11_star_ratings/script.js (отрывок)
$ (item) .click (function (e) {// Реагировать на щелчок звездой}). hover (function () {$ (this) .prevAll (). andSelf (). addClass ('rating-over');}) , function () {$ (this) .siblings (). andSelf (). removeClass ('rating-over');});
Функция hover это самый простой способ: при наведении курсора мы выбираем все prevAll до этого, включая текущую prevAll и andSelf class prevAll andSelf , используя prevAll и andSelf , как мы это делали в настройке. При наведении курсора мы покрываем наши базы и удаляем класс rating-over все ссылки. Об этом позаботились.
Теперь за клик:
Пример 7. chapter_07/11_star_ratings/script.js (отрывок)
// Обрабатывать звездочку + $ star.text () + ']') .attr ('флажок', правда); // Устанавливаем рейтинги
Важной частью обработки события click является обновление базовой модели переключателя. Мы делаем это, выбирая правильную радио-кнопку с :radio фильтром и селектором атрибутов, который ищет радио-кнопку, значение которой соответствует тексту текущей ссылки.
Обновив модель, мы можем вернуться к возням со спрайтами CSS. Сначала мы очищаем rating от любых ссылок, которые в данный момент есть, а затем добавляем его ко всем ссылкам, находящимся до и перед той, которую выбрал пользователь. Последнее касание — отмена действия ссылки по умолчанию, поэтому нажатие на звездочку не вызывает изменения местоположения. ,
Надеюсь, вам понравился весь вкус jQuery, который содержится в jQuery: от новичка до ниндзя . Не забудьте взять бесплатный образец PDF , который содержит этот пример, а также более 150 страниц более полезного учебного материала. Если вы уже проданы, вы можете купить книгу прямо у SitePoint .