Cистема цветного рейтинга с использованием CSS3 и jQuery


Содержание

Рейтинг в виде звезд на CSS

Выбор способа реализации

Есть стандартный функционал оценки чего-либо в вэбе, который можно встретить на многих сайтах. Как правило, это технически это делается несколькими способами:

1. Набор input элементов типа radio, каждый из которых соответствует той или иной оценке

2. Много ненужной и несемантичной html-разметки + javascript.

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

– функционал на основе инпутов уже был реализован в cms, соответственно лучше придерживаться его, чем потом заставлять программиста придумывать “костыли” под твой скрипт;

– я ленивая и порой мне легче поколдовать с CSS, чем по всему интернету искать JavaScript плагин, который бы удовлетворил запросы в данной ситуации;

– когда-то я уже видела реализацию подобного механизма и была уверена, что это возможно.

Рейтинг в виде звезд на CSS

Итак, механизм стилизации radio инпутов с помощью CSS не является новым и не я его придумала, конечно. Но почему-то по запросу “рейтинг на CSS” я не нашла готового решения, который бы меня устроил. Поэтому, я написала своё.

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

2. Определимся с разметкой (разметка ниже полностью написана в примере, тут опишу основную идею): у нас есть обертывающий элемент, в нем чередуются и . Причем, чередуются задом наперёд (это очень важно, чтобы можно было стилизовать все выбранные звезды при клике а также это нужно для hover-эффекта, см. пример). Инпуты идут сверху, прозрачные, чтобы были видны только звезды-label.

3. При выборе того или иного инпута, меняются стили для всех , идущих ниже по разметке (с помощью css селектора

). Фактически в форме также, как и обычно выбранный radiobutton становится checked.

Кроссбраузерность: точно работает в Chrome 29, Firefox 23.0.1, Opera 16.0, Safari 5.1.7, IE 8+. Проверялось с помощью Javascript на предмет правильности выбора оценки.

Превратите число в отображение звездного рейтинга, используя jQuery и CSS

Я смотрел на плагин jquery, и мне было интересно, как адаптировать этот плагин, чтобы превратить число (например, 4.8618164) в 4.8618164 звезды, заполненные из 5. По сути, интерпретировать число 98 голосов | спросил Steve 1 января 2010, 02:56:25

6 ответов

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

Изображение

Примечание. не делайте НЕ ссылку на изображение выше! Скопируйте файл на свой сервер и используйте его оттуда.

JQuery

Если вы хотите ограничить размеры звезд только половиной или четвертью звезды, добавьте одну из этих строк перед строкой var size :

Использование

Выход

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

Небольшое объяснение того, как представлены звезды, может быть в порядке.

Скрипт создает два элемента span уровня блока. Оба участка изначально имеют размер 80px * 16px и фоновое изображение stars.png. Пролеты являются вложенными, поэтому структура пролетов выглядит следующим образом:

Внешний диапазон получает background-position из 0 -16px

Внутренний диапазон с другой стороны имеет background-position из 0 0 , который делает видимыми только желтые звезды.

Это, конечно, будет работать с двумя отдельными файлами изображений, star_yellow.png и star_gray.png. Но так как звезды имеют фиксированную высоту, мы можем легко объединить их в одно изображение. При этом используется метод CSS-спрайтов .

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

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

В плане доступности было бы разумнее оставить число с плавающей точкой внутри внутреннего диапазона и скрыть его с помощью text-indent: -9999px , чтобы люди с выключенным CSS по крайней мере увидят число с плавающей запятой вместо звезд.

Надеюсь, это имело смысл.

Обновлено 2010/10/22

Теперь еще компактнее и сложнее для понимания! Можно также сжать до одного вкладыша:

jQuery метод .css()

Определение и применение

jQuery метод .css() задает или возвращает одно или несколько свойств стиля для выбранных элементов.

