В этой заметке речь пойдёт о работе с JavaScript-фреймворком jquery-ui, а также с тем, что считают Вселенским Злом и чрезвычайно удобной вещью — технологией Cookies.
А именно, затронем вопрос динамического изменения размеров блоков и элементов мышкой.
Итак, для начала нам понадобятся сами файлы фреймворка.
Скачать их всегда можно с официального сайта.
Тут же подключаем полученные файлы к нашей страничке следующим кодом:
Это базовые стили наших элементов, а также фреймворки jQuery и jQuery-ui соответственно.
Теперь научимся подключать их к странице и настраивать.
Будем использовать следующую html-разметку
Обращаю внимание на то, что классы ui-widget-content и ui-widget-header идут «из коробки» в css плагина Resizable, соответственно, править их нужно там же.
Теперь активируем наш скрипт.
$("#rsz").resizable();
});
По идентификатору элемента мы присваиваем ему же масштабируемость (resizable). Базовая настройка плагина на этом завершается, а результат можно посмотреть в демо-примере номер 1.
Теперь прикрутим к нашему ресайзбл-блоку немного плюшек для красоты. Встроенные свойства самого плагина Resizable помогут нам это сделать. Этих свойств достаточно много.
alsoResize – выбираем по селектору элементы, которые будут менять свои размеры вместе с текущим блоком.
animate – со значением true при изменении размера будет использоваться анимация.
animateDuration – может принимать значения ’slow’, ‘normal’, ‘fast’ или число в миллисекундах, определяющее длительность анимационного эффекта.
animateEasing – опция принимает строку с названием анимационного эффекта. Большое количество разнообразных эффектов можно использовать при условии подключения дополнительного плагина jQuery Easing. По умолчанию имеет значение ’swing’.
aspectRatio – при значении true по изменении размеров элемента будет сохраняться пропорция в соотношении сторон.
cancel –запрещает изменение размеров для элементов, указанных в этой опции.
containment – ограничивает изменение размеров внутри текущего элемента.
delay – число в миллисекундах, определяющее задержку старта ресайза элемента.
distance – количество пикселей, на которое переместиться указатель мыши, прежде, чем начнется изменение размеров элемента («защита от дурака» =) ).
ghost – при значении true по изменении размеров элемента будут видны его полупрозрачные контуры.
grid – в качестве значения принимает массив элементов [x, y], где x и y – числа, определяющие шаг сетки. Изменение размеров будет происходить дискретно, в соответствии с заданными значениями.
helper – принимает строку с названием css-класса, который добавляется к области, демонстрирующей во время перемещения размеры, в которые установится элемент.
maxHeight – максимальная высота.
maxWidth – максимальная ширина.
minHeight – минимальная высота.
minWidth – минимальная ширина.
Плюшки подключаются примерно так
$("#rsz").resizable({
animate: true,
ghost: true
});
});
А пример применения можно посмотреть ниже
Всё это, конечно, хорошо. Но что делать, если один и тот же элемент повторяется в шаблоне страницы несколько раз? Ведь при переходе все его свойства будут возвращаться к исходным, и страница будет «скакать». И тут на помощь нам приходит технология Cookies. Да-да, от английского слова «печеньки». Это текстовый файл с параметрами, передаваемый браузеру, при заходе на страницу. О том, как пишутся данные в куки, сейчас я рассказывать не буду. А вот работу с ним я опишу.
Для того, чтобы писать в Cookies новые данные, нам потребуется ещё один плагин — jquery.cookie.js
Для того, чтобы записать параметры, используем следующий код
$("#rsz").resizable({
stop: function(event, ui) {
var wdiv = ui.size.width;
$.cookie("rsz", wdiv);
}
});
});
У jQuery ui события немного отличаются от событий простого JavaScript. Поэтому используем в коде конструкицю stop: function(event, ui). Она означает, что по остановке действия плагина ui-Resizable будут совершены какие-то действия. А именно, объявится переменная wdiv, в которую мы положим текущее значение ширины нашего div. Простыми командами этого тоже не сделаешь. Во фреймворке есть объект ui.size, который хранит текущие размеры изменяемого блока.
После этого значения записываются в cookie. Конструкция записи имеет следующий стандарт: $.cookie(«имя_куки», значение).
Всё, печенька готова. Однако, её необходимо прочитать и применить её данные к блоку. Это сделает вот такой код:
if($.cookie("rsz")) {
var orig = $.cookie("rsz");
$("#rsz").animate({
width: orig
}, 100 );
}
});
Суть такова: по событию готовности документа мы проверяем, есть ли куки с заданным именем (именем, которое мы задали в выставлении куки). Если они есть, то переменной orig мы присваиваем значение, которое там заложено. Затем применяем это значение к элементу с указанным селектором. В нашем случае это ширина блока.
На этом часть кода заканчивается, и можно наконец-то посмотреть третий демонстрационный пример!
Спасибо за внимание, и безошибочного Вам кода!