На некоторых сайтах, вы наверняка замечали, звездный рейтинг, благодаря которому пользователю предоставляется возможность оценить статью или присвоить ей уровень сложности. Каждый пользователь хоть раз сталкивался с такими рейтингами. В данном уроке мы рассмотрим как можно сделать такой рейтинг с помощью плагина jquery. Данный плагин весьма гибкий, и имеет множество настроек которые вы можете настроить под себя. В демонстрации приведены три варианта с различными эффектами проставления звезд. Вот как все выглядит в действии..

Для начала нам необходимо подключить библиотеку jQuery и сам плагин. Чтобы ускорить сайт и разгрузить его от скриптов, мы будем подключать скрипт jQuery с репозитория Google. Данный код необходимо разместить между тегами head на Вашем сайте.

Затем, как все необходимые стили и библиотеки подключены, можно вызывать сам плагин. Для этого в нужное место на Вашей странице необходимо вставить div, например, с классом rating:

Теперь к этому элементу можно вызвать плагин следующим образом:

Далее мы рассмотрим ,как можно рядом с рейтингом вывести количество голосов, внутрь нашего элемента, необходимо добавить еще одно скрытое поле для ввода с классом votes:

Вот что у нас получаться в конечном результате. Ничего сложно.

Читайте также: