Ми збираємося зробити панель з декількома мітками. Кожен раз коли відбувається натискання на мітці, вона виділяється кольором і значення, відповідне мітці зберігається в кукі на вашому комп'ютері за допомогою браузера. Потім ви можете використовувати дві кнопки для виведення поточного значення, що зберігається в кукі, або для видалення куки.
Крім того, зверніть увагу на демо сторінку під час першого завантаження. Жодна з міток не виділена. А після того, як ви виберете одну, можна оновити демо сторінку, і мітка, виділена вами залишиться виділеною. Якщо ви видалите куки, то виділення зніметься з мітки. А після перезавантаження все мітки залишаться без виділень. Тепер розглянемо, як це працює.
Ми збираємося використовувати jQuery для управління куками, для чого буде задіяний плагін, який призначений для роботи зі сховищем куки. Назва у плагіна говорить сама за себе - Cookie.
Плагін Cookie можна завантажити з розділу проектів сайту плагінів jQuery.
Код HTML виглядає дуже просто:
створюємо куки
Отже, перше, що потрібно зробити, додати звичайний код для виконання нашого скрипта після того, як документ готовий:
Тепер ми створюємо обробник події натискання кнопки миші. Функція preventDefault () є стандартною процедурою jQuery для запобігання переходу браузера по посиланню, коли на ній натискають кнопку миші. Коли користувач натискає кнопку миші на мітці (яка насправді є посиланням), ми видаляємо клас .selected з мітки, яка виділена в поточний момент і встановлюємо його для щойно обраної.
Тепер додамо клас .selected до мітки:
Отримання і висновок значення куки
видалення куки
На закінчення, ми видаляємо куки. Це дуже цікавий момент. Код виглядає наступним чином:
І все. Розглянемо третій аргумент функції. Якщо подивитися в код плагіна jquery.cookie.js. то виявиться, що при значенні другого аргументу null змінної expires в масиві options присвоюється значення -1:
Тому, якщо ми передамо cookieOptions в якості третьої аргументу, наприклад, так:
то робота нашого коду порушиться, так як cookieOptions.expires прийме значення -1, що повністю відповідає логіці роботи плагіна.
Наш код завершується класичної кінцівкою: