Руководство jQuery - resizable(options)

Опубликовано admin - вт, 05/01/2018 - 23:02

[Function] resizable(options)

Плагин позволяет создать элемент, изменяющийся в размерах.

Сигнатура

resizable(options) → jQuery

Описание

Плагин jQuery UI Resizable делает подходящие элементы способными к изменению в размерах (вы можете изменять размеры элемента вручную, с помощью элементов перетаскивания). Вы можете указать один или несколько элементов перетаскивания таких как min, max width и height.
Все функции (start,stop,resize) получают два аргумента: Исходное событие браузера и преобразованный ui объект. ui объект содержит следующие поля:

Пример
Весь код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://test-drupal.ru/themes/slyweb/css/jquery-ui-1.7.2.custom.css" 
rel="stylesheet" type="text/css"/>
<script src="http://test-drupal.ru/themes/slyweb/js/jquery-1.3.2.min.js"></script>
<script src="http://test-drupal.ru/themes/slyweb/js/jquery-ui-1.7.2.custom.min.js"></script>  
<script>
  $(document).ready(function(){

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

  });
</script>

</head>
<body class="iframe">


<div class="demo">
	
<div id="resizable" class="ui-widget-content">
	<h3 class="ui-widget-header">Resizable</h3>
</div>

</div><!-- End demo -->

<div style="display: none;" class="demo-description">

<p>Enable any DOM element to be resizable. 
With the cursor grab the right or bottom 
border and drag to the desired width or height.</p>

</div><!-- End demo-description -->


</body>
</html>


<style>

#resizable { width: 100px; height: 100px; padding: 0.5em; }
	#resizable h3 { text-align: center; margin: 0; }


</style>

Параметры

ui.helper

ui.originalPosition

ui.originalSize

ui.position

ui.size

Опции

Опция: alsoResize

Опция позволяет установить одновременное изменение размеров нескольких элементов.

"По умолчанию установлено"false

Инициализировать изменение размеров элемента с опцией alsoResize.

$('.selector').resizable({ alsoResize: '.other' });

Установить или полудить опцию alsoResize после запуска.

//получить опцию
var alsoResize = $('.selector').resizable('option', 'alsoResize');
//установить опцию
$('.selector').resizable('option', 'alsoResize', '.other');

Опция: animate

Опция придаёт свойство анимации, которая «движется» к окончательному размеру элемента, установленному при изменении размеров элемента.

"По умолчанию установлено"false

Инициализировать изменение размеров элементов с опцией animate.

$('.selector').resizable({ animate: true });

Установить или получить опцию animate после запуска.

//получить опцию
var animate = $('.selector').resizable('option', 'animate');
//установить опцию
$('.selector').resizable('option', 'animate', true);

Опция: animateDuration

Продолжительность анимации в миллисекундах. Другие возможные значения: 'slow', 'normal', 'fast'.

"По умолчанию установлено"slow

Инициализировать изменение размеров элементов с опцией animateDuration.

$('.selector').resizable({ animateDuration: 500 });

Установить или получить опцию animateDuration после запуска.

//получить опцию
var animateDuration = $('.selector').resizable('option', 'animateDuration');
//установить опцию
$('.selector').resizable('option', 'animateDuration', 500);

Опция: animateEasing

Установить эффект анимации.

"По умолчанию установлено"false

Инициализировать изменение размеров элементов с опцией animateEasing.

$('.selector').resizable({ animateEasing: 'swing' });

Установить или получить опцию animateEasing после запуска.

//получить опцию
var animateEasing = $('.selector').resizable('option', 'animateEasing');
//установить опцию
$('.selector').resizable('option', 'animateEasing', 'swing');

Опция: aspectRatio

Если указано true, изменение размеров элемента ограничивается согласно коэффициенту пропорциональности относительно исходного размера элемента. В другом случае коэффициент пропорциональности может быть специально указан, например 9 / 16, или 0.5.

"По умолчанию установлено"false

Инициализировать изменение размеров элементов с опцией aspectRatio.

$('.selector').resizable({ aspectRatio: .75 });

Установить или получить опцию aspectRatio после запуска.

//получить опцию
var aspectRatio = $('.selector').resizable('option', 'aspectRatio');
//установить опцию
$('.selector').resizable('option', 'aspectRatio', .75);

Опция: autoHide

