JqueryUI — изменяемый размер

Метод $ (селектор, контекст) .resizable (опции)

Метод resizable (options) объявляет, что размер HTML-элемента можно изменить. Параметр options — это объект, который определяет поведение элементов, участвующих при изменении размера.

Синтаксис

$(selector, context).resizable (options);

Вы можете предоставить один или несколько вариантов одновременно с использованием объекта Javascript. Если нужно указать несколько параметров, разделите их запятой следующим образом:

$(selector, context).resizable({option1: value1, option2: value2..... });

В следующей таблице перечислены различные параметры, которые можно использовать с этим методом —

$( ".selector" ).resizable({ alsoResize: "#identifier" });

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

$( ".selector" ).resizable({ animateDuration: "fast" });

$( ".selector" ).resizable({ animateEasing: "easeOutBounce" });

$( ".selector" ).resizable({ aspectRatio: true });

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

$( ".selector" ).resizable({ cancel: ".cancel" });

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

$( ".selector" ).resizable({ delay: 150 });

$( ".selector" ).resizable({ disabled: true });

$( ".selector" ).resizable({ distance: 30 });

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

$( ".selector" ).resizable({ grid: [ 20, 10 ] });

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

$( ".selector" ).resizable({ helper: "resizable-helper" });

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

$( ".selector" ).resizable({ maxWidth: 300 });

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

$( ".selector" ).resizable({ minWidth: 150 });

Эта опция имеет тип Selector , jQuery или любой элемент DOM. Он представляет элементы, которые также изменяют размер при изменении размера исходного объекта. По умолчанию его значение равно false .

Опция — также изменить размер

Эта опция может иметь тип Selector , jQuery или любой элемент DOM. Он представляет элементы, которые также изменяют размер при изменении размера исходного объекта. По умолчанию его значение равно false .

Это может быть типа —

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

jQuery — функция обратного вызова будет вызываться для каждого изменяемого размера элемента на странице. Эта функция должна возвращать true, если размер элемента изменяется.

Элемент — элемент в объектной модели документа (DOM).

Синтаксис

Этот параметр, если задано значение true , используется для включения визуального эффекта при изменении размера при отпускании кнопки мыши. Значением по умолчанию является false (без эффекта).

Вариант — одушевленный

Этот параметр, если задано значение true , используется для включения визуального эффекта при изменении размера при отпускании кнопки мыши. Значением по умолчанию является false (без эффекта).

Синтаксис

Эта опция используется для установки продолжительности (в миллисекундах) эффекта изменения размера. Эта опция используется только когда опция animate имеет значение true . По умолчанию его значение «медленно» .

Опция — animateDuration

Эта опция используется для установки продолжительности (в миллисекундах) эффекта изменения размера. Эта опция используется только когда опция animate имеет значение true . По умолчанию его значение «медленно» .

Это может быть типа —

Число — указывает продолжительность в миллисекундах.

String — Это разделяет именованную длительность, такую ​​как «медленный» или «быстрый».

Синтаксис

Эта опция используется, чтобы указать, какое смягчение применить при использовании опции animate . По умолчанию его значение равно «колебанию» .

Опция — animateEasing

Эта опция используется, чтобы указать, какое смягчение применить при использовании опции animate . По умолчанию его значение равно «колебанию» .

Функции ослабления определяют скорость, с которой анимация развивается в разных точках анимации.

Синтаксис

Эта опция используется, чтобы указать, следует ли сохранить соотношение сторон (высота и ширина) для элемента. По умолчанию его значение равно false .

Вариант — aspectRatio

Эта опция используется, чтобы указать, следует ли сохранить соотношение сторон (высота и ширина) для элемента. По умолчанию его значение равно false .

Это может быть типа —

Boolean — это значение, если установлено значение true , элемент будет сохранять свое первоначальное соотношение сторон.

Число — указывает элемент для сохранения определенного соотношения сторон при изменении размера.

Синтаксис

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

Опция — автоматическое скрытие

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

