Думаю що все бачили на багатьох сайтах рейтинг у вигляді зірочок з можливістю залишити свій голос. От саме цим ми і займемося в цьому уроці. Писати скрипт будемо з нуля, використовуючи свої знання, ну а якщо забудемо щось, завжди можна підглянути в шпаргалках на Ruseller.com
Найбільш нетерплячі можуть подивитися в демке кінцевий результат;)
HTML - Каркас нашого скрипта
Схематично наш майбутній рейтинг повинен виглядати так:
У нашому рейтингу #raiting_star - буде 2 блоки. Перший - #raiting - там будуть жити наші зірочки і там же юзер буде ставити оцінку. Другий - #raiting_info - сюди ми помістимо іконку ajax-loader при відправці даних на сервер, тут же будемо виводити відповідь з сервера.
У самому блоці #raiting нам необхідно показувати зірки в трьох станах - показ поточного рейтингу, вибір зірок при наведенні і порожні зірки. Отже блок #raiting у нас повинен містити в собі 3 блоку. Що стосується блоку #raiting_info ми до нього повернемося в подальшому, а поки просто помістимо туди який-небудь текст п'ятим заголовком. Ось такий виходить простий каркас:
CSS - надаємо вид рейтингу
Показувати зірки будемо з одного файлу. Ось таку картинку я знайшов для нашого скрипта:
перший ряд ми будемо використовувати для #raiting_blank. другий для підсумків голосування #raiting_votes. третій для моменту голосування #raiting_hover. Щоб наші блоків не розташувалися один під одним, їм потрібно задати однакове позиціонування щодо #raiting. А самому #raiting задамо обтікання, щоб #raiting_info не виїхав під нього. Виходячи з вище сказаного створюємо стилі:
Отже на даний момент у вас повинні в браузері бути 5 сірих сумовитих зірок і якийсь текст. Виходячи зі сказаного вище будемо цю справу виправляти.
ruseller.com попереджає - jquery викликає залежність :) Не забудьте його підключити, далі працювати будемо з ним.
На даний момент наша перша задача - в залежності від рейтингу статті встановити ширину блоку з золотистими зірками #raiting_votes. які перекриють частково (або повністю) блок сірих зірок. Надалі рейтинг ми будемо отримувати з бд і зберігати результат голосування туди ж, на підставі чого розраховувати рейтинг просто обчислюючи середню оцінку. А поки ми предстваіть, как-будто у нашій статті рейтинг 4,5:
Оскільки ширина однієї зірки дорівнює 16px, то відповідно ширина блоку #raiting_votes буде дорівнює 17px * на рейтинг (плюс 1 піксель на прогалини між зірками). Таким чином в змінну star_widht заносимо шукану ширину блоку. Зберігаємо, перевіряємо. Вже щось схоже. Можна вивести рейтинг у вигляді цифр в блоці #raiting_info:
Тепер наше завдання при наведенні мишкою на рейтинг заховати результати і показувати зірки для вибору оцінки по руху мишкою:
Тут також нічого складного. При наведенні миші на #raiting перемикаємо "видимість" блоків #raiting_votes і #raiting_hover. Те ж саме робимо, коли миша залишає область #raiting. Тепер при попаданні Мишкіна область #raiting, блок #raiting_votes у нас зникне, а його місце займе блок #raiting_hover, правда поки ще нульовий ширини, тому ми на даному етапі побачимо сірі зірки блоку #raiting_blank.
Тепер саме час зайнятися блоком #raiting_hover.
Нам потрібно, щоб ширина #raiting_hover відповідала положенням миші на рейтенге. Відразу наведу код, а потім поясню:
У margin_doc заносимо початкове значення відступів рейтингу щодо документа. Потім, коли миша бігає по рейтингу визначаємо поточний стан миші. Різниця widht_votes є відстань, на яке миша втекла від лівого краю #raiting. Детальніше функції описані в шпаргалці jquery
Тепер знаючи відстань, на яке втекла мишка, обчислюємо оцінку юзера user_votes. widht_votes / 17 - тут 17 - це ширина 1 зірки (вкл. міжзоряний відстань). Math.ceil округлює отриманий результат в більшу сторону до цілого числа. Таким чином якщо юзер знаходиться в будь-якій частині зірки, ми її зарахували за цілу оцінку. І в останньому рядку ми множимо оцінку юзера на 17, щоб отримати ширину показу блоку #raiting_hover.
Далі нам необхідно організувати відправку оцінки юзера на сервер. В рамках даної статті php-mysql частина розглядатися не буде, тому що задача цього уроку - реалізація віджета "Зоряний рейтинг". Буде потрібно - пишіть)
Отже в рамках цього уроку ми просто створимо файл-обробник raiting.php з кількома рядками коду:
Тут sleep (1) затримує виконання скрипта на1 секунду - потрібно тільки для тесту на локальному сервері (пізніше поясню для чого). $ _GET [ "user_votes"] і $ _GET [ "id_arc"] це у нас будуть приходити змінні, що містять оцінку і id статті відповідно.
Оброблювач у нас є, залишилося йому відправити оцінку і id статті. Оскільки у нас будь-якої конкретної статті в цьому уроці немає, змінної id_arc привласнити будь ціле-числове значення, наприклад 55. Відправляти дані на сервер будемо по кліку на рейтингу, при цьому нам потрібно показати традиційну для ajax іконку завантаження, тому спочатку трохи змінимо блок #raiting_info:
Тут ми просто додали аякс-іконку. Для неї пропишемо стилі:
Ну і тепер власне обробник на jquery:
Тут все досить просто. Поясню лише рядок $ ( '# raiting_votes'). Width ((total_reiting + user_votes) * 17/2) - при натисканні ми повинні встановити нове значення ширини блоку з золотистими зірками.
Для цього складаємо наявну оцінку з оцінкою користувача і ділимо на 2 (тобто знаходимо середнє арифметичне). Т.ч. знаходимо нове значення рейтингу, помноживши його на 17 отримуємо ширину, на яку потрібно показати блок золотистих зірок.
Ну і на останок давайте введемо перевірку на куках, голосував юзер чи ні за цю статтю.
Реалізуємо за допомогою плагіна jquery.cookies:
Не забудьте підключити до вашої сторінці сам плагін (є в архіві) і обов'язково перенесіть завдання змінної id_arc = 55; в самоеначало. Весь js код з урахуванням перевірки (пояснення нижче):
Додано: $ ( "# raiting"). Unbind (); - одв'язує все обробники подій від рейтингу, щоб після голосування рейтинг просто показував результат.
Ось так з нуля ми написали скрипт "зоряного голосування". Як бачите реалізація досить проста. Якщо вам незрозуміло значення будь-якої функції (методу) jquery, ви можете звернутися до шпаргалками. розміщеним на нашому сайті.
Побажання і пропозиції залишайте в коментарях. Дякую за увагу, приємних вихідних!
5 останніх уроків рубрики "jQuery"
Сьогодні ми б хотіли вам розповісти про бібліотеку TypeIt - безкоштовному jQuery плагін. З її допомогою можна імітувати набір тексту. Якщо все налаштувати правильно, то можна домогтися дуже реалістичного ефекту.
jQuery плагін для створення тимчасової шкали.
jQuery плагін для створення діаграми Ганта.
Приклад того як здійснити завантаження файлу через PHP і jQuery ajax.
исходники не працюють
АндрейЖданов
Повністю згоден з Олександром, якщо робити то добре, в іншому випадку краще взагалі не робити.
Підтримую Андрія і Олександра! Євген Стиценков зробіть будь ласка доповнення для цієї статті. Хочеться бачити повністю готове рішення. Покажіть як зроблено це на цьому сайті.
ЕвгенійСтиценков
Олександр, sleep (1) встановлює затримку виконання php-скрипта на 1 секунду, в прикладі потрібен тільки для того, щоб при тесті на локальній маштне побачити відправку запиту. цей рядок взагалі можна прибрати. Мета цієї статті - реалізація клієнтської частини. Дані прийшли до вас на сервер, далі робіть з ними що хочете, хоч в базу пишіть, хоч в файли. Є більш ранні уроки, де рейтинг (голосування) розглядалися із записом в БД, серверну частину можна взяти звідти, це неважко.
Спасибі за відповідь! Мені звичайно хотілося б спробувати ваш скрипт у дії, але вже я знайшов по правді кажучи інший вже з підключенням до бази даних правда без jquery і працює супер.
АндрейЖданов
Олександр, скиньте будь ласка посилання на скрипт, або на мило [email protected] Дякую
Я не можу прекріпіть ці зірки на свій сайт. Я використовую php файли, а Jquery там не працює :( що мені робити.
У мене така проблема, коли я оцінив свою статтю, оцінку вивело і номер Стаття теж але інформація про те на скільки проголосує користувач і в Сумарний оцінку тож не потрапляє ніяких чисел.
ця иформация не влучає у мою БД.
#raiting_star виводжу в PHP циклі. Чому блоки raiting_votes і raiting_hover, якими управляє jQuery працюють тільки в першій ітерації циклу?
ставлю вручну, width в CSS - працює, а jQuery чомусь не бере?
Хоча сайт ruseller.com постійного на php коді, Jquery зірки працюють і багато іншого, а ось на моєму php сайт немає. Уже, що тільки не робив :(
Будь ласка добавте де то частина з підключенням до БД!
А в якому значенні ми загальному рейтингу додаємо тільки що обраний рейтинг?
ЕвгенійСтиценков
ЕвгенійСтиценков
P.S. Для Андрія. Коли статті виводяться в циклі, в цьому режимі скрипт рейтингу тут не підключається, тому що в цьому режимі він не потрібен
Ніфіга не виходить вродевсе як треба зробила раз 5 перечитала або я тупа або що щось тут не так: (((
Зіткнувся з проблемою: На локальному сервері все працює нормально, а на віддаленому сервері тільки в IE і Chrome. В Опері і Firefox не оре хоч убий. Спробував зробити ідентично як на ruseller - один фіг. Може, хто знає, в чому прикол?
zhenya_polyakov
// оновлюємо БД (оцінку і приплюсовуються одну людину) $ query = "UPDATE content SET user_votes = '$ user_votez', user_num = (user_num + 1) WHERE id_arc =". $ _ GET [ 'id_arc']; mysql_query ($ query); sleep (2); // для тесту на локальному компі echo "Спасибі, що поставили оцінку". $ _ GET [ "user_votes"]. "За статтю №". $ _ GET [ "id_arc"];>?> ВСЕ! Заноситься в БД і не треба додаткової таблиці! Залишився тільки питання з безпекою! Зламати такий рейтинг напевно елементарно :-( І система подщетов як було написано не надто правильна! І правильно пишуть, якщо викладати статтю то вже доробляти до кінця. Звичайно стимул є для вивчення, але якби хотів сам зробити там не читав би ніяких статей взагалі ! А вам спасибі за сайт і уроки, а як пречудово все!
zhenya_polyakov
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!