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

Демо

Источник

Источник этого плагина я брал от сюда (https://github.com/robertlabrie/bootstrap-star-rating).

Инструкция к использованию

Плагин сам по себе очень простой и в нем не так много настроек. Ниже, я опишу некоторые из них, чтобы вам было понятнее как с ним работать.

Возьмем для начала участок этого кода.

$(document).ready(function() {

  $("#stars-default").rating();
  $("#stars-green").rating('create', {
    coloron: 'green',
    onClick: function() {
      alert('rating is ' + this.attr('data-rating'));
    }
  });
  $("#stars-herats").rating('create', {
    coloron: 'red',
    limit: 10,
    glyph: 'glyphicon-heart'
  });
});

Этот код используется как стандартный код из демо, который находится вверху этого поста. Немного разберем его.

$("#stars-default").rating();

Эта строчка устанавливает стандартные значения плагина. У вас будет 5 звезд и при нажатии на них вы увидите, сколько из них вы выбрали.

$("#stars-green").rating('create', {
    coloron: 'green',
    onClick: function() {
      alert('Вы поставили ' + this.attr('data-rating'));
    }
  });

В данном случае, внутри .rading добавляются разные параметры. Например, coloron: ‘green’, что означает, что все звезды будут зеленого цвета. onClick — всего лишь функция, которая будет откликаться каждый раз, когда вы выберете какой-либо рейтинг (если вы нажмете 2 из 5, то вам покажет сообщение «Вы поставили » и далее звезда которую вы выбрали от 1 до 5).

$("#stars-herats").rating('create', {
    coloron: 'red',
    limit: 10,
    glyph: 'glyphicon-heart'
  });

В этом примере используется немного больше  параметров. Например устанавливается больший лимит выбора (limit: 10) — вместо 5, теперь можно выбрать 10. Далее устанавливается glyth: ‘glythicon-heart’ (иконка для отображения), в этом примере показывается сердчеко, а вы можете выбрать все то угодно. Если убрать свойство glyth, то по стандарту будет показываться звездочки. По этой ссылке, вы можете посмотреть все доступные иконки на выбор.

А вот и список всех возможных настроек этого плагина:

limit: 5,
value: 0,
glyph: "glyphicon-star",
coloroff: "gray",
coloron: "gold",
size: "2.0em",
cursor: "default",
onClick: function() {},

• limit — указывает сколько иконок будет показываться, по стандарту 5
• limit — указывает стандартное количество выбранных иконок. Например, если вам нужно, чтобы по стандарту показывалось 2 из 5.
• glyth — как я и описывал выше, эта функция устанавливает какая иконка будет стоять при показе рейтинга на странице. Выбрать можно отсюда.
• coloroff — цвет неактивной звезды. Например, если вы выбрали — 2 из 5, то 3 из них будут покрашены в цвет, которые будет указан с помощью coloroff.
• coloron — цвет активной звезды. Противоположное coloroff значения
• size — размер иконки, можно указывать в em или px
• cursor — тип курсора, возможнные значени: auto | crosshair | default | e-resize | help | move | n-resize | ne-resize | nw-resize | pointer | progress | s-resize | se-resize | sw-resize | text | w-resize | wait | inherit.
• onClick — что сделать скрипту, после того как пользователь выберет рейтинг (нажмет на одну из звезд)