Синтаксис

Эта опция используется для предотвращения изменения размеров указанных элементов. По умолчанию это значение ввода, текстовое поле, кнопка, выберите, опция .

Опция — отменить

Эта опция используется для предотвращения изменения размеров указанных элементов. По умолчанию это значение ввода, текстовое поле, кнопка, выберите, опция .

Синтаксис

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

Вариант — сдерживание

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

Это может быть типа —

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

Элемент — этот тип указывает на любой элемент DOM. Элемент изменяемого размера будет содержаться в ограничительной рамке этого элемента.

Строка — Возможные значения для этого типа — родитель и документ .

Синтаксис

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

Опция — задержка

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

Синтаксис

Эта опция отключает механизм изменения размера, если установлено значение true . Мышь больше не изменяет размеры элементов, пока механизм не включен, используя изменяемый размер («enable»). По умолчанию его значение равно false .

Опция — отключена

Эта опция отключает механизм изменения размера, если установлено значение true . Мышь больше не изменяет размеры элементов, пока механизм не включен, используя изменяемый размер («enable»). По умолчанию его значение равно false .

Синтаксис

При использовании этой опции изменение размера начинается только тогда, когда мышь перемещается на расстояние (в пикселях). По умолчанию его значение составляет 1 пиксель . Это может помочь предотвратить непреднамеренное изменение размера при нажатии на элемент.

Вариант — расстояние

При использовании этой опции изменение размера начинается только тогда, когда мышь перемещается на расстояние (в пикселях). По умолчанию его значение составляет 1 пиксель . Это может помочь предотвратить непреднамеренное изменение размера при нажатии на элемент.

Синтаксис

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

Вариант — призрак

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

Синтаксис

Этот параметр имеет тип Array [x, y], указывающий количество пикселей, которые элемент расширяет по горизонтали и вертикали во время движения мыши. По умолчанию его значение равно false .

Опция — сетка

Этот параметр имеет тип Array [x, y], указывающий количество пикселей, которые элемент расширяет по горизонтали и вертикали во время движения мыши. По умолчанию его значение равно false .

Синтаксис

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

Вариант — ручки

Этот параметр представляет собой строку символов, указывающую, какие стороны или углы элемента могут быть изменены. Возможные значения: n, e, s и w для четырех сторон и ne, se, nw и sw для четырех углов. Буквы n, e, s и w представляют четыре кардинальные точки (север, юг, восток и запад).

По умолчанию это значения e, s, se .

Синтаксис

Эта опция используется для добавления CSS-класса для стилизации элемента, который будет изменен. Когда размер элемента изменяется, создается новый элемент <div>, который масштабируется (класс ui-resizable-helper). Как только изменение размера завершено, исходный элемент имеет размер, а элемент <div> исчезает. По умолчанию его значение равно false .

Вариант — помощник

Эта опция используется для добавления CSS-класса для стилизации элемента, который будет изменен. Когда размер элемента изменяется, создается новый элемент <div>, который масштабируется (класс ui-resizable-helper). Как только изменение размера завершено, исходный элемент имеет размер, а элемент <div> исчезает. По умолчанию его значение равно false .

Синтаксис

Эта опция используется, чтобы установить максимальную высоту, размер которой можно изменить. По умолчанию его значение равно нулю .

Опция — maxHeight

Эта опция используется, чтобы установить максимальную высоту, размер которой можно изменить. По умолчанию его значение равно нулю .

Синтаксис

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

Опция — maxWidth

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

Синтаксис

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

Опция — minHeight

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

Синтаксис

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

Опция — minWidth

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

Это может быть типа —

Синтаксис

Следующий раздел покажет вам несколько примеров работы функции изменения размера.

Функциональность по умолчанию