Обращаю Ваше внимание, что, когда вы используете метод с целью вернуть заданное в CSS значение свойства, то возвращается значение первого совпадающего элемента. Некоторые универсальные свойства, такие как margin, padding, background, border могут возвращать разные результаты в зависимости от браузера пользователя. Рекомендуется получать такие значения отдельно для каждого свойства, например для ширины границы (доступно с версии jQuery 1.9):

Кроме того, вычисляемый размер элемента всегда возвращается в пикселях, но он может быть указан как в em, ex, px, % и т.п. в таблице стилей. В зависимости от браузера значения цвета, может быть возвращено как в системе RGB, так и в шестнадцатиричной (HEX), независимо в какой системе указания цвета это задано в таблице стилей.

jQuery одинаково интерпретирует как CSS, так и DOM свойства. Например, следуюшая запись равнозначна и jQuery установит правильное значение в обоих случаях:

Когда число передается как значение, то jQuery преобразует его в строку и добавляет пиксели к концу этой строки. Если свойство требует единицы измерения, отличные от пикселей, то преобразует значение в строку и добавляет соответствующие единицы перед вызовом метода.

Если вы используете метод .css() для того, чтобы установить значение, то jQuery модифицирует значение глобального атрибута style элемента (ниже приведенные методы равноценны):

Установка значения атрибута style в пустую строку удаляет свойство из элемента, если оно до этого уже было применено:

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

Обращаю Ваше внимание, что при использовании метода .css(), jQuery игнорирует директиву !important , которая отменяет значимость последнего определенного стиля. Если Вам необходимо сделать какой-то стиль приоритетным, то Вы можете определить это в таблице стилей, и, например, добавить этот класс элементу с помощью метода .add >

С версии jQuery 1.4 метод .css() позволяет задать функцию, которая возвращает новое значение для свойства CSS. Если функция ничего не возвращает, или undefined, то в этом случае текущее значение не изменяется. Это может быть полезным для выборочной установки значений только при соблюдении определенных критериев.

С версии jQuery 1.6 метод .css() принимает относительные значения, начинающиеся с += или -= , чтобы увеличить или уменьшить текущее значение.

С версии jQuery 1.8 метод .css() автоматически проставляет префиксы производителей (-webkit, -moz, -ms и тому подобное).

jQuery синтаксис:

Добавлен в версии jQuery


Значения параметров

Параметр Описание
propertyName Задает имя CSS свойства.
value Задает значение CSS свойства.
function ( index, value ) Задает функцию, которая возвращает новое значение для свойства CSS.
  • index — возвращает индекс позиции элемента в наборе (среди выбранных элементов).
  • value — возвращает текущее значение свойства CSS.

Пример использования

В этом примере с использованием jQuery метода .css() мы в первом случае возвращаем значение одного свойства и выводим информацию в консоль браузера (обратите внимание, что информация у браузера Chrome выводится в системе RGB), а во втором случае возвращаем значения в виде объекта сразу четырех свойств. Обратите внимание, что в jQuery можно использовать как значения CSS свойств, например, border-top, так и DOM свойств borderTop.

Результат нашего примера:

Пример возвращения значений свойств с помощью метода .css()

Цукерберг рекомендует:  Давайте знакомиться как живут и кем работают студенты GU

Рассмотрим пример в котором с помощью метода .css() установим для элементов различные CSS свойства:

В этом примере с использованием jQuery метода .css() мы в первом случае с использованием селектора :first устанавливаем значение одного свойства первому элементу

. Обратите внимание, что синтаксис при установки нескольких свойств отличается.

Результат нашего примера:

Пример установки значений свойств методом .css()

Рассмотрим пример в котором в качестве значения параметра метода .css() передадим функцию:

В этом примере с использованием jQuery метода .css() и функции, переданной в качестве значения параметра мы изменяем при каждом нажатии на кнопку ширину элемента. Обратите внимание, что в примере была использована JavaScript функция parseFloat(), которая принимает строку в качестве аргумента и возвращает десятичное число.

Результат нашего примера:

Пример использования функции в качестве значения параметра метода .css() jQuery DOM методы

