Растягиваемые элементы

Материал из JQuery

Перейти к: навигация, поиск

Resizable


Описание
Свойства
Методы
События
Оформление

Плагин Resizable позволяет сделать выбранные элементы растягиваемыми с помощью мыши. При настройке можно указать в какие стороны они будут растягиваться, а так же ограничить максимальный и минимальный возможный размер.

Resizable-элементы генерируют три новых типа: start, resize, stop. Они происходят в момент захвата, при растягивании и в момент отпускания resizable-элемента. Обработчики этих событий будут получать 2 параметра: стандартный объект события от браузера и дополнительный объект (назовем его ui) со следующими полями:

ui.helper — вспомогательный элемент (helper) в форме объекта jQuery. Подробности об этом элементе можно узнать в описании свойства helper.
ui.originalPosition — позиция resizable-элемента перед началом растяжения.
ui.originalSize — размер resizable-элемента перед началом растяжения.
ui.position — текущая позиция resizable-элемента относительно ближайшего родителя c заданным типом позиционирования (css-свойство position равно relative или absolute или fixed).
ui.size — текущий размер растягиваемого элемента.
↓ Имя свойства :типы значений (значение по умолчанию)
disabled:boolean(false)
Останавливает\возобновляет возможность изменять размеры выбранных элементов страницы.
// ------- Работа со свойством disabled ---------
// в момент установки resizable на элемент
$("selector").resizable({ disabled: true });
 
//получение значения disabled 
var disabled = $("selector").resizable( "option", "disabled" );
//изменение значения disabled
$("selector").resizable( "option", "disabled", true );
В этом параметре можно указать элементы, размер которых будет автоматически изменяться вслед растягиванием текущего элемента.
// ------- Работа со свойством alsoResize ---------
// в момент установки resizable на элемент
$("selector").resizable({ alsoResize:".bigBan" });
 
//получение значения alsoResize 
var alsoResize = $("selector").resizable( "option", "alsoResize" );
//изменение значения alsoResize
$("selector").resizable( "option", "alsoResize", ".bigBan" );
animate:boolean(false)
Если установить это свойство в true то в процессе растягивании элемента вы будете видеть изменения вспомогательного элемента (см. свойство helper), а при завершении растягивания исходный элемент плавно примет нужные размеры (плавность можно настраивать с помощью свойств animateDuration и animateEasing). См. пример "Анимация" выше.
// ------- Работа со свойством animate ---------
// в момент установки resizable на элемент
$("selector").resizable({ animate:true });
 
//получение значения animate 
var animate = $("selector").resizable( "option", "animate" );
//изменение значения animate
$("selector").resizable( "option", "animate", true );
animateDuration:integer,string('slow')
Продолжительность выполнения анимации (если она задана в параметре animate). Она может быть задана в миллисекундах или строковым значением 'fast' или 'slow' (200 и 600 миллисекунд).
// ------- Работа со свойством animateDuration ---------
// в момент установки resizable на элемент
$("selector").resizable({ animateDuration:700 });
 
//получение значения animateDuration
var animateDuration = $("selector").resizable( "option", "animateDuration" );
//изменение значения animateDuration
$("selector").resizable( "option", "animateDuration", 700 );
animateEasing:string('swing')
Динамика выполнения анимации (если она задана в параметре animate). Подробности см. в статье об анимации в jQuery.
// ------- Работа со свойством animateEasing ---------
// в момент установки resizable на элемент
$("selector").resizable({ animateEasing:"linear" });
 
//получение значения animateEasing
var animateEasing = $("selector").resizable( "option", "animateEasing" );
//изменение значения animateEasing
$("selector").resizable( "option", "animateEasing", "linear" );
aspectRatio:float,boolean(false)
Присвоив этому параметру true, вы включите режим сохранения первоначальных пропорций растягиваемого элемента. Кроме этого, можно задать необходимую пропорцию в виде числа, например 6/10.
// ------- Работа со свойством aspectRatio ---------
// в момент установки resizable на элемент
$("selector").resizable({ aspectRatio:true });
 