В следующем примере демонстрируется простой пример функциональности с изменяемыми размерами, без передачи параметров методу resizable () .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable { width: 150px; height: 150px; padding: 0.5em;
            text-align: center; margin: 0; }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable" ).resizable();
         });
      </script>
   </head>

   <body>
      <!-- HTML --> 
      <div id = "resizable" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">Pull my edges to resize me!!</h3>
      </div>
  </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле resizeexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы должны увидеть следующий вывод. Теперь вы можете играть с результатом —

Перетащите квадратную границу, чтобы изменить ее размер.

Использование одушевленных и призрачных

В следующем примере демонстрируется использование двух опций animate и ghost в функции изменения размера JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable-2,#resizable-3 { 
            width: 150px; height: 150px; padding: 0.5em;
            text-align: center; margin: 0; }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-2" ).resizable({
               animate: true
            });
            $( "#resizable-3" ).resizable({
               ghost: true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "resizable-2" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">
            Pull my edges and Check the animation!!
         </h3>
      </div><br>
      <div id = "resizable-3" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">I'm ghost!!</h3>
      </div> 
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле resizeexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —

Перетащите квадратную рамку, чтобы изменить ее размер и увидеть эффект анимации и опций призрака.

Использование сдерживания, minHeight и minWidth

В следующем примере демонстрируется использование трех параметров сдерживания , minHeight и minWidth в функции изменения размера JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #container-1 { width: 300px; height: 300px; }
         #resizable-4 {background-position: top left; 
            width: 150px; height: 150px; } 
         #resizable-4, #container { padding: 0.5em; }  
      </style>

      <script>
         $(function() {
            $( "#resizable-4" ).resizable({
               containment: "#container",
               minHeight: 70,
               minWidth: 100
            });
         });
      </script>
   </head>

   <body>
      <div id = "container" class = "ui-widget-content">
         <div id = "resizable-4" class = "ui-state-active">
            <h3 class = "ui-widget-header">
               Resize contained to this container
            </h3>
         </div>
      </div> 
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле resizeexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы должны увидеть следующий вывод. Теперь вы можете играть с результатом —

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

Использование задержки, расстояния и автоматического скрытия

В следующем примере демонстрируется использование трех параметров delay , distance и autoHide в функции изменения размера JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .square {
            width: 150px;
            height: 150px;
            border: 1px solid black;
            text-align: center;
            float: left;
            margin-left: 20px;
            -right: 20px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#resizable-5" ).resizable({
               delay: 1000
            });

            $( "#resizable-6" ).resizable({
               distance: 40
            });
            $( "#resizable-7" ).resizable({
               autoHide: true
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "resizable-5" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Resize starts after delay of 1000ms
         </h3>
      </div><br>
      <div id = "resizable-6" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Resize starts at distance of 40px
         </h3>
      </div><br>
      <div id = "resizable-7" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Hover over me to see the magnification icon!
         </h3>
      </div>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле resizeexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы должны увидеть следующий вывод. Теперь вы можете играть с результатом —

Перетащите квадратную рамку, чтобы изменить размер, и вы можете заметить, что —

• Размер первого квадратного поля после задержки составляет 1000 мс,

• Второй квадрат начинает меняться после перемещения мыши на 40 пикселей.

• Наведите указатель мыши на третий квадрат, и появится значок увеличения.

Размер первого квадратного поля после задержки составляет 1000 мс,

Второй квадрат начинает меняться после перемещения мыши на 40 пикселей.

Наведите указатель мыши на третий квадрат, и появится значок увеличения.

Использование также Resize

В следующем примере демонстрируется использование параметра tooResize в функции изменения размера JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable-8,#resizable-9{ width: 150px; height: 150px; 
            padding: 0.5em;text-align: center; margin: 0; }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-8" ).resizable({
               alsoResize: "#resizable-9"
            });
            $( "#resizable-9" ).resizable();
         });
      </script>
   </head>

   <body>
      <!-- HTML --> 
      <div id = "resizable-8" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">Resize!!</h3>
      </div><br>
      <div id = "resizable-9" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">I also get resized!!</h3>
      </div> 
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле resizeexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы должны увидеть следующий вывод. Теперь вы можете играть с результатом —

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

