Рейтинг jquery да нет

Простой рейтинг для сайта с jQuery

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

See the Pen XXzZQa by Alexander (@bologer) on CodePen.

Источник

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

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

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

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

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

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

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

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

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

• 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 — что сделать скрипту, после того как пользователь выберет рейтинг (нажмет на одну из звезд)

Источник

JQuery рейтинг звездочки

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

Большое спасибо за вашу помощь и внимательность к нам!

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

Теперь поговорим в целом о скрипте и о моих идеях. По сути я решил разбить скрипт на две части, думаю многим будет интересна как первая часть, так и вторая, но не стал их объединять, а выпустить в двух разных статьях. Во-первых, потому что обе части получатся вместе довольно таки весомыми, а во-вторых, хотелось бы увидеть Ваши комментарии, а может советы или вопросы, по поводу второй части, а в-третьих, во второй части уж точно будет использоваться не только JQuery. В общем, в первой части я хочу Вам сделать повествование на сайт где можно взять JQuery плагин данного скрипта, а во второй части, занесения рейтинга при нажатии на звездочку в базу данных без перезагрузки. Поэтому, если Вам будет интересна вторая часть, жду лайков и комментариев.

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

По стандарту, подключаем файл стилей demo.css и требуемую библиотеку для работы jquery.min.js, плагин jquery.raty.js и наш скрипт raty.js.

После в корень скрипта, добавляем три картинки, которые идут по умолчанию: star-on.png — полный рейтинг, star-off.png — отсутствует рейтинг, star-half.png — рейтинг на половину. Если же у Вас имеются свои картинки и Вы хотите их использовать, то можете создать к примеру, как я сделал. Я создал папку img и туда загрузил две картинки: rating_activ.png — активная звездочка, rating_passiv.png — не активная звездочка.

Теперь, давайте, перейдем к HTML коду. И сразу хочу отметить, что у нас будут опубликованы только три примера по стандарту, все остальные Вы сможете найти на официальном сайте, который указан в источнике материалов.

Первый пример.

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

Второй пример.

При нажатии на звездочку, также подсчитывается рейтинг. Для демонстрации были установлены мои картинки, в виде звездочек, которые находятся в папке img.

Третий пример.

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

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

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

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

Под классом rate1, мы запускаем функцию с параметрами score и evt. В первом из которых, мы получаем методом alert() название, а во-втором ID, выбранного нами рейтинга. Под классом rate2, мы устанавливаем номер количества выводимых звездочек, а вернее их будет десять и делаем применимость картинок не по умолчанию, а своих, где starOff — является звездочкой не активной, а StarOn — активной. Под классом rate3, мы устанавливаем номер количества выводимых звездочек и скрываем из общего показа звездочку по умолчанию — очень плохо, устанавливая общее значение статусов равное пяти.

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

Некоторые из этих установок, как Вы можете заметить, я уже использовал в своем скрипте, обратите на это внимание! Если Вам что то станет не понятно, Вы можете написать в комментарии. Спасибо за внимание, удачи всем в разработке!

Источник

Рейтинг jquery да нет

В этой рубрике Вы найдете уроки по Javascript библиотеке jQuery.

• 

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

Stimed — стили в зависимости от времени суток

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

jQuery плагин для отображения превью загружаемого файла

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

Источник

Да или нет поле подтверждения с помощью jQuery

Я хочу да/нет оповещения с помощью jQuery, а не кнопку ok/отмена:

8 ответов:

метод alert блокирует выполнение до тех пор, пока пользователь не закроет его:

используйте функцию подтверждения:

эти коды работают для меня, но я не совсем уверен, что это правильно. А ты как думаешь?

это покажет всплывающее окно подтверждения, прежде чем перейти по ссылке.

все примеры, которые я видел, не являются многоразовыми для разных вопросов типа «Да/нет». Я искал что-то, что позволило бы мне указать обратный вызов, чтобы я мог позвонить в любой ситуации.

следующее работает хорошо для меня:

Я тогда называю это так:

у меня были проблемы с получением ответа из диалогового окна, но в конце концов придумал решение, объединив ответ из этого другого вопроса дисплей-да-и-нет-кнопки-вместо ОК и отмена-в-подтверждать-окне С частью кода из диалогового окна модального подтверждения

это то, что было предложено на другой вопрос:

создать свой собственный окно подтверждения:

создать свой собственный confirm() метод:

назовите его своим кодом:

МОИ ИЗМЕНЕНИЯ Я подправил выше, так что вместо вызова confirmBox.show() Я confirmBox.dialog(<. >) такой

другим изменением, которое я сделал, было создание confirmBox div в функции doConfirm, как это сделал Тулазирам в своем ответе.

Мне нужно было применить перевод к кнопкам Ок и отмена. Я изменил код на исключение динамического текста (вызывает мою функцию перевода)

вы можете повторно использовать подтверждение:

Источник

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

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

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

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

Основные требования к плагину:

• Рейтинг должен был выводиться корректно, т. е. если у меня рейтинг был равен 4.78, то и количество закрашенных звезд должно быть соответствующим.
• Возможность выбора эффекта при наведении курсора мыши на звезду. Это имеется ввиду то, какую оценку пользователь сможет выставлять. т. е. при наведение указателя мыши на звезды они должны были закрашиваться либо целыми звездами, либо по пол звезды, либо в абсолютных значениях следуя за указателем мыши
• Возможность задания своих звезд
• Возможность указать URL на который будет отправлен результат голосования
• Возможность указать количество звезд выводимых в рейтинге
• Автоматическое склонение результатов голосования. (Например: 1 голос, 2 голоса, 5 голосов)
• Возможность задать свои существительные для результатов голосования
• Возможность задавать минимальное значение рейтинга, ниже которого пользователь не сможет проголосовать
• Возможность выполнить пользовательскую функцию, при клике на звезду

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

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

Данный код необходимо разместить между тегами на Вашем сайте.

О том, для чего необходимо подключать jQuery с репозитория Google можно почитать здесь.

Также для корректной работы плагина, необходимо подключить следующие стили:

Все это Вы найдете в исходниках.

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

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

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

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

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

Если теперь вызвать плагин, то будет создан следующий рейтинг:

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

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

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

Теперь поговорим о том, какие есть настройки у плагина и как их можно изменять!

fx	float	Эффект при наведении курсора мыши на звезду. float — При наведении курсора мыши, звезды будут закрашиваться постепенно, следую за указателем мыши half — При наведении курсора мыши, звезды будут закрашиваться постепенно по пол звезды full — При наведении курсора мыши будет закрашиваться целая звезда
image	путь к изображению звезд. Следует заметить, что картинка должна быть выполнена в виде спрайта, т. е. так В самом верху изображения расположена звезда, которая будет выводится для не закрашенных звезд. Под ней находится звезда, которая выводится при наведении курсора мыши. И в самом низу расположена звезда, которая выводится для закрашенных звезд. Если Вы решите изменить звезды, то эту последовательность следует сохранить. Также обращаю Ваше внимание, что высота и ширина одной звезды должны быть равны. Иначе рейтинг будет выводится не корректно
width	32	Ширина одной звезды
stars	5	Количество выводимых звезд в рейтинге
titles	[ ‘голос’, ‘голоса’, ‘голосов’ ]	Массив существительных, которые будут выводится для учета голосов
readOnly	false	Режим работы рейтинга. По умолчанию равен — false. Если установить в true, то не будет возможности проголосовать
minimal		Минимальное значение рейтинга, ниже которого пользователь не сможет проголосовать
url	Адрес страницы, на которую будет отправлен AJAX запрос с результатом голосования
type	post	Тип AJAX запроса. По умолчанию равен — post. Если Вам нужно передавать GET запрос на сервер, то установите это значение равным — get
loader	Путь к изображению, которое будет выводится в тот момент, пока идет AJAX запрос на сервер
click	Пользовательская функция, которая вызывается, когда пользователь кликает по звезде. Первым параметром функции будет сам объект рейтинга, а второй — результат голосования пользователя

Формат вывода пользовательских сообщений

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

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

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

Поэтому для корректной работы плагина сервер должен возвращать json-объект следующего вида:

Если status будет равен значению — OK, то рейтинг звезд обновится и пересчитается количество проголосовавших, иначе будет просто выведено предупреждающее сообщение.

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

Посмотреть демо можно здесь

Исходники можно скачать здесь

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

Если есть предложения по улучшению данного плагина или вопросы, прошу писать в комментариях.

Надеюсь Вы сочтете его полезным для себя!

UPD: Учитывая замечания в комментариях, добавил в настройки плагина опцию, для задания минимального значения рейтинга, ниже которого пользователь не сможет проголосовать. Также переработал результирующий html-код плагина, в результате чего, теперь можно свободно выставить оценку как 0, так и 5

Источник