Плагин на jQuery для вывода рейтинга в виде звезд

[Caman]

Спасибо!

[osof]

Здравствуй, Хабра-первонах.

[hotach]

Во втором примере, если выбрать дробную оценку, звездочки после отправки на сервер выставляются неверно. У меня Rockmelt(Chrome 14.0.835.202)

[hotach]

Упс, туплю. Рейтинг общий

[ishamshur]

А что собственно не правильно? Было 2,75 + Ваша оценка 4,5 / 2 = 3,625

[nbordovskiy]

А правильно было бы (2,75*2+4,5)/3=3,33

[ishamshur]

Да нет! Тогда надо слаживать сумму всех проголосовавших и делить на общее число голосов.

[nbordovskiy]

2.75 — это среднее значение из двух голосов, верно?

[ishamshur]

верно

[nbordovskiy]

Тогда 2.75*2 и будет сумма всех проголосовавших.
Допустим, два человека проголосовали 2.7 и 2.8, тогда среднее — 2.75. Если третий голос 4.5, то среднее значение будет равно (2.7+2.8+4.5)/3=10/3=3.33.
Пример с другими числами: 10 голосов по 5, среднее — 5. А я ставлю 1. Результат: (5+1)/2=3, хотя гораздо честнее был бы рейтинг (5*10+1)/11=4,63.

[ishamshur]

Согласен. Я об этом и говорил. Только же обычно в базе данных хранится одно поле для общего рейтинга, и одно для общего количества проголосовавших. Как вариант, можно добавить в плагин, чтобы сервер возвращал общую оценку рейтинга, которою нужно поставить в виде звезд? А как Вы это будете считать, уже Ваша забота.

[nbordovskiy]

Нужно просто немного поменять формулу расчета нового рейтинга.
Старая: (val + новый_голос) / 2
Новая: (val * votes + новый_голос) / (votes+1)
Ответ с сервера имеет смысл, если посетители голосуют очень активно (то есть, пока я думаю над оценкой, многие голосуют и оценка может существенно поменяться). Как на Хабре оценки комментариев, например: при загрузке страницы было +10, через 5 минут я плюсую, а получается уже +30.

[ishamshur]

Согласен. Принимается. Сейчас поправлю.

[xrays72]

Почему не используете последнюю версию jQuery?

[ishamshur]

Да не суть важно

[psman]

Минусик есть один в 3 примере, 5 баллов выбрать сложновато

[ishamshur]

Да, есть такая проблема. Дело в том, что нужно точно навести на границу изображения, чтобы получить оценку 5.

[psman]

я бы добавил смещение на 0.2 голоса, тогда попасть в 5 будет проще, а мене 0.2 не проголосовать

[ishamshur]

Хм. Интересное решение. Наверное так и надо делать

[WebSpider]

Третий пример, конечно, малопрактичен. Если только добавить возможность «вылезать» за края звёзд, тогда будет удобно ставить минимальное и максимальное значение

[Funcraft]

Спорно.
Я бы использовал его так:
1. Для отображения результата рейтинга (4.31).
2. А для выбора оценки, целые звёзды, т.к. на самом деле пользователю в общем случае вообще не нужны эти дробные возможности голоса.

[ishamshur]

1. Дробный результат рейтинга отображается во всех примерах.
2. Используй первый пример

[Funcraft]

Согласен.

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

[ishamshur]

Если есть такие применения, то выкладывайте здесь. Я тогда буду обновлять примеры реализации.

[Funcraft]

Хорошо, как выдастся время, накидаю несколько примеров.

[ishamshur]

Тогда третий тип формы вообще не нужен. Для этого нужно использовать второй пример. Там по пол звезды выбирается

[Zibx]

Надо раундить до ближайшего. (0.5 или 0.25 на выбор).

[WebSpider]

Очень симпатичный плагин, благодарствую. Тоже задумывался надо проблемой показа дробного числа звёзд, но реализовать руки не дошил

[slider]

а как 0 поставить?

[ishamshur]

ноль можно поставить только в последнем примере

[Ackrite]