Использование AspectRatio, Grid

В следующем примере демонстрируется использование параметра aspectRatio и grid в функции изменения размера JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .square {
            width: 150px;
            height: 150px;
            border: 1px solid black;
            text-align: center;
            float: left;
            margin-left: 20px;
            margin-right: 20px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#resizable-10" ).resizable({
               aspectRatio: 10 / 3
            });

            $( "#resizable-11" ).resizable({
               grid: [50,20]
            });

         });
      </script>
   </head>
   
   <body>
      <div id = "resizable-10" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Resize with aspectRatio of 10/3
         </h3>
      </div>
      <div id = "resizable-11" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Snap me to the grid of [50,20]
         </h3>
      </div>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле resizeexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы должны увидеть следующий вывод. Теперь вы можете играть с результатом —

Перетащите квадратную границу, чтобы изменить ее размер, первый квадрат будет изменен с соотношением сторон 10/3, а второй — с сеткой [50,20].

Метод $ (селектор, контекст) .resizable («действие», params)

Метод изменяемого размера («действие», params) может выполнять действие с элементами изменяемого размера, например, разрешать или запрещать изменение размера функциональности. Действие указывается в виде строки в первом аргументе (например, «отключить», чтобы предотвратить изменение размера). Проверьте действия, которые можно передать, в следующей таблице.

Синтаксис

$(selector, context).resizable ("action", params);;

В следующей таблице перечислены различные действия, которые можно использовать с этим методом —

 $( ".selector" ).resizable("destroy");

 $( ".selector" ).resizable("disable");

$( ".selector" ).resizable("enable");

var isDisabled = $( ".selector" ).resizable( "option", "disabled" );

 
var options = $( ".selector" ).resizable( "option" );

 
$( ".selector" ).resizable( "option", "disabled", true );

 
$( ".selector" ).resizable( "option", { disabled: true } );

 
var widget = $( ".selector" ).resizable( "widget" );

Это действие полностью уничтожает изменяемые размеры элемента. Это вернет элемент обратно в его состояние перед инициализацией.

Действие — уничтожить

Это действие полностью разрушает изменяемую размерность элемента. Это вернет элемент обратно в его состояние перед инициализацией. Этот метод не принимает никаких аргументов.

Синтаксис

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

Действие — отключить

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

Синтаксис

Это действие включает изменение размера элемента. Этот метод не принимает никаких аргументов.

Действие — включить

Это действие включает изменение размера элемента. Этот метод не принимает никаких аргументов.

Синтаксис

Это действие возвращает значение указанного optionName . Эта опция соответствует одной из тех, которые используются с изменяемым размером (опции).

Действие — опция (optionName)

Это действие возвращает значение указанного optionName . Эта опция соответствует одной из тех, которые используются с изменяемым размером (опции).

Синтаксис

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

Действие — опция ()

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

Синтаксис

Это действие устанавливает значение опции изменяемого размера с указанным optionName . Эта опция соответствует одной из тех, которые используются с изменяемым размером (опции).

Действие — опция (optionName, value)

Это действие устанавливает значение опции изменяемого размера с указанным optionName . Эта опция соответствует одной из тех, которые используются с изменяемым размером (опции).

Синтаксис

Это действие устанавливает один или несколько параметров для изменяемого размера.

Действие — опция (варианты)

Это действие устанавливает один или несколько параметров для изменяемого размера.

Синтаксис

Это действие возвращает объект jQuery, содержащий изменяемый размер элемента. Этот метод не принимает никаких аргументов.

Действие — виджет ()

Это действие возвращает объект jQuery, содержащий изменяемый размер элемента. Этот метод не принимает никаких аргументов.

Синтаксис

пример

Теперь давайте посмотрим на пример, используя действия из таблицы выше. В следующем примере демонстрируется использование методов destroy () и disable () .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable-12,#resizable-13 { width: 150px; height: 150px; 
            padding: 0.5em;text-align: center; margin: 0; }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-12" ).resizable();
            $( "#resizable-12" ).resizable('disable');
            $( "#resizable-13" ).resizable();
            $( "#resizable-13" ).resizable('destroy');	
         });
      </script>
   </head>

   <body>
      <!-- HTML --> 
      <div id = "resizable-12" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">I'm disable!!</h3>
      </div><br>
      <div id = "resizable-13" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">I'm Destroyed!!</h3>
      </div>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле resizeexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы должны увидеть следующий вывод:

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

Управление событиями на изменяемых элементах

В дополнение к методу resizable (options), который мы видели в предыдущих разделах, JqueryUI предоставляет методы событий, которые запускаются для определенного события. Эти методы событий перечислены ниже —

$( ".selector" ).resizable({
create: function( event, ui ) {}
});

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

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

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

Это событие срабатывает при создании элемента с изменяемым размером.

Событие — создать (событие, пользовательский интерфейс)

Это событие срабатывает при создании элемента с изменяемым размером. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Синтаксис

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

Событие — изменить размер (событие, пользовательский интерфейс)

Это событие срабатывает при перетаскивании обработчика изменяемого размера элемента. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта . Возможные значения пользовательского интерфейса —

element — объект jQuery, представляющий изменяемый размер элемента.

helper — объект jQuery, представляющий помощника, размер которого изменяется.

originalElement — объект jQuery, представляющий исходный элемент перед его переносом.

originalPosition — позиция, представленная как {left, top} до изменения размера.

originalSize — размер, представленный как {ширина, высота}, до изменения размера.

position — текущая позиция, представленная как {left, top}.

размер — текущий размер, представленный как {ширина, высота}.

Синтаксис

Это событие вызывается в начале операции изменения размера.

Событие — начало (событие, пользовательский интерфейс)

Это событие вызывается в начале операции изменения размера. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта . Возможные значения пользовательского интерфейса —

element — объект jQuery, представляющий изменяемый размер элемента.

helper — объект jQuery, представляющий помощника, размер которого изменяется.

originalElement — объект jQuery, представляющий исходный элемент перед его переносом.

originalPosition — позиция, представленная как {left, top} до изменения размера.

originalSize — размер, представленный как {ширина, высота}, до изменения размера.

position — текущая позиция, представленная как {left, top}.

размер — текущий размер, представленный как {ширина, высота}.

Синтаксис

Это событие вызывается в конце операции изменения размера.

Событие — остановка (событие, интерфейс)

Это событие вызывается в конце операции изменения размера. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта . Возможные значения пользовательского интерфейса —

element — объект jQuery, представляющий изменяемый размер элемента.

helper — объект jQuery, представляющий помощника, размер которого изменяется.

originalElement — объект jQuery, представляющий исходный элемент перед его переносом.

originalPosition — позиция, представленная как {left, top} до изменения размера.

originalSize — размер, представленный как {ширина, высота}, до изменения размера.

position — текущая позиция, представленная как {left, top}.

размер — текущий размер, представленный как {ширина, высота}.

Синтаксис

пример

В следующем примере демонстрируется использование метода события во время изменения размера. Этот пример демонстрирует использование событий create и resize .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable-14{ width: 150px; height: 150px; 
         padding: 0.5em;text-align: center; margin: 0; }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-14" ).resizable({
               create: function( event, ui ) {
                  $("#resizable-15").text ("I'm Created!!");
               },
               resize: function (event, ui) {
                  $("#resizable-16").text ("top = " + ui.position.top +
                     ", left = " + ui.position.left +
                     ", width = " + ui.size.width +
                     ", height = " + ui.size.height);
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "resizable-14" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">Resize !!</h3>
      </div><br>
      <span id = "resizable-15"></span><br>
      <span id = "resizable-16"></span>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле resizeexample.htm и откроем его в стандартном браузере, который поддерживает javascript, должен увидеть следующий вывод:

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