//получение значения aspectRatio
var aspectRatio = $("selector").resizable( "option", "aspectRatio" );
//изменение значения aspectRatio
$("selector").resizable( "option", "aspectRatio", true );
autoHide:boolean(false)
Если это свойство равно true, то элементы за которые происходит растягивание будут появляться только когда курсор будет появляться над текущим растягиваемым элементом страницы.
// ------- Работа со свойством autoHide ---------
// в момент установки resizable на элемент
$("selector").resizable({ autoHide:true });
 
//получение значения autoHide
var autoHide = $("selector").resizable( "option", "autoHide" );
//изменение значения autoHide
$("selector").resizable( "option", "autoHide", true );
cancel:селектор(':input,option')
Пока курсор находится над элементами, соответствующими селектору из cancel, растягивание текущего элемента не сможет начаться.
// ------- Работа со свойством cancel ---------
// в момент установки resizable на элемент
$("selector").resizable({ cancel:':input,option,textarea' });
 
//получение значения cancel
var cancel = $("selector").resizable( "option", "cancel" );
//изменение значения cancel
$("selector").resizable( "option", "cancel", ':input,option,textarea' );
Параметр containment определяет ограничения на растяжение resizable-элемента. По умолчанию их нет, но они могут быть заданы областью какого-либо элемента (например с помощью селекторов 'parent', 'document', 'window' и др.).
// ------- Работа со свойством containment---------
// в момент установки resizable на элемент
$("selector").resizable({ containment:"parent" });
 
//получение значения containment
var containment = $("selector").resizable( "option", "containment" );
//изменение значения containment
$("selector").resizable( "option", "containment", "parent" );
delay:integer(0)
Параметр delay определяет задержку (в миллисекундах) перед началом растягивания элемента. Это может быть защитой от нежелательного растягивания элемента, если пользователь случайно потянет элемент.
// ------- Работа со свойством delay ---------
// в момент установки resizable на элемент
$("selector").resizable({ delay:500 });
 
//получение значения delay
var delay = $("selector").resizable( "option", "delay" );
//изменение значения delay
$("selector").resizable( "option", "delay", 500 );
distance:integer(1)
Этот параметр определяет расстояние (в пикселях), на которое нужно потянуть элемент, что бы его размер начал меняться. Это может быть защитой от нежелательного растягивания элемента, если пользователь случайно потянет за его край.
// ------- Работа со свойством distance ---------
// в момент установки resizable на элемент
$("selector").resizable({ distance:15 });
 
//получение значения distance
var distance = $("selector").resizable( "option", "distance" );
//изменение значения distance
$("selector").resizable( "option", "distance", 15 );
grid:array,false(false)
С помощью grid можно задать в пикселях размер шага растягивания элемента (горизонтального и вертикального отдельно). См. выше пример "Размер шага".
// ------- Работа со свойством grid ---------
// в момент установки resizable на элемент
$("selector").resizable({ grid:[10,10] });
 
//получение значения grid
var grid = $("selector").resizable( "option", "grid" );
//изменение значения grid
$("selector").resizable( "option", "grid", [10,10] );
handles:string,object('e, s, se')
В этом свойстве можно задать объекты, за которые будут растягиваться resizable-элементы. Оно может быть задано в виде строки значений, перечисленных через запятую (возможные значения: n, e, s, w, ne, se, sw, nw, all. Все кроме последнего значения ассоциированы со сторонами света: север (верх), запад (лево), юг (низ), восток (право), северо-восток и т.д.). Растягивающие объекты будут установлены плагином автоматически в заданных местах (верху, низу, по диагонали и др.).

Кроме этого, можно задать собственные объекты, за которые будут растягиваться resizable-элементы. Для этого свойству handles необходимо присвоить javascript-объект, ключами которого могут быть {n, e, s, w, ne, se, sw, nw}. А в качестве значений, должны быть заданы селекторы, по которым будет произведен поиск объектов для растягивания, внутри растягиваемых элементов. Если растягивающие объекты расположены снаружи resizable-элементов, то вместо селектора нужно задать их непосредственно объектами DOM или jQuery-объектами.

// ------- Работа со свойством handles ---------
// в момент установки resizable на элемент
$("selector").resizable({ handles:"se" });
 
