Я нашел пример звездного рейтинга со input type="radio" .
Это фантастика, но мне хотелось бы что-то более простое. Вместо input type="radio" используйте звездную оценку с примером <span> в демонстрации (demo) .
Из следующего кода
.holder { height: 1%; overflow: hidden; position: relative; left: 0; } .left { float: left; } .rating { border: none; float: none; display: block; left: 0; } .rating>input { display: none; } .rating>label:before { margin: 5px; font-size: 1.25em; font-family: FontAwesome; display: inline-block; content: "\f005"; } .rating>.half:before { content: "\f089"; position: absolute; } .rating>label { color: #ddd; float: right; } /* Styles hover mouse stars. */ .rating>input:checked~label, /* Show gold star when clicked */ .rating:not(:checked)>label:hover, /* Hover current star */ .rating:not(:checked)>label:hover~label { color: #FFD700; } /* Hover previous stars in list */ .rating>input:checked+label:hover, /* Hover current star when changing rating */ .rating>input:checked~label:hover, .rating>label:hover~input:checked~label, /* Lighten current selection */ .rating>input:checked~label:hover~label { color: #FFED85; }
<!DOCTYPE html> <html lang="" es> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <!-- FontAwsome Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <script> $(document).ready(function() { $(document).on('submit', '#frm-rating', function() { //Get form data. var data = $(this).serialize(); //Ajax $.ajax({ type: 'POST', url: 'rating.php', data: data, success: function(data) { $("#result-rating").html(data); } }); return false; }); }); </script> </head> <body> <form id="frm-rating" method="POST"> <div class="holder"> <div class="left"> <fieldset class="rating"> <input type="radio" id="star5" name="rating" value="5" /><label class="full" for="star5" title="Excellent - 5 stars"></label> <input type="radio" id="star4half" name="rating" value="4.5" /><label class="half" for="star4half" title="very good - 4.5 stars"></label> <input type="radio" id="star4" name="rating" value="4" /><label class="full" for="star4" title="All right - 4 stars"></label> <input type="radio" id="star3half" name="rating" value="3.5" /><label class="half" for="star3half" title="All right - 3.5 stars"></label> <input type="radio" id="star3" name="rating" value="3" /><label class="full" for="star3" title="Regular - 3 stars"></label> <input type="radio" id="star2half" name="rating" value="2.5" /><label class="half" for="star2half" title="Regulate the evil - 2.5 stars"></label> <input type="radio" id="star2" name="rating" value="2" /><label class="full" for="star2" title="wrong - 2 stars"></label> <input type="radio" id="star1half" name="rating" value="1.5" /><label class="half" for="star1half" title="Very bad - 1.5 stars"></label> <input type="radio" id="star1" name="rating" value="1" /><label class="full" for="star1" title="Painful - 1 star"></label> <input type="radio" id="starhalf" name="rating" value="0.5" /><label class="half" for="starhalf" title="Waste of time - 0.5 stars"></label> </fieldset> </div> </div> <textarea name="opinion" placeholder="Write a comment..."></textarea> <!-- We use the user's session to get their ID in value --> <input type="hidden" name="user" value="1" /> <button type="submit">Submit Review</button> </form> <div id="result-rating"> <!-- Respuesta Ajax. --> </div> </body> </html>
Как я могу создавать звезды с одинаковыми характеристиками в этом коде, используя только CSS и jQuery без использования фреймворков в качестве Bootstrap или других?
<div id="rating" class="rating"> <span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <span class="stars"></span> </div>
Или этот код:
<ul class="star-rating"> <li class="star-icon">☆</li> <li class="star-icon">☆</li> <li class="star-icon">☆</li> <li class="star-icon half">☆</li> <li class="star-icon full">☆</li> </ul>
И с помощью jQuery получить выбранные значения и отправить их в базу данных.
$(document).ready(function() { $(document).on('submit', '#frm-rating', function() { //Obtenemos datos form. var data = $(this).serialize(); //Ajax $.ajax({ type: 'POST', url: 'rating.php', data: data, success: function(data) { $("#result-rating").html(data); } }); return false; }); });
Цель состоит в том, чтобы упростить оптимизацию кода.
Пример:
.star-icon { color: #ddd; font-size: 2em; position: relative; display: inline; direction: rtl; unicode-bidi: bidi-override; } .star-icon:before{ content: '\2605'; position: absolute; left: 0; } .star-icon.full:before { color: #fde16d; content: '\2605'; position: absolute; left: 0; } .star-icon.half:before { color: #fde16d; content: '\2605'; position: absolute; left: 0; width: 50%; overflow: hidden; direction: ltr; } .star-icon.half:after { content: '\2605'; position: absolute; right: 0; width: 50%; overflow: hidden; } .star-rating > li:hover, .star-rating > li:hover ~li:before, .star-rating > li:hover ~li:after { width: 100%; color: #fde16d; cursor: pointer; }тем.star-icon { color: #ddd; font-size: 2em; position: relative; display: inline; direction: rtl; unicode-bidi: bidi-override; } .star-icon:before{ content: '\2605'; position: absolute; left: 0; } .star-icon.full:before { color: #fde16d; content: '\2605'; position: absolute; left: 0; } .star-icon.half:before { color: #fde16d; content: '\2605'; position: absolute; left: 0; width: 50%; overflow: hidden; direction: ltr; } .star-icon.half:after { content: '\2605'; position: absolute; right: 0; width: 50%; overflow: hidden; } .star-rating > li:hover, .star-rating > li:hover ~li:before, .star-rating > li:hover ~li:after { width: 100%; color: #fde16d; cursor: pointer; }
<ul class="star-rating"> <li class="star-icon">☆</li> <li class="star-icon">☆</li> <li class="star-icon">☆</li> <li class="star-icon half">☆</li> <li class="star-icon full">☆</li> </ul>
Теперь, чтобы узнать, какой рейтинг пользователь выбрал через PHP и jQuery.
Что-то более динамичное.
<?php function calculate_stars($max, $rating){ $full_stars=floor($rating); $half_stars = ceil($rating-$full_stars); $gray_stars = $max-($full_stars + $half_stars); return array ($full_stars, $half_stars, $gray_stars); } function display_star($rating){ $output=""; $number_stars = calculate_stars(5,$rating); $full = $number_stars[0]; $half = $number_stars[1]; $gray = $number_stars[2]; $output ='<ul class="star-rating">'; if($gray) for ($i=0;$i<$gray;$i++) { $output .= '<li class="star-icon">☆</li>'; } if($half){ $output .= '<li class="star-icon half">☆</li>'; } if($full){ for($i=0; $i<$full;$i++) { $output .= '<li class="star-icon full">☆</li>'; } } $output .='</ul>'; return $output; } echo display_star(4.3); exit; ?>
Источник наблюдает первые 3 видеоролика, объясняющие тему.
Я не хочу использовать JavaScript; Я хочу это в jQuery.
Разметка HTML:
<ul class="c-rating"> <li class="c-rating__item rating is-active left" data-index="0"></li> <li class="c-rating__item" data-index="1"></li> <li class="c-rating__item left" data-index="2"></li> <li class="c-rating__item" data-index="3"></li> <li class="c-rating__item left" data-index="4"></li> <li class="c-rating__item" data-index="5"></li> <li class="c-rating__item left" data-index="6"></li> <li class="c-rating__item" data-index="7"></li> <li class="c-rating__item left" data-index="8"></li> <li class="c-rating__item" data-index="9"></li> </ul> <input type="hidden" class="rank" />
Я создал настраиваемый плагин jQuery для этой функции, где вам нужно передать childClass для дочернего селектора и inputClass для выбора тега.
var activeClassCount = 1; $.fn.customStarRatings = function(obj) { var wrapper = this; var stars = obj.childClass; var input = obj.inputClass; $(wrapper).hover(function() { activeClassCount = $(this).find('.rating').index() + 1; }, function() { var $this = $(this); $this.find(stars).slice(1, activeClassCount).addClass('is-active'); $this.find(stars).slice(activeClassCount, 10).not('.rating').removeClass('is-active'); // console.log($this.find(stars).slice(activeClassCount, 4).not('.rating')) }); $(stars).hover(function() { $(this).prevAll(stars).add($(this)).addClass('is-active'); $(this).nextAll(stars).removeClass('is-active'); }); $(stars).click(function(event) { $(".rating").removeClass("rating"); $(this).addClass('rating'); activeClassCount = $(this).index() + 1; $(this).prevAll(stars).addClass('is-active'); if (input) { $(input).val(($(this).index() + 1)/2); console.log($(input).val(), activeClassCount) } }); }.var activeClassCount = 1; $.fn.customStarRatings = function(obj) { var wrapper = this; var stars = obj.childClass; var input = obj.inputClass; $(wrapper).hover(function() { activeClassCount = $(this).find('.rating').index() + 1; }, function() { var $this = $(this); $this.find(stars).slice(1, activeClassCount).addClass('is-active'); $this.find(stars).slice(activeClassCount, 10).not('.rating').removeClass('is-active'); // console.log($this.find(stars).slice(activeClassCount, 4).not('.rating')) }); $(stars).hover(function() { $(this).prevAll(stars).add($(this)).addClass('is-active'); $(this).nextAll(stars).removeClass('is-active'); }); $(stars).click(function(event) { $(".rating").removeClass("rating"); $(this).addClass('rating'); activeClassCount = $(this).index() + 1; $(this).prevAll(stars).addClass('is-active'); if (input) { $(input).val(($(this).index() + 1)/2); console.log($(input).val(), activeClassCount) } }); }
Затем вам нужно просто вызвать эту функцию jQuery, когда DOM будет готов.
$(".c-rating").customStarRatings({ childClass: ".c-rating__item", inputClass: ".rank" });
PS Разметка HTML не ограничивается только тегами <ul> и <li> . Все, что вам нужно сделать, это вызвать эту настраиваемую функцию в теге обертки оценок и элемента ввода.
Редактирование CSS:
.c-rating { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; list-style: none; margin: 0; padding: 0; } .c-rating__item { -webkit-box-flex: 0; -webkit-flex: 0 0 12px; -ms-flex: 0 0 12px; flex: 0 0 12px; height: 24px; background-position: -12px 0px; background-image: url(stars.svg); cursor: pointer; } .c-rating__item.left { background-position: 0px 0px; } .c-rating__item.is-active, .c-rating__item: hover { background-position: -36px 0; } .c-rating__item.left.is-active, .c-rating__item.left: hover { background-position: -24px 0; }
Вызов jQuery для этой функции остается тем же. Проверьте рабочую скрипку здесь .