Как сделать звездочный рейтинг html
Как сделать звездочный рейтинг html
БлогNot. Пишем простой «рейтинг со звёздочками» для сайта
Пишем простой «рейтинг со звёздочками» для сайта
На многих сайтах вы видели систему «рейтинга со звёздочками», позволяющего вашим посетителям легко оценить тот или иной материал одним кликом мыши.
Напишем собственную, по возможности, простейшую форму такого рейтинга.
Предполагается, что Вы умеете работать с локальным хостом, исходниками на HTML и PHP, а также подключаться к серверу баз данных MySQLi, если это не так, почитайте сначала материалы для начинающих.
Создадим на локальном хосте папку stars для файлов скрипта. Весь код будем писать в файле index.html в кодировке Юникода UTF-8 с таким вот обрамлением HTML5:
Перед закрывающей частью подключим библиотеку JQuery. Для нашей цели хватит возможностей первой её версии, так что не будем гнаться за самой новой:
Внутри тега поместим форму для добавления звёздочек и вывода текущего рейтинга материала:
Важно, что в реальном скрипте идентификатор db_1 должен формироваться программно и получать после префикса db_ номер записи (идентификатор) некоторой страницы, на которой расположен рейтинг и которая сейчас оценивается.
То есть, id этого элемента получает, например, значение db_999 для записи моего блога с идентификатором 999.
За картинкой мы поместим абзац с id=»progress_id» и жёлтым фоном, а потом будем динамически менять ширину этого абзаца в ситуациях, когда мышь находится поверх звёздочек.
Клик по звёздочкам вызовет выполнение серверного скрипта, где наш выбор будет либо сохранён в базе, либо проигнорирован, если мы уже голосовали.
Внешний вид скрипта готов, можно выполнить в браузере ссылку http://localhost/stars/ и увидеть это.
Теперь добавим логику приложения, которая будет реализована в виде яваскрипта, его также можно добавить перед после тега подключения JQuery:
Шаг по оценке равен 0.5, то есть, можно выставить 0 баллов, 0.5, 1, и так далее до 5.
Кроме того, вторая таблица необязательна, вы можете просто добавить столбцы points и votes в ту таблицу, откуда берутся оцениваемые материалы и их идентификаторы, такие как db_1 выше в коде.
Вот SQL-запрос, который нужно выполнить к выбранной базе:
Наконец, напишем серверный скрипт rating.php и разместим его в папке приложения.
Вы можете посмотреть, что у нас получилось, по ссылке, а также использовать эти наработки для своих скриптов, которые нужно сделать ещё умнее и красивей 🙂
Ну а я себе в блог добавлять такой рейтинг не буду, не хочу каждый раз подгружать JQuery 🙂 Впрочем, помните, что всегда можно переписать код без него, это всего лишь библиотека, а не язык программирования.
31.01.2019, 16:15; рейтинг: 3518
Звездный рейтинг на CSS
Звездный рейтинг является классическим элементом интерфейса пользователя. Любому веб мастеру хотя бы раз приходилось иметь дело со «звездочками». В данном уроке представлена идея, как сделать интерфейсную часть рейтинга без JavaScript несколькими строчками кода CSS.
В разметке используется символ юникода звезда (?). Если вы устанавливаете для своих документов кодировку UTF-8, то все должно пройти без проблем. В качестве альтернативы можно использовать ☆. Можно устанавливать столько звезд, сколько захочется:
Далее нужно преобразовать «пустую» звезду в «заполненную» при наведении курсора мыши (поискать такой символ можно на сайте Gallery). легко решается путем размещения псевдо-элемента с «заполненной» звездой (?) сверху для псевдо-класса :hover:
Но так мы имеем дело только с одной звездой. А правила шаблон интерфейса требуют, чтобы все звезды были «заполнены». Например, если курсор мыши наволится поверх 4-й звезды, то все 4-е звезды должны стать «заполненными», то есть 1-я, 2-я, 3-я и 4-я.
Получаем работающий шаблон. Вот полный код:
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: css-tricks.com/star-ratings/
Перевел: Сергей Фастунов
Урок создан: 10 Февраля 2012
Просмотров: 45193
Правила перепечатки
5 последних уроков рубрики «CSS»
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
Раскрывающаяся навигация
Экспериментальный скрипт раскрывающейся навигации.