JQuery | Как внедрить систему звездного рейтинга с помощью RateYo
Опубликовано: 23 Декабря, 2021
rateYo : - rateYo - это плагин jQuery для создания виджета с рейтингом звезд, который позволяет заливать цвет фона звезды без рейтинга SVG (масштабируемой векторной графики), основанной на наведении курсора мыши. Он полностью настраиваемый и масштабируемый, чтобы соответствовать любым требованиям дизайна.
Шаги по внедрению системы звездного рейтинга с использованием RateYo:
- Установка:
1. # NPM Скорость установки $ npmYo 2. # Бауэр Скорость установки $ bowerYo
вы также можете использовать сеть доставки контента (CDN), размещенную в Google или Microsoft, чтобы включить версию jQuery.
<!-- Latest compiled and minified CSS -->
<
link
rel
=
"stylesheet"
href
=
" https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css "
>
<!-- Latest compiled and minified JavaScript -->
<
script
src
=
" https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js "
></
script
>
- Добавьте необходимую таблицу стилей в заголовок страницы html.
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"jquery.rateyo.min.css"
>
- Создайте div, который будет служить контейнером звездного рейтинга.
<
div
id
=
"rateYo"
></
div
>
- Добавьте необходимую таблицу стилей в основной раздел html-страницы и свяжите файл javaScript плагина rateYo для выполнения различных функций.
<
script
type
=
"text/javascript"
src
=
"jquery.min.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"jquery.rateyo.min.js"
></
script
>
- Вызовите плагин, чтобы отобразить базовый звездный рейтинг в созданном вами div rateYo.
$("#rateYo").rateYo();
Пример
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>rating</
title
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"jquery.rateyo.min.css"
>
</
head
>
<
body
>
<
div
style
=
"width: 600px; margin: 30px auto"
>
<
div
id
=
"rateYo"
></
div
>
</
div
>
<
script
type
=
"text/javascript"
src
=
"jquery.min.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"jquery.rateyo.min.js"
></
script
>
<
script
>
$("#rateYo").rateYo({
rating: 1.5,
spacing: "10px",
numStars: 5,
minValue: 0,
maxValue: 5,
normalFill: 'black',
ratedFill: 'orange',
})
</
script
>
</
body
>
</
html
>
ВЫХОД
Пишем код в комментарии? Пожалуйста, используйте ide.geeksforgeeks.org, сгенерируйте ссылку и поделитесь ею здесь.
- Добавьте необходимую таблицу стилей в заголовок страницы html.