Если указано true, то автоматически скрывается манипулятор, за исключением, когда указатель мыши находится над элементом.

"По умолчанию установлено"false

Инициализировать изменение размеров элементов с опцией autoHide.

$('.selector').resizable({ autoHide: true });

Установить или получить опцию autoHide. после запуска.

//получить опцию
var autoHide = $('.selector').resizable('option', 'autoHide');
//установить опцию
$('.selector').resizable('option', 'autoHide', true);

Опция: cancel

Опция препятствует изменению размеров элемента, если его название соответствует заданному селектору.

"По умолчанию установлено":input,option

Инициализировать изменение размеров элементов с опцией cancel.

$('.selector').resizable({ cancel: ':input,option' });

Установить или получить опцию cancel после запуска.

//получить опцию
var cancel = $('.selector').resizable('option', 'cancel');
//установить опцию
$('.selector').resizable('option', 'cancel', ':input,option');

Опция: containment

Данная опция сдерживает изменение размера элементов внутренними границами определенного элемента. Допустимые значения: 'parent', 'document', a DOMElement, или селектор.

"По умолчанию установлено"false

Инициализировать изменение размеров элементов с опцией containment.

$('.selector').resizable({ containment: 'parent' });

Установить или получить опцию containment после запуска.

//получить опцию
var containment = $('.selector').resizable('option', 'containment');
//установить опцию
$('.selector').resizable('option', 'containment', 'parent');

Опция: delay

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

"По умолчанию установлено"0

Инициализировать изменение размеров элементов с опцией delay.

$('.selector').resizable({ delay: 20 });

Установить или получить опцию delay после запуска.

//получить опцию
var delay = $('.selector').resizable('option', 'delay');
//установить опцию
$('.selector').resizable('option', 'delay', 20);

Опция: distance

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

"По умолчанию установлено"1

Инициализировать изменение размеров элементов с опцией distance.

$('.selector').resizable({ autoHide: true });

Установить или получить опцию distance после запуска.

//получить опцию
var distance = $('.selector').resizable('option', 'distance');
//установить опцию
$('.selector').resizable('option', 'distance', 20);

Опция: ghost

Если установлено true, то появится полупрозрачный вспомогательный элемент при изменении размеров элемента.

"По умолчанию установлено"false

Инициализировать изменение размеров элементов с опцией ghost.

$('.selector').resizable({ ghost: true });

Установить или получить опцию ghost после запуска.

//получить опцию
var ghost = $('.selector').resizable('option', 'ghost');
//установить опцию
$('.selector').resizable('option', 'ghost', true);

Опция: grid

После определенного значения x и y пикселей, определяющих расстояние изменения размера элемента, происходит щелчок при передвижении по координатной сетке. Значения массива: [x, y].

"По умолчанию установлено"false

Инициализировать изменение размеров элементов с опцией grid.

$('.selector').resizable({ grid: [50, 50] });

Установить или получить опцию grid после запуска.

//получить опцию
var grid = $('.selector').resizable('option', 'grid');
//установить опцию
$('.selector').resizable('option', 'grid', [50, 50]);

Опция: handles

Если определено как строка, то любая, последующая комбинация значений должна быть перечислена через запятую: 'n, e, s, w, ne, se, sw, nw, all'. При этом нужный манипулятор будет автоматически сгенерирован плагином. Если опредлено как объект, то поддерживаются следующие значения ключей:{ n, e, s, w, ne, se, sw, nw }. Любое определённое значение должно соответствовать jQuery селектору, элементу "ребёнку", изменяемого элемента, используемого как манипулятор. Если манипулятор не является элементом "ребёнком" изменяемого элемента, то вы можете передать DOMElement или допустимый jQquery объект напрямую.

"По умолчанию установлено"e, s, se

Инициализировать изменение размеров элементов с опцией handles.

$('.selector').resizable({handles: 'n, e, s, w'});

Установить или получить опцию handles после запуска.

//получить опцию
var handles = $('.selector').resizable('option', 'handles');
//установить опцию
$('.selector').resizable('option', 'handles', 'n, e, s, w');

Опция: helper

Опция добавляет css класс к контуру элемента, который появляется при изменении размеров элемента перетаскиванием манипулятора. После такого как изменение завершено устанавливается исходный класс элемента.

"По умолчанию установлено"false

Инициализировать изменение размеров элементов с опцией helper.

