Используйте звездный рейтинг Font Awesome для переключателей

Я пытаюсь загрузить какой-нибудь шрифт awesome css для отображения звездного рейтинга вместо переключателей по умолчанию.

Я использую его для интернет-магазина Magento, который использует звездный рейтинг.
Код по умолчанию является динамическим и выглядит так:

            <?php foreach ($this->getRatings() as $_rating): ?>
                <tr>
                    <th><?php echo $this->escapeHtml($_rating->getRatingCode()) ?></th>
                <?php foreach ($_rating->getOptions() as $_option): ?>
                    <td class="value"><input type="radio" name="ratings[<?php echo $_rating->getId() ?>]" id="<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>_<?php echo $_option->getValue() ?>" value="<?php echo $_option->getId() ?>" class="radio" /><label class = "full" for="<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>_<?php echo $_option->getValue() ?>"></label></td>
                <?php endforeach; ?>
                </tr>
            <?php endforeach; ?>

Я пробовал этот JSFiddle, но у меня не получается, что он будет заполнять звезды на основе обзора. Таким образом, вход 5 будет заполнен 5 звездами. Поэтому также; http://codepen.io/jamesbarnett/pen/vlpkh

Что я делаю неправильно?

https://jsfiddle.net/tLj2ybnu/7/


html css magento jsfiddle
person JGeer    schedule 30.05.2015    source источник

Ответы (2)


arrow_upward
2
arrow_downward

https://jsfiddle.net/tLj2ybnu/4/

Изменять:

.rating > label:before

To:

.rating label:before
person Someone    schedule 30.05.2015
comment
Спасибо! Но я хочу полностью удалить радиокнопки. См. Этот пример codepen.io/jamesbarnett/pen/vlpkh - person JGeer; 30.05.2015
comment
Спасибо, а как сделать так, чтобы он заливал все остальные звезды? Таким образом, если дать отзыв с 5 звездами, он получит 5 звезд. - person JGeer; 30.05.2015
comment
Почти, но для этого нужно заполнить все звезды, расположенные слева направо. Как и в этом примере, codepen.io/jamesbarnett/pen/vlpkh - person JGeer; 30.05.2015

arrow_upward
0
arrow_downward

Он не может работать с вашей текущей структурой HTML. Он работает только с использованием последовательности <label>, прикрепленных через for="idOfInput" к некоторому скрытому <input type="radio" />, непосредственно предшествующему каждой метке. Все эти элементы должны находиться рядом друг с другом, то есть на одном уровне DOM, иметь один и тот же родительский элемент. В противном случае вам понадобится какой-то родительский селектор в CSS, а его просто не существует.

Вы сами связали в комментарии именно то, что вам нужно. Использование изображения вместо символа работает почти идентично, но решение требует намного меньше CSS.

http://codepen.io/anon/pen/KpaZYJ

.rating-wrapper {
  overflow: hidden;
  display: inline-block;
}

.rating-input {
  position: absolute;
  left: 0;
  top: -50px;
}

.rating-star:hover,
.rating-star:hover ~ .rating-star {
  background-position: 0 0;
}

.rating-wrapper:hover .rating-star:hover,
.rating-wrapper:hover .rating-star:hover ~ .rating-star,
.rating-input:checked ~ .rating-star {
  background-position: 0 0;
}

.rating-star,
.rating-wrapper:hover .rating-star {
  float: right;
  display: block;
  width: 16px;
  height: 16px;
  background: url('http://css-stars.com/wp-content/uploads/2013/12/stars.png') 0 -16px;
}
<div class="rating-wrapper">
  <input type="radio" class="rating-input" id="rating-input-1-5" name="rating-input-1" />
  <label for="rating-input-1-5" class="rating-star"></label>
  <input type="radio" class="rating-input" id="rating-input-1-4" name="rating-input-1" />
  <label for="rating-input-1-4" class="rating-star"></label>
  <input type="radio" class="rating-input" id="rating-input-1-3" name="rating-input-1" />
  <label for="rating-input-1-3" class="rating-star"></label>
  <input type="radio" class="rating-input" id="rating-input-1-2" name="rating-input-1" />
  <label for="rating-input-1-2" class="rating-star"></label>
  <input type="radio" class="rating-input" id="rating-input-1-1" name="rating-input-1" />
  <label for="rating-input-1-1" class="rating-star"></label>
</div>

Найдено на http://css-stars.com/css-star-rating/

person connexo    schedule 30.05.2015