//получение значения handles
var handles = $("selector").resizable( "option", "handles" );
//изменение значения handles
$("selector").resizable( "option", "handles", {"se":".se-element"} );
helper:string,false(false)
В этом свойстве можно задать имя класса для вспомогательного элемента. Именно он будет изменять свои размеры в момент растягивания (а при завершении растягивания размеры вспомогательного элемента будут присвоены исходному resizable-элементу). Если оставить это свойство в false, то вспомогательный элемент не будет создан. См. выше пример "Вспомогательный элемент".
// ------- Работа со свойством helper ---------
// в момент установки resizable на элемент
$("selector").resizable({ helper:'ui-state-highlight' });
 
//получение значения helper
var helper = $("selector").resizable( "option", "helper" );
//изменение значения helper
$("selector").resizable( "option", "helper", 'ui-state-highlight' );
maxHeight:integer(null)
Это свойство определяет максимальную высоту (в пикселях) растягиваемого элемента.
// ------- Работа со свойством maxHeight ---------
// в момент установки resizable на элемент
$("selector").resizable({ maxHeight:300 });
 
//получение значения maxHeight
var maxHeight = $("selector").resizable( "option", "maxHeight" );
//изменение значения maxHeight
$("selector").resizable( "option", "maxHeight", 300 );
maxWidth:integer(null)
Это свойство определяет максимальную ширину (в пикселях) растягиваемого элемента.
// ------- Работа со свойством maxWidth ---------
// в момент установки resizable на элемент
$("selector").resizable({ maxWidth:300 });
 
//получение значения maxWidth
var maxWidth = $("selector").resizable( "option", "maxWidth" );
//изменение значения maxWidth
$("selector").resizable( "option", "maxWidth", 300 );
minHeight:integer(10)
Это свойство определяет минимальную высоту (в пикселях) растягиваемого элемента.
// ------- Работа со свойством minHeight ---------
// в момент установки resizable на элемент
$("selector").resizable({ minHeight:300 });
 
//получение значения minHeight
var minHeight = $("selector").resizable( "option", "minHeight" );
//изменение значения minHeight
$("selector").resizable( "option", "minHeight", 300 );
minWidth:integer(10)
Это свойство определяет минимальную ширину (в пикселях) растягиваемого элемента.
// ------- Работа со свойством minWidth ---------
// в момент установки resizable на элемент
$("selector").resizable({ minWidth:300 });
 
//получение значения minWidth
var minWidth = $("selector").resizable( "option", "minWidth" );
//изменение значения minWidth
$("selector").resizable( "option", "minWidth", 300 );
↓ Способ вызова
.resizable("destroy") 
Удаляет всю функциональность плагина resizable с выбранных элементов.
.resizable("disable") 
Приостанавливает работу плагина resizable на выбранных элементах. Для возобновления, необходимо воспользоваться методом .resizable("enable").
.resizable("enable") 
Возобновляет работу плагина resizable на выбранных элементах (например, после того, как она была остановлена с помощью .resizable("disable")).
.resizable("option", optionName, [value]) 
Этот метод позволяет изменять/получать свойства плагина resizable. Если необходимо изменить сразу несколько свойств, воспользуйтесь следующей формой этой функции — .resizable("option", options), где options это объект в формате {optionName1:value1, optionName2:value2, ...}.
.resizable("widget") 
Возвращает те из выбранных элементов, которые являются растягиваемыми.
↓ Внутреннее имя события :внешнее имя
create:resizecreate
Событие create происходит в момент установки resizable на элемент.
// обработка события create
$("selector").resizable({
   create: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "resizecreate", function(event, ui){ ... });
start:resizestart
Событие start происходит в момент начала растягивания элемента.
// обработка события start
$("selector").resizable({
   start: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "resizestart", function(event, ui){ ... });
resize:resize
Событие resize происходит в процессе растягивания элемента, при каждом движении мыши.
// обработка события resize
$("selector").resizable({
   resize: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "resize", function(event, ui){ ... });
stop:resizestop
Событие start происходит в момент отпускания растягиваемого элемента.
// обработка события stop
$("selector").resizable({
   stop: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "resizestop", function(event, ui){ ... });
Плагин Resizable использует стандартные стили (jQuery UI CSS Framework) для оформления растягиваемых элементов. В частности, оттуда используются цвета, фоны (background) и текстуры. Для их редактирования рекомендуется использовать специальную ручную настройку на сайте jQuery UI. Для специфичных манипуляций с растягиваемыми элементами, можно воспользоваться информацией о присваиваемых им классах: