Опубликовано admin - вт, 05/01/2018 - 23:02
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


Опция: animate


Опция: animateDuration


Опция: animateEasing


Опция: aspectRatio


Опция: autoHide


Опция: cancel


Опция: containment


Опция: delay


Опция: distance


Опция: ghost


Опция: grid


Опция: handles


Опция: helper


Опция: maxHeight


Опция: maxWidth


Опция: minWidth


Событие: start

Событие: resize

Событие: stop

Метод: destroy

Метод: disable

Метод: enable

Метод: option

Используемая тема 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>.

На разработку сайта! Скидки до 20%!