Очень важным моментом в интерфейсе сайта является сохранение его текущего положения, для того, чтобы после перезагрузки страницы, пользователю не пришлось заново повторять свои действия с настройкой интерфейса сайта под себя. Идеальным средством для хранения состояния пользовательского интерфейса является cookies. Всем известно как работать с куки с помощью серверных (backend) языков, но зачастую проще это делать напрямую из JavaScript. Конечно можно передавать данные интерфейса серверной части, а там уже сохранять их хоть в БД. Но как правило, если вы не разрабатывайте новый интерфейс для gmail, нет необходимости делать это для 5-6 параметров.
JavaScript и Cookies.
В JavaScript есть стандартные методы для работы с document.cookie, именно так происходит обращение к куки в JavaScript. Например функция для установки куки будет выглядеть следующим образом
function setCookie(c_name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toUTCString());
}
Как вы видите не очень удобно, поэтому я и предпочитаю пользоваться JQuery плагинами, если конечно фреймворк в проекте уже присутствует, если нет, то подключать JQuery, только из-за работы с куки не рационально. В принципе взяв готовые функции для document.cookie или написав их самостоятельно, можно свести неудобства и количество кода к минимуму.
Плагины cookies для JQuery.
Если в вашем сайте уже используется JQuery, то наиболее простой способ наладить работу с cookies, это использовать плагин. Плагинов довольно много я обычно использую ezCookie. В плагине содержатся стандартные методы для работы с cookies – установка, чтение, удаление. На странице проекта есть детальное описание всех методов. Плагин ezCookie отличается от многих подобных автоматическим распознаванием значения установленной cookie, и, если это JSON данные, то функция автоматически возвращает JSON объект. Такой режим работы позволяет устанавливать subcookie, то есть множества пар имя:значение для одного cookie (для одной cookie переменной).
Сохранение положения интерфейса.
Давайте напишем небольшой пример, который позволит понять схему сохранения простых позиций интерфейса. Пусть у нас будет 5 разноцветных квадратов, которые по клику на кнопку “закрыть” закрываются, и текст на кнопке меняется на “открыть”. И при нажатии на кнопку “открыть” соответственно квадрат снова становится видимым.
Для этого воспользуемся стандартной JQuery функцией toggle (переключатель), которая в качестве аргументов принимает 2 функции, одна из которых срабатывает на четном щелчке мыши, другая на нечетном. Чтобы сохранить положение квадратов, мы в первой toggle функции будем устанавливать значение cookie в 0, а на второй функции в 1, ноль означает, что квадрат скрыт, а единица соответственно, что квадрат виден.
Здесь я использую функцию ezCookie $.setSubCookie, чтобы не увеличивать количество записей cookie. Так как структурно записи для каждого квадрата у нас равны, то все проще хранить в одной cookie с именем “ui_save”. В качестве дополнительных параметров метод $.setSubCookie позволяет установить время жизни cookies, но в данном случае используется время жизни по умолчанию.
Итак позицию интерфейса в зависимости от действий пользователя мы записали, теперь нам необходимо сделать так, чтобы после загрузки страницы интерфейс возвращался в записанное состояние. Для этого мы сначала считаем нашу куку функцией $.cookie(“ui_save”), эта функция автоматически определяет какое значение установлено в куке и если это JSON, то она возвращает JSON объект, что в нашем случае и происходит. Далее для каждого квадрата мы проверяем значение и если оно равно нулю то вызываем событие click, которое установит нужное положение квадрата.
$(document).ready(function(){
$(".close").toggle(
function(){
$(this).prev().slideUp(); //скрываем квадрат
$(this).html("Открыть");
var class_name = $(this).prev().attr("class");
//устанавливаем значение куки для конкретного квадрата в положение закрыть
$.setSubCookie("ui_save", class_name, 0);
},
function(){
$(this).prev().slideDown(); //разворачиваем квадрат
$(this).html("Закрыть");
var class_name = $(this).prev().attr("class");
//устанавливаем значение куки для конкретного квадрата в положение открыт
$.setSubCookie("ui_save", class_name, 1);
}
);
//Устанавливаем необходимую позицию интерфейса
var ck = $.cookie("ui_save");
for(key in ck){
if(ck[key] == 0){
//вызываем событие "закрыть"
$("." + key).next().trigger('click');
}
}
});
То что получилось можно посмотреть здесь, после обновления страницы позиция интерфейса (закрытые, открытые квадраты) сохраняется.