17 нововведений jQuery 3 и советы по их использованию

Прошло уже более 10 лет с того момента, как библиотека jQuery начала своё широкое распространение по Интернету, и она до сих пор пользуется большой популярностью. В июле 2015 года jQuery анонсировала альфа-версию 3.0 — крупнейшее обновление за долгие годы.

Текущая версия 3.1.1, вышедшая в сентябре 2020 года, исправила множество багов, добавила новые методы и удалила избыточные, также изменив поведение некоторых функций. Давайте разберемся в нововведениях, которые были представлены в этой версии.

Методы скрытия и отображения

Для лучшей совместимости с адаптивным дизайном jQuery3 была усовершенствована, получив возможность скрытия нескольких элементов. Тесты показали, что новая версия справляется с этим на 2% быстрее, чем предыдущая.

Кроме того, методы .hide() , .show() и .toggle() будут ориентироваться на inline-стили. Эта особенность позволит корректно работать с функцией display , что позволит правилам CSS изменяться динамически в зависимости от таких событий, как изменение разрешения окна и ориентации экрана.

Методы wrapAll() и unwrap()

В jQuery 2 метод .wrapAll() при передаче функции в качестве аргумента вёл себя точно так же, как и метод .wrap() . Это изменили — теперь .wrapAll(function) вызывает функцию и использует строковое представление результата как обёртку коллекции.

В jQuery 3 также появился опциональный параметр-селектор метода unwrap() . Это нововведение позволяет передавать методу строковое значение, которое содержит выражение селектора.

Полосы прокрутки высоты и ширины теперь учитываются

В jQuery 2 вызов $(window).width() возвращал ширину содержимого, не учитывая полосы прокрутки, добавленные браузером, когда содержимое превышало размеры элемента. Для того, чтобы предоставить возможность измерения, эквивалентную CSS-медиазапросу, $(window).outerWidth() и $(window).outerHeight() теперь возвращают ширину и длину с учётом полос прокрутки. Это эквивалентно свойству DOM window.innerWidth .

Поведение data()

В jQuery 3 поведение метода data() было немного изменено, чтобы он подходил под спецификации Dataset API. Теперь он переводит имена свойств в верблюжью нотацию.

При использовании старой версии вы получите следующий результат:

В jQuery 3 вы получите:

Как вы заметили, название параметра переведено в верблюжью нотацию, в то время как в старых версиях параметр оставался в нижнем регистре с дефисом.

Поддержка SVG при операциях с классами

jQuery до сих пор не полностью поддерживает SVG, но методы наподобие .hasClass() или .addClass() , которые управляют CSS-классами, могут быть использованы для работы с SVG. Вы можете изменять или находить классы в SVG, затем применять стили к классам, используя CSS.

Фильтры скрытия и отображения

jQuery 3 изменяет смысл фильтров :visible и :hidden . Он воспринимает элементы как :visible , если у них есть хоть какие-то окна макета, включая те, которые имеют нулевую ширину и длину. Для примера, элемент br и строковые элементы без содержимого будут выделены фильтром :visible .

Если вы имеете следующую HTML-страницу:

и запускаете выражение:

то в jQuery 2, вы получите результат 0 , а в третьей версии результат будет равен 3 .

jQuery больше не округляет параметры высоты и ширины

Теперь jQuery возвращает дробные значения .width() и .height() вместо целого числа, если браузер поддерживает это. Для пользователей, которым нужна субпиксельная точность (например, при дизайне веб-сайтов), это может быть полезным.

Например, у вас есть 3 элемента с шириной, равной одной третьей (33.333333%), внутри контейнера шириной 100px:

Если вы запросите ширину дочернего элемента:

то получите значение 33.33333 , что будет являться более точным результатом.

Дополнительный уровень защиты

Дополнительный уровень был добавлен для защиты от межсайтового скриптинга (XSS). Разработчикам теперь нужно уточнять dataType:”script” в опциях методов $.ajax() и $.get() . Это предотвращает возможность атак. Предоставляем пример кода:

Неприменимый хеш

jQuery 3 возвращает синтаксическую ошибку, если строка селектора состоит лишь из хеша, вроде jQuery(«#») или .find(«#») . В старой версии $(«#») возвращал пустое множество, а .find(«#») — ошибку.

Новый метод для выделения строк

Новый метод jQuery.escapeSelector() позволяет вам выделить любую строку или символ, которые имеют определенное значение в CSS-селекторах.

21 ноября, Москва, беcплатно

Например, если элемент на странице имеет id “abc.xyz”, то он не может быть выбран методом $(«abc.xyz») , т.к. селектор будет распознан как элемент с id “abc”, и классом “xyz”. Однако он может быть выбран новой функцией $(«#» + $.escapeSelector(«abc.xyz»)) .

Аргументы jQuery.when()

В jQuery 3 при добавлении методом then() аргумента к $.when() , он возвращает его promise-версию. Это расширяет возможности для ввода, включая промисы Bluebird и промисы ES6, что дает возможность писать более сложные асинхронные обратные вызовы.


Хеш в URL

Теперь функция jQuery.ajax() больше не удаляет хеш в URL, если он присутствует. Однако, вам придется удалять его вручную до отправки запроса, если сервер на другом конце соединения не может обработать URL с хешем.

Deferred-объекты совместимы с JS-промисами

Deferred’ы — это объекты которые можно соединять цепными обратными вызовами. jQuery 3 сделал их совместимыми с новыми стандартами Promises/A+. Также есть ключевое изменение в функции .then() . Любое исключение, выбрасываемое в рамках обратного вызова .then() , теперь конвертируется в отклоняемое значение. Непромисообразные значения, возвращенные обработчиком отклонений, меняются на выполняемые значения.

Новый стандарт поведения Promises/A+:

Новый API для анимации

jQuery 3 использует API requestAnimationFrame() для работы с анимацией. Этот API воспроизводит анимации плавнее и быстрее, затрачивая меньше вычислительного времени. Он используется лишь в тех браузерах, которые поддерживают этот API. Для старых же браузеров, таких как Internet Explorer 9, jQuery использует старый API в качестве запасного варианта.

jQuery 3 работает в строгом режиме

Большинство браузеров, поддерживающих jQuery3, используют строгий режим (strict mode). Новая версия была создана с учётом это. Несмотря на то, что jQuery 3 была написана в строгом режиме, вашему коду не обязательно использовать его. Следовательно, вам не нужно переписывать уже существующий код, если вы желаете перейти на новую версию. Однако есть одно исключение: некоторые версии ASP.NET не совместимы из-за строгого режима.

Новая сигнатура методов get и post

jQuery получила новые сигнатуры сервисных функций $.get() и $.post() для единообразия с $.ajax() .

Оператор цикла for…of

jQuery 3 поддерживает оператор цикла for..of , который имеется в спецификации ECMAScript 6. Это позволяет вам запускать цикл по итерируемым объектам, таким как Map , Set , Array и т.д.

Оператор цикла for..of может быть использован для замены синтаксической конструкции $.each( ) . Предположим, что вы хотите применить имя к каждому вводимому элементу страницы.

Код на jQuery 2 выглядит так:

Но код на jQuery 3 будет иметь следующий вид:

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

Подборка самых популярных WordPress плагинов для любого сайта.

Здесь вы сможете скачать различные jQuery скрипты для любых проектов.

Бесплатно скачать CSS3 наработки с различными эффектами анимации.

Можно скачать файлы HTML5 с современными возможностями разработки.

Множество различных free PSD объектов для WEB-дизайна.

Колекция различных элементов form jQuery для вашего сайта.

Бесплатно скачать иконки для сайта в форматах PSD, PNG и так далее.

Коллекция всегда обновляющихся модальных окон на jQuery.

Разные примеры jQuery validate собраны в одном месте сайта.

Симпатичные варианты реализации ваших jQuery gallery.

Большой сборник широкоформатных и адаптивных jQuery slider`ов.

Ишите примеры реализации jQuery scroll? Это то, что вам нужно.

Красивые и динамичные всплывающие подсказки на jQuery и CSS3.

Интересные материалы на тему веб разработок, главные новости.

Подобрка плагинов Javascript, библиотек, фреймворков и т.д.

Коллекция потрясающих примеров анимации для вашего сайта.

Модернизация элементов форм, создание систем автозаполнения

Плагины для выбора и настройки даты и времени в формах

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

Компоненты, содержащие в себе реализацию параллакс-эффекта.

Создание вкладок, оформление списков в удобную навигацию.

Все, что касается таблиц с данными: фильтр, сортировка и т.д.

Наработки SVG-графики и наложение на нее анимации. Просто красиво.

Отрисовка элементов на веб-странице с помощью html5 canvas.

Примеры элементов, которые реагируют при наведении на них.

Плагины для фото и видео галерей, способные приблежать контент.

Кнопки. Создание красивы и незабываемых кнопок для сайта.

Все, что касается сортировки данных на странице. Плагины html5.

Выборка данных. Множество примеров jQuery select.

Различные способы создания красивого и эффектного меню для сайта.

Дерево элементов. Построение множественных списков на странице.

Примеры объектов в трехмерном пространстве с помощью CSS3 и jQuery.

Цукерберг рекомендует:  Книги - Посоветуйте электронные книги по HTMLCSS.

terseBanner — Карусель на jQuery

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

terseBanner — Карусель на jQuery

Dropdown — Плагин MultiSelect Box


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

Libphonenumber — Парсинг и форматирование телефонного номера

Более простой и легкий рерайт известной библиотеки libphonenumber Google Android: простой парсер и форматирование телефонных номеров в javascript.

Libphonenumber — Парсинг и форматирование телефонного номера

Eden — Адаптивные эффекты карусели

Eden — это набор эффектов карусели. Он разработан с использованием Owl Carousel + Animate.css. Данный плагин с легкостью интегрируется на любой веб-сайт. Лишь несколько строк кода и все готово к работе.

Eden — Адаптивные эффекты карусели

Vimeo video as Background — Задний фон сайта в виде видео из Vimeo

Плагин jQuery для воспроизведения любого видео из Vimeo в качестве фона страницы вашего сайта. Скачать плагин и узнать подробности можно по ссылкам.

Vimeo v >

Blink Animation — Эффект мигания

Плагин jQuery, который позволяет создать анимационный эффект мигания для любого элемента html.

Morphing Page Transition — Оригинальные переходы страниц

Звездный рейтинг с применением небольшого кода CSS

Звездный рейтинг с завидной частотой встречается почти на всех веб-сайтах. Сегодня мы решили немного поэкспериментировать, и разработать новый подход к созданию звездного рейтинга с использованием небольшого отрывка кода CSS, и совсем не прибегать к коду javascript.

В верстке для звезды используется единица уникода (☆). Если у вас стоит кодировка UTF-8, то здесь не будет проблем. В противном случае вы можете использовать ☆. Вы можете использовать столько звезд, сколько пожелаете:

Теперь нам нужно при наведении заменить эту «пустую» звезду «твердой». Вы можете просто создать псевдо элемент твердой звезды (★) поверх нее при событии :hover

P.S.: Перед 2605 в указанном коде должен быть слэш \ (редактор данного движка его почему-то съедает.)

В силу того, что элемент имеет абсолютное позиционирование, мы применяем top: 0; left: 0; (как минимум в новых браузерах). Таким образом, получается, что твердая звездочка сидит прямо поверх пустой. Вы даже можете изменить ее размер или цвет, если пожелаете.

Но тем не менее, то, что есть у нас, работает только с отдельными звездами. Наша структура UX требует того, чтобы все звезды были заполнены. Например, если мы наведем на 4-ю звезду, то не только она должна быть заполнена, но также и 3-я, 2-я и 1-я.

Невозможно посредством CSS выделить предыдущие дочерние элементы. Тем не менее, у нас есть возможность выделить последующие дочерние элементы. Например, посредством смежного или общего родственного комбинатора. Если мы буквально перевернем очередность символов, то сможем использовать общий родственный комбинатор для того, чтобы выделять звезды, расположенные до той звезды, на которую был наведен курсор мыши (так как фактически, в коде HTML будут выделены последующие звезды, просто отображены они у нас в перевернутом порядке).

P.S.: Перед 2605 в указанном коде должен быть слэш \ (редактор данного движка его почему-то съедает.)

И на этом всё! Полноценная UX-структура с использованием чуточки кода. Вот весь код CSS, за счет которого данный элемент будет работать:

P.S.: Перед 2605 в указанном коде должен быть слэш \ (редактор данного движка его почему-то съедает.)

Применение на практике

Если вероятность, что javascript все же будет включен в данную структуру. Когда пользователь кликает на звезду, сведения о рейтинге отправляются обратно посредством Ajax, а сам виджет запускает класс для мгновенного отображения выбранного числа звезд. Если javascript уже используется в проекте, не будет ли полезно хотя бы звездный рейтинг организовать без использования данной технологии? Если ваше приложение полноценно зависит от javascript, то не беспокойтесь за работу данного элемента. Если вы заинтересованы в разработке веб-сайта, который будет работать и без javascript, то данный пример реализации как раз подойдет вам. Советуем также взглянуть на пример реализации от Леа Вероу (Lea Verou), где используются радио-кнопки, что позволяет сделать элемент частью формы, которую можно подтвердить и без применения JS.

Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

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, мы устанавливаем номер количества выводимых звездочек и скрываем из общего показа звездочку по умолчанию — очень плохо, устанавливая общее значение статусов равное пяти.

Цукерберг рекомендует:  Старт новой программы MBA в digital

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

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

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

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

Источник

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

Простая рейтинговая система с использованием CSS/jQuery

Я пытаюсь создать систему рейтинга, используя css & jQuery.

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

если пользователь нажимает на определенную звезду, все классы, «помеченные», должны оставаться.

это простая система рейтинга, которую я пытаюсь использовать с помощью jquery

Я пытаюсь использовать методы mouseenter, mouseleave, parents(), но я не могу сделать эту работу,

Это не то, что может сделать raty, но на основе вашего кода вы можете получить следующее:

CSS:

JS:

Я думаю, это поможет вам

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

Портфолио с использованием jQuery и CSS3

Здравствуйте, уважаемые читатели XoZbloga! Существует много способов отображения портфолио с эскизами выполненных работ, один из них — это упорядоченные плитки с псевдо-постраничной навигацией. В этом уроке я расскажу о том, как можно изящно реализовать подобное решение с использованием JQuery и CSS3 Transform.

Концепция

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

Мы создадим четыре эффекта вращения, которые будут использоваться для анимации, есть: горизонтально влево, горизонтально вправо, вертикально вверх и вниз. Эти эффекты будут случайным образом выбраны при начале перехода.

HTML разметка

Мы создадим список изображений с использованием списка ul и пустой блок div ( #portfolio ) для отображения «текущей партии» эскизов, HTML разметка которой будет формироваться в JavaScript. Список со всеми изображениями будет скрыт:

div id = «portfolio» > / div >

ul id = «portfolio-item» >
li > img src = «images/dumptruck_teaser.jpeg» alt = «Dump Truck» > / li >
li > img src = «images/rrwooo_rrwooo_teaser.jpeg» alt = «Rrwooo» > / li >
li > img src = «images/dozer_teaser.jpeg» alt = «Dozer» > / li >

/ ul >

Разметка пустого блока div ( #portfolio ) будет формироваться в JavaScript следующим образом:

div id = «portfolio» >
div style = «background:url(images/dumptruck_teaser.jpeg)» > span >Dump Truck / span > / div >
div style = «background:url(images/rrwooo_rrwooo_teaser.jpeg)» > span >Rrwooo / span > / div >

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

Текущие эскизы будут выстраиваться в 2 ряда блоков div и находиться в области 3D-пространства, так как являются дочерними элементами блока #portfolio , имеющего свойство transform-style: preserve-3d . Список со всеми изображениями, как уже указывалось выше, скрыт display: none; .

#portfolio-item <
display : none ;
>

#portfolio <
margin : 2em 0 1em ;
transform-style : preserve-3d ;
>

#portfolio div <
display : inline-block ;
position : relative ;
vertical-align : top ;
margin : 1em ;
width : 200px ;
height : 150px ;
box-shadow : 0px 0px 25px rgba ( 0 , 0 , 0 , .3 ) ;
>

#portfolio div span <
text-align : left ;
position : absolute ;
color : #fff ;
background : rgba ( 0 , 0 , 0 , 0.6 ) ;
width : 90px ;
padding : 5px 15px 7px ;
z-index : 1 ;
left : -10px ;
bottom : 10px ;
>

Теперь создадим классы для анимации блоков:

.animated <
transition : .9s ease-out ;
>

.flipped-horizontal-right <
transform : rotateY ( 360deg ) ;
>

.flipped-horizontal-left <
transform : rotateY ( -360deg ) ;
>

.flipped-vertical-top <
transform : rotateX ( 360deg ) ;
>

.flipped-vertical-bottom <
transform : rotateX ( -360deg ) ;
>

jQuery

Первое инициализируем некоторые переменные, которые нам пригодятся при формировании текущего списка эскизов. После чего сформируем для каждого из эскизов HTML каркас:

// Количество текущих эскизов
itemShow = 8 ;
// Максимальный индекс
indexedItemShow = itemShow — 1
// Область (список ul) из которой выбираются изображения
itemList = $ ( ‘#portfolio-item’ ) ;
// Область куда помещаются текущие эскизы
itemWrapper = $ ( ‘#portfolio’ ) ;
// Массив с классами вариантов анимации
rotation = [ ‘flipped-vertical-bottom’ , ‘flipped-vertical-top’ , ‘flipped-horizontal-left’ , ‘flipped-horizontal-right’ ] ;
// Область навигации
navigation = $ ( ‘#navigation a’ ) ;

// Формируем каркас
for ( var i = 0 ; i itemShow ; i ++ ) <
// Выбираем изображение из области
itemImage = itemList. children ( ‘li:eq(‘ + i + ‘)’ ) . children ( ‘img’ ) ;
// Получаем значение атрибута src (путь до картинки)
itemSrc = itemImage. attr ( ‘src’ ) ;
// Получаем значение атрибута alt (описание)
itemAlt = itemImage. attr ( ‘alt’ ) ;
// Формируем блок div
item = ‘

При клике по кнопкам навигации случайным образом Math.random() происходит выбор одного из вариантов анимации, посредством выбора из массива одного из классов.

navigation. on ( ‘click’ , function ( e ) <
// Отменяем стандартное действие
e. preventDefault ( ) ;
// Работа с кнопками навигации
navigation. removeClass ( ‘selected’ ) ;
$ ( this ) . addClass ( ‘selected’ ) ;
// Получаем номер нажатой кнопки
page = $ ( this ) . attr ( ‘data-page’ ) ;
// Запускаем цикл
for ( var i = 0 ; i indexedItemShow ; i ++ ) <
// Рандомно выбираем эффект анимации
random = Math . floor ( Math . random ( ) * ( 3 — 0 + 1 ) ) ;
animation = rotation [ random ] ;
// Выбираем текущий div
item = itemWrapper. children ( ‘div:eq(‘ + i + ‘)’ ) ;
// Присваиваем класс анимации
item. addClass ( ‘animated ‘ + animation ) ;

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

Когда анимация закончится, мы удаляем анимационный эффект и имя класса для каждого блока.

На этом все! Посетите демонстрационную страницу (кнопка в начале урока), чтобы увидеть портфолио в живую.

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих