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

Опубликовано Опубликовано в рубрике cookie, HTML, JavaScript, jQuery, jquery-ui

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

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

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

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

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

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

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

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

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

$(function(){
  $("#rsz").resizable();
});

По идентификатору элемента мы присваиваем ему же масштабируемость (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 – минимальная ширина.

Плюшки подключаются примерно так

$(function(){
  $("#rsz").resizable({
    animate: true,
    ghost: true
  });
});

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

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

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

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

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

$(function(){
  $("#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(«имя_куки», значение).

Всё, печенька готова. Однако, её необходимо прочитать и применить её данные к блоку. Это сделает вот такой код:

$(document).ready(function(){
	if($.cookie("rsz")) {
		var orig = $.cookie("rsz");
		$("#rsz").animate({ 
          width: orig
        }, 100 );
  		}
});

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

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

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

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

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

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