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

Resizable

~lt~tit~gt~Простое использование~lt~/tit~gt~
~lt~coment~gt~Растягиваемым элементам можно изменять размеры с помощью мыши.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~style~gt~
    body{font:9pt Arial,sans-serif;}
    #resizable{width:150px; height:150px; padding:0.5em; border:1px solid #ddd; background-color:#eee}
    #resizable h3{padding:3px; text-align:center; margin:0; background-color:#e1cb70; color:#444}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~div id="resizable"~gt~
    ~lt~h3~gt~Растягиваемый элемент~lt~/h3~gt~
  ~lt~/div~gt~
  ~lt~script~gt~
    $("#resizable").resizable();
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Сохранение пропорций~lt~/tit~gt~
~lt~coment~gt~Растягиваемые элементы могут быть настроены на сохранение пропорций при изменении размеров. Этом можно сделать с помощью свойства aspectRatio~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~style~gt~
    body{font:9pt Arial,sans-serif;}
    #resizable{width:250px; height:150px; padding:0.5em; border:1px solid #ddd; background-color:#eee}
    #resizable h3{padding:3px; text-align:center; margin:0; background-color:#e1cb70; color:#444}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~div id="resizable"~gt~
    ~lt~h3~gt~Растягиваемый элемент~lt~/h3~gt~
  ~lt~/div~gt~
  ~lt~script~gt~
    $("#resizable").resizable({ aspectRatio:5/3 });
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Ограничения размеров~lt~/tit~gt~
~lt~coment~gt~Можно задать максимальный и минимальный размер растягиваемых элементов с помощью свойств maxHeight, maxWidth, minHeight, minWidth~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~style~gt~
    body{font:9pt Arial,sans-serif;}
    #resizable{width:250px; height:150px; padding:0.5em; border:1px solid #ddd; background-color:#eee}
    #resizable h3{padding:3px; text-align:center; margin:0; background-color:#e1cb70; color:#444}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~div id="resizable"~gt~
    ~lt~h3~gt~Растягиваемый элемент~lt~/h3~gt~
  ~lt~/div~gt~
  ~lt~script~gt~
    $("#resizable").resizable({
      maxHeight: 250,
      maxWidth: 350,
      minHeight: 150,
      minWidth: 200
    });
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Ограничение предком~lt~/tit~gt~
~lt~coment~gt~Для растягиваемого элемента можно указать одного из содержащих его элементов, размеры которого он не сможет превзойти. Для этого необходимо использовать свойство containment.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~style~gt~
    body{font:9pt Arial,sans-serif;}
    #container, #content{padding:0.5em; border:1px solid #ddd; background-color:#eee}
    #container{width:350px; height:250px;}
    #content{width:250px; height:150px; margin:7px}
    #container h3, #content h3{padding:3px; text-align:center; margin:0; background-color:#e1cb70; color:#444}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~div id="container"~gt~
    ~lt~h3~gt~Ограничивающий элемент~lt~/h3~gt~
    ~lt~div id="content"~gt~
      ~lt~h3~gt~Растягиваемый элемент~lt~/h3~gt~
    ~lt~/div~gt~
  ~lt~/div~gt~
  ~lt~script~gt~
    $("#content").resizable({ containment:"#container" });
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Задержка старта~lt~/tit~gt~
~lt~coment~gt~Предотвратить случайное изменение размеров можно задержав его начало на несколько миллисекунд (свойство delay) или начав его только с определенного расстояния (свойство distance).~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~style~gt~
    body{font:9pt Arial,sans-serif;}
    .resizable{width:200px; height:100px; padding:0.5em; border:1px solid #ddd; background-color:#eee}
    .resizable h3{padding:3px; text-align:center; margin:0; background-color:#e1cb70; color:#444}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  Задержка старта 1000мс
  ~lt~div class="resizable"~gt~
    ~lt~h3~gt~Растягиваемый элемент~lt~/h3~gt~
  ~lt~/div~gt~
  ~lt~br /~gt~
  Задержка старта 40px
  ~lt~div class="resizable"~gt~
    ~lt~h3~gt~Растягиваемый элемент~lt~/h3~gt~
  ~lt~/div~gt~
  ~lt~script~gt~
    $(".resizable:first").resizable({ delay:1000 });
    $(".resizable:last").resizable({ distance:40 });
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Размер шага~lt~/tit~gt~
~lt~coment~gt~С помощью свойства grid можно задавать шаг изменения размеров (в пикселях) resizable-элемента.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~style~gt~
    body{font:9pt Arial,sans-serif;}
    .resizable{width:200px; height:100px; padding:0.5em; border:1px solid #ddd; background-color:#eee}
    .resizable h3{padding:3px; text-align:center; margin:0; background-color:#e1cb70; color:#444}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~div class="resizable"~gt~
    ~lt~h3~gt~Растягиваемый элемент~lt~/h3~gt~
  ~lt~/div~gt~
  ~lt~script~gt~
    $(".resizable").resizable({ grid:50 });
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Эффект «призрака»~lt~/tit~gt~
~lt~coment~gt~Для включения этого эффекта необходимо установить свойству ghost значение true.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~style~gt~
    body{font:9pt Arial,sans-serif;}
    .resizable{width:200px; height:100px; padding:0.5em; border:1px solid #ddd; background-color:#eee}
    .resizable h3{padding:3px; text-align:center; margin:0; background-color:#e1cb70; color:#444}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~div class="resizable"~gt~
    ~lt~h3~gt~Растягиваемый элемент~lt~/h3~gt~
  ~lt~/div~gt~
  ~lt~script~gt~
    $(".resizable").resizable({ ghost:true });
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Синхронизация изменений~lt~/tit~gt~
~lt~coment~gt~Свойство alsoResize позволяет автоматически изменять размер указанного элемента, при растягивании текущего.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~style~gt~
    body{font:9pt Arial,sans-serif;}
    .resizable{width:200px; height:100px; padding:0.5em; border:1px solid #ddd; background-color:#eee}
    .resizable h3{padding:3px; text-align:center; margin:0; background-color:#e1cb70; color:#444}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~div id="el1" class="resizable"~gt~
    ~lt~h3~gt~Растягиваемый элемент~lt~/h3~gt~
  ~lt~/div~gt~
  ~lt~br /~gt~
  ~lt~div id="el2" class="resizable"~gt~
    ~lt~h3~gt~Синхронизируемый элемент~lt~/h3~gt~
  ~lt~/div~gt~
  ~lt~script~gt~
    $("#el1").resizable({ alsoResize:"#el2" });
    $("#el2").resizable();
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Вспомогательный элемент~lt~/tit~gt~
~lt~coment~gt~Задав свойству helper строку с именем класса приведет к тому, что в процессе растягивания будет участвовать не сам элемент, а вспомогательный, который создастся автоматически. Этому элементу будет присвоен класс который был задан в свойстве helper.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~style~gt~
    body{font:9pt Arial,sans-serif;}
    .resizable{width:200px; height:100px; padding:0.5em; border:1px solid #ddd; background-color:#eee}
    .resizable h3{padding:3px; text-align:center; margin:0; background-color:#e1cb70; color:#444}
    .ui-resizable-helper{border:2px dotted #00F;}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~div id="el1" class="resizable"~gt~
    ~lt~h3~gt~Растягиваемый элемент~lt~/h3~gt~
  ~lt~/div~gt~
  ~lt~script~gt~
    $("#el1").resizable({ helper:"ui-resizable-helper" });
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Анимация~lt~/tit~gt~
~lt~coment~gt~Для подобной анимации необходимо работать со свойством animate. Кроме этого, для достижения этого эффекта необходимо настроить отображение вспомогательного элемента с классом ui-resizable-helper (создается автоматически при растягивании).~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~style~gt~
    body{font:9pt Arial,sans-serif;}
    .resizable{width:200px; height:100px; padding:0.5em; border:1px solid #ddd; background-color:#eee}
    .resizable h3{padding:3px; text-align:center; margin:0; background-color:#e1cb70; color:#444}
    .ui-resizable-helper{border:1px dotted gray;}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~div id="el1" class="resizable"~gt~
    ~lt~h3~gt~Растягиваемый элемент~lt~/h3~gt~
  ~lt~/div~gt~
  ~lt~script~gt~
    $("#el1").resizable({ animate:true });
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Textarea~lt~/tit~gt~
~lt~coment~gt~При работе с textarea, элементы за которые ее можно растягивать оказываются снаружи. Для устранения этого эффекта необходимо вручную настраивать css растягивающих элементов.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~style~gt~
    .ui-resizable-se{ bottom:14px; right:2px }
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~textarea id="resizable" rows="5" cols="20"~gt~~lt~/textarea~gt~
  ~lt~script~gt~
    $("#resizable").resizable({ handles:"se" });
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

Описание

Свойства

Методы

События

Оформление

Плагин 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:селектор,jQuery,element,false(false)

В этом параметре можно указать элементы, размер которых будет автоматически изменяться вслед растягиванием текущего элемента.

// ------- Работа со свойством 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:селектор,string,element,false(false)

Параметр 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. Для специфичных манипуляций с растягиваемыми элементами, можно воспользоваться информацией о присваиваемых им классах:

// если применить плагин Resizable к элементу с id=resizable
~lt~div id="resizable"~gt~~lt~/div~gt~

// то он будет преобразован следующим образом:
~lt~div id="resizable" class="ui-resizable"~gt~
   ~lt~div style="-moz-user-select: none;" unselectable="on" class="ui-resizable-handle ui-resizable-e"~gt~~lt~/div~gt~
   ~lt~div style="-moz-user-select: none;" unselectable="on" class="ui-resizable-handle ui-resizable-s"~gt~~lt~/div~gt~
   ~lt~div unselectable="on" style="z-index: 1001; -moz-user-select: none;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"~gt~~lt~/div~gt~
~lt~/div~gt~

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

Resizable

Функции по категориям

Навигация