Мне да ;(

[slider]

в последнем примере у меня получилось поставить только 0.1

в этом интернете я видел много вещей которые тянут только на 0.
А где было сказано что рейтинг это школьная система?

[ishamshur]

Возможно нужно добавить в настройки плагина минимальную оценку, ниже которой пользователь не сможет проголосовать. Как считаете?

[slider]

Возможно. Зависит от контекста применения. Если хотите сделать универсальный инструмент — то да.

[danko]

После того, как оценка выставлена и никуда нажать уже нельзя, подсказки «Ваш голос: значение» всё равно зависят от того, над какой звездой находится курсор. Может быть на этом этапе стоит менять её на фиксированное значение проголосовавшего?

[danko]

Причём если в демо 2 и 3 после голосования подсказки выводятся для любой звезды, то в демо 1 только для той, которой головал, и выше.

[ishamshur]

вообще-то это просто атрибут title у ссылки. Наверное Вы правы, надо всем ссылкам менять этот атрибут на значение проголосовавшего

[pavelkornev]

а чем ваш плагин лучше уже существующего — www.fyneworks.com/jquery/star-rating/#tab-Testing?

[ishamshur]

Именно от этого плагина я и ушел. Почему, читайте начало поста.

[pavelkornev]

в плагине star-rating можно делить звезды больше чем в половину (см. Test 4 — Half Stars and Split Stars в примерах по ссылке), звезду можно поделить на 4 части по 0.25 и округлять рейтинг с точностью до 1/4 звезды, можно сделать деление на большее кол-во частей, но в нем нет смысла — визуально это будет почти не заметно для пользователя.

[ishamshur]

Не знал об этом! Спасибо. Так или иначе мне было интересно написать что-нибудь свое.

[demimurych]

А не пробовали вариант, когда нужна только одна звезда. Она же верхняя?
Под которую просто подкладывается бэкграунд нужного цвета.

Даже используя Ваш спрайт, получается приемлемо.
А если еще чуть чуть поморочить себе голову с Альфа-каналом получается совсем хорошо.

И уже можно легко выбирать цвет звезд по своему желанию.

[ishamshur]

не совсем понял про Альфа-канал. Можно подробнее?

[demimurych]

Я имел ввиду, что шаблонная звезда рисуется белым, а декоративные элементы этой звезды(такие как середина и так далее) регулируется заданием разной степени прозрачности этого белого.

То есть в сущности весь шаблон — это прозрачная(в разных местах с разной интенсивностью) белая звезда с небольшими оттенками серого — для придания объемности.

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

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

В результате, подкладывая ровный цвет мы получали звезды, схожие с теми, что в спрайте на позициях 2 и 3 сверху.

[omfg]

Вы не подумали о том, что фон страницы может быть не только белого цвета. Жалко что -webkit-mask есть только у вебкитов, иначе можно было в сочетании с ним реализовать ваш вариант.

[demimurych]

Да Вы правы. Сразу не подумал. В любом случае, такая возможность была бы многим кстати.

[Londeren]

Годный плагин, спасибо
В качестве предложения:
вместо
<div class="rating">
<input type="hidden" class="val" value="2.75"/>
<input type="hidden" class="votes" value="2"/>
<input type="hidden" class="vote-id" value="voteID"/>
</div>


использовать
<div class="rating" data-val="2.75" data-votes="2" data-vodeid="voteID">
</div>


И оставлю ссылку еще на один подобный плагин

[DelphiST]

Часто, после выставления рейтинга, еще и требуется отправить это все с формой на сервер. Поэтому, инпутами, наверное, правильнее будет.

[ishamshur]

Данные и так отправляются не зависимо от интутов

[DelphiST]

Маловероятно, конечно, но когда отключен javascript эти инпуты останутся и отправятся (например, при редактировании какой-нибудь записи с уже выставленным рейтингом).

[mezastel]

Предпочитаю “амазоновские” звездочки:

[ishamshur]

Вам никто не запрещает их использовать. В настройках это можно указать.

[Alessandro]

подскажи где дописать что бы он текстом выводил рейтинг?

[ishamshur]

Что вы имеете ввиду? Что не пойму Вас. Вместо звезд был текст?

[Alessandro]

не вместо, а вместе :). ну на самом деле уже нашел — дописал текстик в declOfNum().
кстати попутно обнаружился косячек — даже если пришел ответ ERR то считалка меняет рейтинг пересчитывая средний как если бы было OK. хотя число голосов не наращивает и ответ об ошибке отображает.

[Alessandro]

уточню: рисунок звездочек не меняется, а вот this.val меняется.

[webhead]

Если же на одной странице размещено несколько рейтингов и Вам нужно отправлять данные на сервер, то для идентификации рейтинга используется еще одно скрытое поле ввода с классом vote-id.
Значение данного поля будет передано на сервер вместе с результатом голосования. Таким образом вы сможете идентифицировать рейтинг и обновить значение нужного Вам рейтинга!

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

<div class="rating">

состояние звездочек после голосования не меняется. Получается, что каждому рейтингу нужно присваивать в div'e свой индивидуальный идентификатор. И еще описывать их поведение в виде $('#rating_1').rating и т.д. Тогда работает. А если у меня их на странице несколько десятков?

[vipcodernet]

У меня похожий вопрос. У меня блоговая структура на портале. Хочется выводить для каждой статьи её текущий рейтинг и с режимом readOnly:true. На странице выводится по 20 статей. Как лучше осуществить вывод? Не прописывать же для каждой $('#rating_N').rating({..........});, где N=1,2...,20
Есть какой-то более простой способ?

[ishamshur]

Так можно не по id вызывать плагин, а по классу:

$('.rating').rating();

должно сработать.

[ishamshur]

Вот собственно пример:

http://biznesguide.ru/demo/vote/multy.html

[Lici]

А где хранятся данные?