HTMLJavaScriptjQueryjquery-ui

Resizable элементы на странице и немного печенек

В этой заметке речь пойдёт о работе с JavaScript-фреймворком jquery-ui, а также с тем, что считают Вселенским Злом и чрезвычайно удобной вещью — технологией Cookies.
А именно, затронем вопрос динамического изменения размеров блоков и элементов мышкой.

Итак, для начала нам понадобятся сами файлы фреймворка.

Скачать их всегда можно с официального сайта.
Тут же подключаем полученные файлы к нашей страничке следующим кодом:
[cce]

[/cce]
Это базовые стили наших элементов, а также фреймворки jQuery и jQuery-ui соответственно.

Теперь научимся подключать их к странице и настраивать.

Будем использовать следующую html-разметку
[cce]

Этому элементу можно менять размеры

[/cce]
Обращаю внимание на то, что классы ui-widget-content и ui-widget-header идут «из коробки» в css плагина Resizable, соответственно, править их нужно там же.

Теперь активируем наш скрипт.

[cce]$(function(){
$(«#rsz»).resizable();
});[/cce]
По идентификатору элемента мы присваиваем ему же масштабируемость (resizable). Базовая настройка плагина на этом завершается, а результат можно посмотреть в демо-примере номер 1.

Демо-пример 1
Демо-пример 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 – минимальная ширина.

Плюшки подключаются примерно так
[cce]
$(function(){
$(«#rsz»).resizable({
animate: true,
ghost: true
});
});
[/cce]

А пример применения можно посмотреть ниже

Демо-пример 2
Демо-пример 2

Всё это, конечно, хорошо. Но что делать, если один и тот же элемент повторяется в шаблоне страницы несколько раз? Ведь при переходе все его свойства будут возвращаться к исходным, и страница будет «скакать». И тут на помощь нам приходит технология Cookies. Да-да, от английского слова «печеньки». Это текстовый файл с параметрами, передаваемый браузеру, при заходе на страницу. О том, как пишутся данные в куки, сейчас я рассказывать не буду. А вот работу с ним я опишу.

Для того, чтобы писать в Cookies новые данные, нам потребуется ещё один плагин — jquery.cookie.js

[cce][/cce]

Для того, чтобы записать параметры, используем следующий код

[cce]
$(function(){
$(«#rsz»).resizable({
stop: function(event, ui) {
var wdiv = ui.size.width;
$.cookie(«rsz», wdiv);
}
});
});
[/cce]

У jQuery ui события немного отличаются от событий простого JavaScript. Поэтому используем в коде конструкицю stop: function(event, ui). Она означает, что по остановке действия плагина ui-Resizable будут совершены какие-то действия. А именно, объявится переменная wdiv, в которую мы положим текущее значение ширины нашего div. Простыми командами этого тоже не сделаешь. Во фреймворке есть объект ui.size, который хранит текущие размеры изменяемого блока.
После этого значения записываются в cookie. Конструкция записи имеет следующий стандарт: $.cookie(«имя_куки», значение).

Всё, печенька готова. Однако, её необходимо прочитать и применить её данные к блоку. Это сделает вот такой код:
[cce]
$(document).ready(function(){
if($.cookie(«rsz»)) {
var orig = $.cookie(«rsz»);
$(«#rsz»).animate({
width: orig
}, 100 );
}
});
[/cce]

Суть такова: по событию готовности документа мы проверяем, есть ли куки с заданным именем (именем, которое мы задали в выставлении куки). Если они есть, то переменной orig мы присваиваем значение, которое там заложено. Затем применяем это значение к элементу с указанным селектором. В нашем случае это ширина блока.

На этом часть кода заканчивается, и можно наконец-то посмотреть третий демонстрационный пример!

Демо-пример 3
Демо-пример 3

Спасибо за внимание, и безошибочного Вам кода!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *