БлогNot. Рейтинг со звёздочками без скриптов и графики

Рейтинг со звёздочками без скриптов и графики

Некогда мы писали "простой рейтинг со звёздочками", предполагающий использование JQuery, а значит, и Javascript. И если без серверной стороны скрипта для сохранения сделанных пользователями кликов нам всё равно не обойтись, то клиентская часть, то есть, выбор пользователем оценки сайта, вполне может быть сделана без любых яваскриптов и без графики, а только с помощью разметки HTML и стиля CSS.

Не выполняя сохранения сделанных посетителями этой статьи оценок, дадим всю нужную разметку.

Что касается обработки данных, её можно выполнять так же, как в статье по ссылке, например, при программировании на PHP мы можем извлечь нашу оценку из массива $_POST в виде $_POST['rating'], причём, возможными значениями величины будут строки '1', '2', ..., '5'.

Вот разметка формы для отправки рейтинга, разумеется, в ней может быть сколько угодно других полей:

<div class="rating-wrapper">
 <form method="post" action="">
  <!-- впишите URL скрипта обработки данных в атрибут action -->
  <!-- впишите остальной код формы -->
  <p>Выберите оценку:</p>
  <div class="rating-area">
   <input type="radio" id="star-5" name="rating" value="5" checked>
    <label for="star-5" title="5 баллов"></label>
   <input type="radio" id="star-4" name="rating" value="4">
    <label for="star-4" title="4 балла"></label>    
   <input type="radio" id="star-3" name="rating" value="3">
    <label for="star-3" title="3 балла"></label>  
   <input type="radio" id="star-2" name="rating" value="2">
    <label for="star-2" title="2 балла"></label>    
   <input type="radio" id="star-1" name="rating" value="1">
    <label for="star-1" title="1 балл"></label>
  </div>
  <input type="submit" value="Отправить">
 </form>
</div>

Пример разметки для вывода рейтинга. В реальности нужное количество звёздочек будет формироваться программно, здесь мы показываем пример вывода "троечки". В строке разметки со span'ами нет символов пробелов или разрывов строк, чтобы лишние разделители не "рвали" точно указанную в классе .rating-wrapper ширину 250 пикселей.

<div class="rating-wrapper">
<span class="active"></span><span class="active"></span><span class="active"></span><span></span><span></span>
</div>

Мы применяли следующие стили CSS для всего этого:

<style>
/* класс-обёртка для рейтинга */
.rating-wrapper { 
 width: 250px;
 margin: 0 auto;
}
/* стили, нужные для формы рейтинга */
.rating-area { 
 overflow: hidden;
}
.rating-area:not(:checked) > input {
 display: none; /* радиокнопки скрыты, но работают */
}
.rating-area:not(:checked) > label {
 float: right;
 width: 50px;
 padding: 0;
 cursor: pointer;
 font-size: 50px;
 line-height: 50px;
 color: #999; /* цвет неактивных пунктов */
}
.rating-area:not(:checked) > label:before {
 content: '*';
}
.rating-area > input:checked ~ label {
 color: #090; /* цвет выделенного */
}
.rating-area:not(:checked) > label:hover,
.rating-area:not(:checked) > label:hover ~ label {
 color: #0c0; /* цвет при наведении на не выбранное */
}
.rating-area > input:checked + label:hover,
.rating-area > input:checked + label:hover ~ label,
.rating-area > input:checked ~ label:hover,
.rating-area > input:checked ~ label:hover ~ label,
.rating-area > label:hover ~ input:checked ~ label {
 color: #0c0; /* цвет при наведении */
}
.rate-area > label:active {
 position: relative;
}
/* стили, нужные для вывода рейтинга */
.rating-wrapper span {
 width: 50px;
 display: inline-block;
 margin: 0;
 padding: 0;
 font-size: 50px;
 line-height: 50px;
 color: #999;
}
.rating-wrapper > span:before {
 content: '*';
}
.rating-wrapper > span.active {
 color: #090;
}
</style>

 Этот пример в работе, открыть файл .html в кодировке Юникода UTF-8, текущее окно/вкладка (3 Кб)

На странице можно посмотреть, как работает выбор оценки, поводив и покликав мышью по верхнему ряду звёздочек (по умолчанию в разметке выбрана "5"), но кнопка отправки будет передавать данные "в никуда", то есть, исходному файлу.

02.10.2022, 15:07 [373 просмотра]


теги: html css рейтинг

К этой статье пока нет комментариев, Ваш будет первым