JQuery | Как внедрить систему звездного рейтинга с помощью RateYo

Опубликовано: 23 Декабря, 2021

rateYo : - rateYo - это плагин jQuery для создания виджета с рейтингом звезд, который позволяет заливать цвет фона звезды без рейтинга SVG (масштабируемой векторной графики), основанной на наведении курсора мыши. Он полностью настраиваемый и масштабируемый, чтобы соответствовать любым требованиям дизайна.

Шаги по внедрению системы звездного рейтинга с использованием RateYo:

  1. Установка:
    1. # NPM
         Скорость установки $ npmYo
    2. # Бауэр
         Скорость установки $ bowerYo
    

    вы также можете использовать сеть доставки контента (CDN), размещенную в Google или Microsoft, чтобы включить версию jQuery.

    <!-- Latest compiled and minified CSS -->
    <!-- Latest compiled and minified JavaScript -->
  2. Добавьте необходимую таблицу стилей в заголовок страницы html.
    < link rel = "stylesheet" type = "text/css" href = "jquery.rateyo.min.css" >
  3. Создайте div, который будет служить контейнером звездного рейтинга.
    < div id = "rateYo" ></ div >
  4. Добавьте необходимую таблицу стилей в основной раздел html-страницы и свяжите файл javaScript плагина rateYo для выполнения различных функций.
    < script type = "text/javascript" src = "jquery.min.js" ></ script >
    < script type = "text/javascript" src = "jquery.rateyo.min.js" ></ script >
  5. Вызовите плагин, чтобы отобразить базовый звездный рейтинг в созданном вами 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 >

ВЫХОД




Предыдущий
CSS | Галерея
Следующий
Как отсортировать список в C # | List.Sort () Набор методов -1
Рекомендуемые статьи
Страница :
Статья предоставлена:
Канугаргнг
@kanugargng
Голосуйте за трудности
Теги статьи:
  • Веб-программы
  • JQuery
  • Веб-технологии
Сообщить о проблеме

JQuery

РЕКОМЕНДУЕМЫЕ СТАТЬИ

16 Февраля, 2023
16 Февраля, 2023
16 Февраля, 2023
16 Февраля, 2023
16 Февраля, 2023