Я смотрел плагин jquery и задавался вопросом, как адаптировать этот плагин, чтобы превратить число (например, 4.8618164) в 4.8618164 звезды, заполненные из 5. В основном интерпретация числа <5 в звезды, заполненные в 5-звездочной рейтинговой системе с использованием jQuery / JS / CSS.
Обратите внимание, что это будет отображать только рейтинг в звездах из уже доступного числа и не принимать новые представления оценок.
javascript
jquery
css
rating
Стив
источник
источник
Ответы:
Вот решение для вас, использующее только одно очень маленькое и простое изображение и один автоматически сгенерированный элемент span:
CSS
Образ
Примечание: делать НЕ хотлинк к изображению! Скопируйте файл на свой сервер и используйте его оттуда.
jQuery
Если вы хотите ограничить звезды размером только половину или четверть звезды, добавьте одну из этих строк перед
var size
строкой:HTML
использование
Вывод
Демо
Вероятно, это подойдет вам. С помощью этого метода вам не нужно рассчитывать ширину звезды в три четверти или еще много чего, просто дайте ему поплавок, и он даст вам ваши звезды.
Небольшое объяснение того, как представлены звезды, было бы уместно.
Сценарий создает два элемента span на уровне блока. Оба интервала изначально получают размер 80 пикселей * 16 пикселей и фоновое изображение stars.png. Пролеты вложены друг в друга, поэтому структура пролетов выглядит так:
Внешний пролет получает
background-position
оф0 -16px
. Это делает видимыми серые звезды во внешнем пролете. Поскольку внешний диапазон имеет высоту 16 пикселей иrepeat-x
будет отображаться только 5 серых звезд.Внутренняя оболочка с другой стороны , есть
background-position
из0 0
которых делает только желтые звезды видны.Это, конечно, будет работать с двумя отдельными файлами изображений, star_yellow.png и star_gray.png. Но поскольку звезды имеют фиксированную высоту, мы можем легко объединить их в одно изображение. Это использует технику спрайтов CSS .
Теперь, когда пролеты вложены, они автоматически накладываются друг на друга. В случае по умолчанию, когда ширина обоих промежутков составляет 80 пикселей, желтые звезды полностью закрывают серые звезды.
Но когда мы регулируем ширину внутреннего пролета, ширина желтых звезд уменьшается, открывая серые звезды.
С точки зрения доступности было бы разумнее оставить число с плавающей запятой внутри внутреннего диапазона и скрыть его
text-indent: -9999px
, чтобы люди с выключенным CSS видели хотя бы число с плавающей запятой вместо звездочек.Надеюсь, это имело смысл.
Обновлено 22.10.2010
Теперь еще компактнее и труднее для понимания! Также можно сжать до одного вкладыша:
источник
max-width
).Если вам нужно поддерживать только современные браузеры, вы можете обойтись:
Вам нужно только преобразовать число в
class
, напримерclass='stars-score-50'
.Сначала демонстрация "визуализированной" разметки:
Затем демонстрация, в которой используется небольшой фрагмент кода:
Самые большие недостатки этого решения:
width
установки псевдоэлемента).Чтобы исправить это, приведенное выше решение можно легко настроить.
:before
И:after
биты должны стать фактическими элементами в DOM (так что нам нужно некоторое JS для этого).Последний оставлен в качестве упражнения для читателя.
источник
Попробуйте эту вспомогательную функцию / файл jquery
jquery.Rating.js
index.html
источник
Почему бы просто не иметь пять отдельных изображений звезды (пустое, заполненное на четверть, наполовину полное, заполненное на три четверти и полное), а затем просто вставить изображения в ваш DOM в зависимости от усеченного или округленного значения рейтинга, умноженного на 4 ( получить целую цифру по кварталам)?
Например, 4,8618164, умноженное на 4 и округленное, дает 19, что дает четыре и три четверти звезды.
В качестве альтернативы (если вы ленивы, как я), просто выберите одно изображение из 21 (от 0 до 5 звезд с шагом в одну четверть) и выберите одно изображение на основе вышеупомянутого значения. Тогда это всего лишь одно вычисление, за которым следует изменение изображения в DOM (вместо того, чтобы пытаться изменить пять разных изображений).
источник
В итоге я отказался от JS, чтобы избежать задержки рендеринга на стороне клиента. Для этого я генерирую HTML следующим образом:
Чтобы облегчить доступ, я даже добавляю необработанное значение рейтинга в атрибут title.
источник
используя jquery без прототипа, обновите код js до
Я также добавил атрибут данных по имени рейтинга данных в диапазоне.
источник
ДЕМО
Вы можете сделать это только с двумя изображениями. 1 пустая звезда, 1 закрашенная звезда.
Наложите заполненное изображение поверх другого. и преобразовать число рейтинга в проценты и использовать его как ширину изображения заливки.
источник
Вот мой вариант использования JSX и font awesome, но с точностью до 0,5:
Первая строка предназначена для всей звезды, а вторая строка - для половинной звезды (если есть).
источник