$('.selector').resizable({ helper: 'ui-state-highlight' });

Установить или получить опцию helper после запуска.

//получить опцию
var helper = $('.selector').resizable('option', 'helper');
//установить опцию
$('.selector').resizable('option', 'helper', 'ui-state-highlight');

Опция: maxHeight

Опция устанавливает максимальную высоту, на которую доступно изменение элемента.

"По умолчанию установлено"null

Инициализировать изменение размеров элементов с опцией maxHeight.

$('.selector').resizable({ maxHeight: 300 });

Установить или получить опцию maxHeight после запуска.

//получить опцию
var maxHeight = $('.selector').resizable('option', 'maxHeight');
//установить опцию
$('.selector').resizable('option', 'maxHeight', 300);

Опция: maxWidth

Опция устанавливает максимальную ширину, на которую доступно изменение элемента.

"По умолчанию установлено"false

Инициализировать изменение размеров элементов с опцией minHeight.

$('.selector').resizable({ minHeight: 150 });

Установить или получить опцию minHeight после запуска.

//получить опцию
var minHeight = $('.selector').resizable('option', 'minHeight');
//установить опцию
$('.selector').resizable('option', 'minHeight', 150);

Опция: minWidth

Опция устанавливает минимальную ширину, изменение которой не доступно.

"По умолчанию установлено"10

Инициализировать изменение размеров элементов с опцией minWidth.

$('.selector').resizable({ minWidth: 75 });

Установить или получить опцию minWidth после запуска.

//получить опцию
var minWidth = $('.selector').resizable('option', 'minWidth');
//установить опцию
$('.selector').resizable('option', 'minWidth', 75);

События

Событие: start

Данное событие запускается, когда начинается изменение размера элемента.

Установить функцию callback для обработки события start как инициализирующую опцию.

$('.selector').resizable({
   start: function(event, ui) { ... }
});

Связать событие start с типом: resizestart.

$('.selector').bind('resizestart', function(event, ui) {
  ...
});

Событие: resize

Событие запускается в течение изменения размера элемента, при перетаскивании манипулятора.

Установить функцию callback для обработки события resize как инициализирующую опцию.

$('.selector').resizable({
   resize: function(event, ui) { ... }
});

Связать событие resize посредством: resizestart.

$('.selector').bind('resize', function(event, ui) {
  ...
});

Событие: stop

Данное событие запускается в конце операции изменения элемента.

Установить функцию callback для обработки события stop как инициализирующую опцию.

$('.selector').resizable({
   stop: function(event, ui) { ... }
});

Связать событие stop посредством: resizestart.

$('.selector').bind('resizestop', function(event, ui) {
  ...
});

Методы

Метод: destroy

.resizable( 'destroy' )

Полностью удалить функциональность resizable. Это возвращает элемент в его первоначальное состояние.

Метод: disable

.resizable( 'disable' )

Отключить изменение элемента.

Метод: enable

.resizable( 'enable' )

Включить изменение элемента.

Метод: option

.resizable( 'option' , optionName , [value] )

Устанавить или получить любую опцию данного плагина. Если не указано значение, то функция получает значение опции.

Тема:

Используемая тема jQuery UI

Плагин jQuery UI Resizable использует jQuery UI CSS структуру для придания стиля, включающую цвета и фоновые текстуры. Мы рекомендуем использовать ThemeRoller инструмент для создания и загрузки тем которые легко встраиваются и поддерживаются. Если нуждается более глубокий уровень настройки, существует особый виджет классов ссылающийся на ui.draggable.css лист стилей, который может быть модифицирован. Данный класс подчеркнут жирным ниже.

Образец разметки jQuery UI CSS струтктуры классов

<div class="ui-resizable">
   <div style="-moz-user-select: none;"
   unselectable="on" class="ui-resizable-handle ui-resizable-e"></div>
   <div style="-moz-user-select: none;" 
   unselectable="on" class="ui-resizable-handle ui-resizable-s"></div>
   <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"></div>
</div>

Примечание: Данный образец разметки создан через плагин resizable, это не разметка для того чтобы изменять размер элемента. Для изменения достаточно следующей разметки <div></div>.

Примеры

Добавлено1.2

Версия jQuery 1.3.2 Документ создан 2009-02-21T00:32:39Z

Руководство по jQuery!

Плагины jQuery UI

Эффекты