Jquery рейтинг зірочки

Jquery рейтинг зірочки

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

Перша частина. Підключення файлів js і css. HTML. Картинки.

За стандартом, підключаємо файл стилів 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 - Не активна зірочка.

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

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

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

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

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

Як вони працюють, що, як і чому, я вже описав докладно вище, тому зупинюся лише на деталях, які можуть бути Вам незрозумілі.

Під класом rate1. ми запускаємо функцію з параметрами score і evt. У першому з яких, ми отримуємо методом alert () назва, а по-другому ID. обраного нами рейтингу. Під класом rate2. ми встановлюємо номер кількості виведених зірочок, а вірніше їх буде десять і робимо застосовність картинок не за замовчуванням, а своїх, де starOff - є зірочкою неактивно, а StarOn - активної. Під класом rate3. ми встановлюємо номер кількості виведених зірочок і приховуємо із загального показу зірочку за замовчуванням - дуже погано. встановлюючи загальне значення статусів рівне п'яти.

Третя частина. Бібліотека jquery.raty.js.

Обговоримо коротко, сам плагін. Якщо Вам дана тематика вже дуже стане цікава або Ви не зможете повноцінно з нею розібратися, тоді ми будемо розбирати це окремо і детально, може після другої частини, якщо вона буде, або може окремою частиною для плагіна. Ну чесно кажучи, досить навіть почитати трохи документацію і все відразу стане зрозуміло. Основний момент, на що варто звернути увагу, так це на установки за замовчуванням.

Схожі статті