jQuery: дружим Toggle с Cookie
Чтобы блок с поиском, рубриками и архивом плавно сворачивался и разворачивался, я использую jQuery — популярную в среде веб-разработчиков библиотеку JavaScript, обеспечивающую доступ к любому объекту DOM. Этим вечером к стандартному эффекту Toggle дописал возможность сохранения состояния этой части страницы при помощи плагина cookie. Ниже представлен фрагмент кода с некоторыми пояснениями. Полезно начинающим.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | $(document).ready(function() { // Функция отображения блока function setDisplayOption(toggleObject, cookieName) { // Если значение cookieName равно нулю или не задано, то блок данных храним скрытым if (($.cookie(cookieName) == 0) || ($.cookie(cookieName) == null)) { // Устанавливаем свойство 'display' на 'none'; $(toggleObject).css("display", "none"); // В противном случае храним открытым } else { // Устанавливаем свойство 'display' на 'block' $(toggleObject).css("display", "block"); } } // Добавляем Toogle вместе с Cookies function addToggleWithCookie(toggleLink, toggleObject, cookieName) { // Числовое значение cookieName var cookieValue; // Выставляем значения по-умолчанию setDisplayOption(toggleObject, cookieName); $(toggleLink).click(function() { // Если cookie не были заданы, то выставляем значение "открытый" if ($.cookie(cookieName) == null) { cookieValue = 1; // В противном случае сменяем значение } else { cookieValue = Math.abs($.cookie(cookieName) - 1); } // Устанавливаем значение cookieName длительностью в 7 дней $.cookie(cookieName, cookieValue, { path: '/', expires: 7 }); // Toggle $(toggleObject).toggle("slow"); }); } // Вызываем функцию // При клике на '#fadeImg0' будет раскрыт '#topbar .content', а значение состояние будет сохранено в // cookies c названием 'search_toggle' addToggleWithCookie('#fadeImg0', '#topbar .content', 'search_toggle'); }); |
Работающий пример можно посмотреть в этом блоге (нажмите на лупу в шапке).
