JqueryUI - Größenänderbar

jQueryUI bietet die Methode resizable () zum Ändern der Größe eines DOM-Elements. Diese Methode vereinfacht die Größenänderung von Elementen, was ansonsten Zeit und viel Codierung in HTML erfordert. Die Methode resizable () zeigt unten rechts neben dem zu ändernden Element ein Symbol an.

Syntax

Das resizable() Methode kann in zwei Formen verwendet werden -

  • $ (Selektor, Kontext) .resizable (Optionen) Methode

  • $ (Selektor, Kontext) .resizable ("Aktion", Parameter) Methode

$ (Selektor, Kontext) .resizable (Optionen) Methode

Die Methode resizable (options) deklariert, dass die Größe eines HTML-Elements geändert werden kann. Der Parameter options ist ein Objekt, das das Verhalten der beteiligten Elemente beim Ändern der Größe angibt.

Syntax

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

Sie können eine oder mehrere Optionen gleichzeitig für die Verwendung des Javascript-Objekts bereitstellen. Wenn mehr als eine Option bereitgestellt werden muss, trennen Sie diese wie folgt durch ein Komma:

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

In der folgenden Tabelle sind die verschiedenen Optionen aufgeführt , die mit dieser Methode verwendet werden können:

Sr.Nr. Option & Beschreibung
1 alsoResize

Diese Option ist vom Typ Selector , jQuery oder ein beliebiges DOM- Element . Es stellt Elemente dar, deren Größe auch beim Ändern der Größe des Originalobjekts geändert wird. Standardmäßig ist der Wertfalse.

Option - alsoResize

Diese Option kann vom Typ Selector , jQuery oder ein beliebiges DOM- Element sein . Es stellt Elemente dar, deren Größe auch beim Ändern der Größe des Originalobjekts geändert wird. Standardmäßig ist der Wertfalse.

Dies kann vom Typ sein -

  • Selector - Dieser Typ gibt DOM-Elemente an, die aus einem DOM-Dokument zur Größenänderung ausgewählt werden sollen.

  • jQuery- Für jedes veränderbare Element auf der Seite wird eine Rückruffunktion aufgerufen. Diese Funktion sollte true zurückgeben, wenn die Größe des Elements geändert wird.

  • Element - Ein Element im Document Object Model (DOM).

Syntax

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

Diese Option ist aktiviert truewird verwendet, um einen visuellen Effekt während der Größenänderung zu aktivieren, wenn die Maustaste losgelassen wird. Der Standardwert istfalse (keine Wirkung).

Option - animate

Diese Option ist aktiviert truewird verwendet, um einen visuellen Effekt während der Größenänderung zu aktivieren, wenn die Maustaste losgelassen wird. Der Standardwert istfalse (keine Wirkung).

Syntax

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

Mit dieser Option wird die Dauer (in Millisekunden) des Größenänderungseffekts festgelegt. Diese Option wird nur verwendet, wennanimateOption ist wahr . Standardmäßig ist der Wert"slow".

Option - animateDuration

Mit dieser Option wird die Dauer (in Millisekunden) des Größenänderungseffekts festgelegt. Diese Option wird nur verwendet, wennanimateOption ist wahr . Standardmäßig ist der Wert"slow".

Dies kann vom Typ sein -

  • Number - Dies gibt die Dauer in Millisekunden an

  • String - Dies gibt die benannte Dauer an, z. B. "langsam" oder "schnell".

Syntax

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

Diese Option wird verwendet, um anzugeben, welche Beschleunigung bei Verwendung von angewendet werden sollanimateMöglichkeit. Standardmäßig ist der Wert"swing".

Option - animateEasing

Diese Option wird verwendet, um anzugeben, welche Beschleunigung bei Verwendung von angewendet werden sollanimateMöglichkeit. Standardmäßig ist der Wert"swing".

Beschleunigungsfunktionen geben die Geschwindigkeit an, mit der eine Animation an verschiedenen Punkten innerhalb der Animation fortschreitet.

Syntax

$( ".selector" ).resizable({ animateEasing: "easeOutBounce" });
5 Seitenverhältnis

Diese Option wird verwendet, um anzugeben, ob das Seitenverhältnis (Höhe und Breite) für das Element beibehalten werden soll. Standardmäßig ist der Wertfalse.

Option - aspectRatio

Diese Option wird verwendet, um anzugeben, ob das Seitenverhältnis (Höhe und Breite) für das Element beibehalten werden soll. Standardmäßig ist der Wertfalse.

Dies kann vom Typ sein -

  • Boolean- Wenn dieser Wert auf true gesetzt ist , behält das Element sein ursprüngliches Seitenverhältnis bei.

  • Number - Dies gibt das Element an, das während der Größenänderung ein bestimmtes Seitenverhältnis beibehalten soll.

Syntax

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

Diese Option wird verwendet, um das Vergrößerungssymbol oder die Ziehpunkte auszublenden, außer wenn sich die Maus über dem Objekt befindet. Standardmäßig ist der Wertfalse.

Option - autoHide

Diese Option wird verwendet, um das Vergrößerungssymbol oder die Ziehpunkte auszublenden, außer wenn sich die Maus über dem Objekt befindet. Standardmäßig ist der Wertfalse.

Syntax

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

Diese Option wird verwendet, um die Größenänderung für bestimmte Elemente zu verhindern. Standardmäßig ist der Wertinput,textarea,button,select,option.

Option - cancel

Diese Option wird verwendet, um die Größenänderung für bestimmte Elemente zu verhindern. Standardmäßig ist der Wertinput,textarea,button,select,option.

Syntax

$( ".selector" ).resizable({ cancel: ".cancel" });
8 Eindämmung

Diese Option beschränkt die Größenänderung von Elementen innerhalb eines bestimmten Elements oder Bereichs. Standardmäßig ist der Wertfalse.

Option - containment

Diese Option beschränkt die Größenänderung von Elementen innerhalb eines bestimmten Elements oder Bereichs. Standardmäßig ist der Wertfalse.

Dies kann vom Typ sein -

  • Selector - Dieser Typ gibt an, dass das Element mit veränderbarer Größe nur für das erste Element in der Liste enthalten ist, das vom Selektor gefunden wurde.

  • Element- Dieser Typ gibt ein beliebiges DOM-Element an. Das veränderbare Element wird im Begrenzungsrahmen dieses Elements enthalten sein.

  • String- Mögliche Werte für diesen Typ sind - Eltern und Dokument .

Syntax

$( ".selector" ).resizable({ containment: "parent" });
9 verzögern

Diese Option wird verwendet, um Toleranz oder Verzögerung in Millisekunden festzulegen. Die Größenänderung oder Verschiebung beginnt danach. Standardmäßig ist der Wert0.

Option - delay

Diese Option wird verwendet, um Toleranz oder Verzögerung in Millisekunden festzulegen. Die Größenänderung oder Verschiebung beginnt danach. Standardmäßig ist der Wert0.

Syntax

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

Diese Option deaktiviert den Größenänderungsmechanismus, wenn er auf true gesetzt ist . Die Maus ändert die Größe von Elementen nicht mehr, bis der Mechanismus mithilfe der Größenänderung ("enable") aktiviert wird. Standardmäßig ist der Wertfalse.

Option - disabled

Diese Option deaktiviert den Größenänderungsmechanismus, wenn er auf true gesetzt ist . Die Maus ändert die Größe von Elementen nicht mehr, bis der Mechanismus mithilfe der Größenänderung ("enable") aktiviert wird. Standardmäßig ist der Wertfalse.

Syntax

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

Mit dieser Option beginnt die Größenänderung nur, wenn sich die Maus um eine Strecke (Pixel) bewegt. Standardmäßig ist der Wert1 pixel. Dies kann dazu beitragen, eine unbeabsichtigte Größenänderung beim Klicken auf ein Element zu verhindern.

Option - distance

Mit dieser Option beginnt die Größenänderung nur, wenn sich die Maus um eine Strecke (Pixel) bewegt. Standardmäßig ist der Wert1 pixel. Dies kann dazu beitragen, eine unbeabsichtigte Größenänderung beim Klicken auf ein Element zu verhindern.

Syntax

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

Wenn diese Option auf true gesetzt ist , wird ein halbtransparentes Hilfselement zur Größenänderung angezeigt. Dieses Geisterelement wird gelöscht, wenn die Maus losgelassen wird. Standardmäßig ist der Wertfalse.

Option - ghost

Wenn diese Option auf true gesetzt ist , wird ein halbtransparentes Hilfselement zur Größenänderung angezeigt. Dieses Geisterelement wird gelöscht, wenn die Maus losgelassen wird. Standardmäßig ist der Wertfalse.

Syntax

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

Diese Option ist vom Typ Array [x, y] und gibt die Anzahl der Pixel an, die das Element während der Bewegung der Maus horizontal und vertikal erweitert. Standardmäßig ist der Wertfalse.

Option - grid

Diese Option ist vom Typ Array [x, y] und gibt die Anzahl der Pixel an, die das Element während der Bewegung der Maus horizontal und vertikal erweitert. Standardmäßig ist der Wertfalse.

Syntax

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

Diese Option ist eine Zeichenfolge, die angibt, welche Seiten oder Winkel des Elements in der Größe geändert werden können. Standardmäßig sind seine Wertee, s, se.

Option - handles

Diese Option ist eine Zeichenfolge, die angibt, welche Seiten oder Winkel des Elements in der Größe geändert werden können. Die möglichen Werte sind: n, e, s und w für die vier Seiten und ne, se, nw und sw für die vier Ecken. Die Buchstaben n, e, s und w repräsentieren die vier Kardinalpunkte (Nord, Süd, Ost und West).

Standardmäßig sind seine Werte e, s, se.

Syntax

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

Diese Option wird verwendet, um eine CSS-Klasse hinzuzufügen, um das zu ändernde Element zu formatieren. Wenn die Größe des Elements geändert wird, wird ein neues <div> -Element erstellt, das skaliert wird (ui-resizable-helper-Klasse). Sobald die Größenänderung abgeschlossen ist, wird die Größe des ursprünglichen Elements geändert und das <div> -Element verschwindet. Standardmäßig ist der Wertfalse.

Option - helper

Diese Option wird verwendet, um eine CSS-Klasse hinzuzufügen, um das zu ändernde Element zu formatieren. Wenn die Größe des Elements geändert wird, wird ein neues <div> -Element erstellt, das skaliert wird (ui-resizable-helper-Klasse). Sobald die Größenänderung abgeschlossen ist, wird die Größe des ursprünglichen Elements geändert und das <div> -Element verschwindet. Standardmäßig ist der Wertfalse.

Syntax

$( ".selector" ).resizable({ helper: "resizable-helper" });
16 maximale Höhe

Diese Option wird verwendet, um die maximale Höhe festzulegen, auf die die Größe geändert werden darf. Standardmäßig ist der Wertnull.

Option - maxHeight

Diese Option wird verwendet, um die maximale Höhe festzulegen, auf die die Größe geändert werden darf. Standardmäßig ist der Wertnull.

Syntax

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

Diese Option wird verwendet, um die maximale Breite festzulegen, auf die die Größe geändert werden darf. Standardmäßig ist der Wertnull.

Option - maxWidth

Diese Option wird verwendet, um die maximale Breite festzulegen, auf die die Größe geändert werden darf. Standardmäßig ist der Wertnull.

Syntax

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

Diese Option wird verwendet, um die Mindesthöhe festzulegen, auf die die Größe geändert werden soll. Standardmäßig ist der Wert10.

Option - minHeight

Diese Option wird verwendet, um die Mindesthöhe festzulegen, auf die die Größe geändert werden soll. Standardmäßig ist der Wert10.

Syntax

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

Diese Option wird verwendet, um die Mindestbreite festzulegen, auf die die Größe geändert werden soll. Standardmäßig ist der Wert10.

Option - minWidth

Diese Option wird verwendet, um die Mindestbreite festzulegen, auf die die Größe geändert werden soll. Standardmäßig ist der Wert10.

Dies kann vom Typ sein -

Syntax

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

Der folgende Abschnitt zeigt Ihnen einige Beispiele für Größenänderungsfunktionen.

Standardfunktionalität

Das folgende Beispiel zeigt ein einfaches Beispiel für eine veränderbare Funktionalität, bei der keine Parameter an die übergeben werden resizable() Methode.

<!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>

Speichern wir den obigen Code in einer HTML-Datei resizeexample.htmund öffnen Sie es in einem Standardbrowser, der Javascript unterstützt. Sie sollten die folgende Ausgabe sehen. Jetzt können Sie mit dem Ergebnis spielen -

Ziehen Sie den quadratischen Rand, um die Größe zu ändern.

Verwendung von Animation und Geist

Das folgende Beispiel zeigt die Verwendung von zwei Optionen animate und ghost in der Größenänderungsfunktion von 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>

Speichern wir den obigen Code in einer HTML-Datei resizeexample.htmund öffnen Sie es in einem Standardbrowser, der Javascript unterstützt. Sie müssen auch die folgende Ausgabe sehen. Jetzt können Sie mit dem Ergebnis spielen -

Ziehen Sie den quadratischen Rand, um die Größe zu ändern und den Effekt von Animations- und Geisteroptionen zu sehen.

Verwendung von Containment, minHeight und minWidth

Das folgende Beispiel zeigt die Verwendung von drei Optionen containment, minHeight und minWidth in der Größenänderungsfunktion von 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>

Speichern wir den obigen Code in einer HTML-Datei resizeexample.htmund öffnen Sie es in einem Standardbrowser, der Javascript unterstützt. Sie sollten die folgende Ausgabe sehen. Jetzt können Sie mit dem Ergebnis spielen -

Ziehen Sie den quadratischen Rand, um die Größe zu ändern. Sie können die Größe nicht über den Hauptcontainer hinaus ändern.

Verwendung von Verzögerung, Entfernung und AutoHide

Das folgende Beispiel zeigt die Verwendung von drei Optionen delay, distance und autoHide in der Größenänderungsfunktion von 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>

Speichern wir den obigen Code in einer HTML-Datei resizeexample.htmund öffnen Sie es in einem Standardbrowser, der Javascript unterstützt. Sie sollten die folgende Ausgabe sehen. Jetzt können Sie mit dem Ergebnis spielen -

Ziehen Sie den quadratischen Rand, um die Größe zu ändern, und Sie können feststellen, dass -

  • Die Größe des ersten quadratischen Felds wird nach einer Verzögerung von 1000 ms geändert.

  • Die Größe des zweiten quadratischen Felds wird geändert, nachdem sich die Maus um 40 Pixel bewegt hat.

  • Bewegen Sie die Maus über das dritte quadratische Feld, und das Vergrößerungssymbol wird angezeigt.

Verwendung von alsoResize

Das folgende Beispiel zeigt die Verwendung der Option alsoResize in der Größenänderungsfunktion von 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>

Speichern wir den obigen Code in einer HTML-Datei resizeexample.htmund öffnen Sie es in einem Standardbrowser, der Javascript unterstützt. Sie sollten die folgende Ausgabe sehen. Jetzt können Sie mit dem Ergebnis spielen -

Ziehen Sie den quadratischen Rand, um die Größe zu ändern, und Sie können feststellen, dass das zweite quadratische Feld auch die Größe des ersten quadratischen Felds ändert.

Verwendung von AspectRatio, Grid

Das folgende Beispiel zeigt die Verwendung der Option aspectRatio und grid in der Größenänderungsfunktion von 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>

Speichern wir den obigen Code in einer HTML-Datei resizeexample.htmund öffnen Sie es in einem Standardbrowser, der Javascript unterstützt. Sie sollten die folgende Ausgabe sehen. Jetzt können Sie mit dem Ergebnis spielen -

Ziehen Sie den quadratischen Rand, um die Größe zu ändern. Die Größe des ersten quadratischen Felds wird mit dem Seitenverhältnis 10/3 und die Größe des zweiten Felds mit einem Raster von [50,20] geändert.

$ (Selektor, Kontext) .resizable ("Aktion", Parameter) Methode

Die Methode zur Größenänderung ("Aktion", Parameter) kann eine Aktion für Größenänderungselemente ausführen, z. B. das Zulassen oder Verhindern der Größenänderungsfunktion. Die Aktion wird im ersten Argument als Zeichenfolge angegeben (z. B. "Deaktivieren", um die Größenänderung zu verhindern). Überprüfen Sie in der folgenden Tabelle die Aktionen, die übergeben werden können.

Syntax

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

In der folgenden Tabelle sind die verschiedenen Aktionen aufgeführt , die mit dieser Methode verwendet werden können:

Sr.Nr. Aktion & Beschreibung
1 zerstören

Diese Aktion zerstört die veränderbare Funktionalität eines Elements vollständig. Dadurch wird das Element in den Zustand vor der Initialisierung zurückgesetzt.

Action - destroy

Diese Aktion zerstört die veränderbare Funktion eines Elements vollständig. Dadurch wird das Element in den Zustand vor der Initialisierung zurückgesetzt. Diese Methode akzeptiert keine Argumente.

Syntax

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

Diese Aktion deaktiviert die Größenänderungsfunktion eines Elements. Diese Methode akzeptiert keine Argumente.

Action - disable

Diese Aktion deaktiviert die Größenänderungsfunktion eines Elements. Diese Methode akzeptiert keine Argumente.

Syntax

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

Diese Aktion aktiviert die Größenänderungsfunktion eines Elements. Diese Methode akzeptiert keine Argumente.

Action - enable

Diese Aktion aktiviert die Größenänderungsfunktion eines Elements. Diese Methode akzeptiert keine Argumente.

Syntax

$( ".selector" ).resizable("enable");
4 Option (Optionsname)

Diese Aktion ruft den Wert des angegebenen Optionsnamens ab . Diese Option entspricht einer Option, die mit der Größenänderung (Optionen) verwendet wird.

Action - option( optionName )

Diese Aktion ruft den Wert des angegebenen Optionsnamens ab . Diese Option entspricht einer Option, die mit der Größenänderung (Optionen) verwendet wird.

Syntax

var isDisabled = $( ".selector" ).resizable( "option", "disabled" );
5 Möglichkeit()

Ruft ein Objekt ab, das Schlüssel / Wert-Paare enthält, die den aktuellen Hash für Optionen mit veränderbarer Größe darstellen. Dies akzeptiert keine Argumente.

Action - option()

Ruft ein Objekt ab, das Schlüssel / Wert-Paare enthält, die den aktuellen Hash für Optionen mit veränderbarer Größe darstellen. Dies akzeptiert keine Argumente.

Syntax

var options = $( ".selector" ).resizable( "option" );
6 Option (Optionsname, Wert)

Diese Aktion legt den Wert der Option mit veränderbarer Größe mit dem angegebenen Optionsnamen fest . Diese Option entspricht einer Option, die mit der Größenänderung (Optionen) verwendet wird.

Action - option( optionName, value )

Diese Aktion legt den Wert der Option mit veränderbarer Größe mit dem angegebenen Optionsnamen fest . Diese Option entspricht einer Option, die mit der Größenänderung (Optionen) verwendet wird.

Syntax

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

Diese Aktion legt eine oder mehrere Optionen für die Größenänderung fest.

Action - option( options )

Diese Aktion legt eine oder mehrere Optionen für die Größenänderung fest.

Syntax

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

Diese Aktion gibt ein jQuery- Objekt zurück, das das veränderbare Element enthält. Diese Methode akzeptiert keine Argumente.

Action - widget()

Diese Aktion gibt ein jQuery- Objekt zurück, das das veränderbare Element enthält. Diese Methode akzeptiert keine Argumente.

Syntax

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

Beispiel

Lassen Sie uns nun ein Beispiel mit den Aktionen aus der obigen Tabelle sehen. Das folgende Beispiel zeigt die Verwendung der Methoden destroy () und 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>

Speichern wir den obigen Code in einer HTML-Datei resizeexample.htm und öffnen Sie es in einem Standardbrowser, der Javascript unterstützt, sollten Sie die folgende Ausgabe sehen -

Sie können die Größe des ersten quadratischen Felds nicht ändern, da es deaktiviert ist und das zweite quadratische Feld zerstört wird.

Ereignisverwaltung für veränderbare Elemente

Zusätzlich zu der in den vorherigen Abschnitten beschriebenen Methode zur Größenänderung (Optionen) bietet JqueryUI Ereignismethoden, die für ein bestimmtes Ereignis ausgelöst werden. Diese Ereignismethoden sind unten aufgeführt -

Sr.Nr. Ereignismethode & Beschreibung
1 erstellen (event, ui)

Dieses Ereignis wird ausgelöst, wenn das veränderbare Element erstellt wird.

Event - create(event, ui)

Dieses Ereignis wird ausgelöst, wenn das veränderbare Element erstellt wird. Wobei event vom Typ Event ist und ui vom Typ Object ist .

Syntax

$( ".selector" ).resizable({
create: function( event, ui ) {}
});
2 Größe ändern (Ereignis, Benutzeroberfläche)

Dieses Ereignis wird ausgelöst, wenn der Handler des veränderbaren Elements gezogen wird.

Event - resize(event, ui)

Dieses Ereignis wird ausgelöst, wenn der Handler des veränderbaren Elements gezogen wird. Wobei event vom Typ Event ist und ui vom Typ Object ist . Mögliche Werte von ui sind -

  • element - Ein jQuery-Objekt, das das veränderbare Element darstellt.

  • helper - Ein jQuery-Objekt, das den Helfer darstellt, dessen Größe geändert wird.

  • originalElement - Das jQuery-Objekt, das das ursprüngliche Element darstellt, bevor es umbrochen wird.

  • originalPosition - Die Position, die als {left, top} dargestellt wird, bevor die Größe der Größe geändert wird.

  • originalSize - Die Größe, die als {Breite, Höhe} dargestellt wird, bevor die Größe der Größe geändert wird.

  • position - Die aktuelle Position, dargestellt als {links, oben}.

  • size - Die aktuelle Größe, dargestellt als {Breite, Höhe}.

Syntax

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

Dieses Ereignis wird zu Beginn eines Größenänderungsvorgangs ausgelöst.

Event - start(event, ui)

Dieses Ereignis wird zu Beginn eines Größenänderungsvorgangs ausgelöst. Wobei event vom Typ Event ist und ui vom Typ Object ist . Mögliche Werte von ui sind -

  • element - Ein jQuery-Objekt, das das veränderbare Element darstellt.

  • helper - Ein jQuery-Objekt, das den Helfer darstellt, dessen Größe geändert wird.

  • originalElement - Das jQuery-Objekt, das das ursprüngliche Element darstellt, bevor es umbrochen wird.

  • originalPosition - Die Position, die als {left, top} dargestellt wird, bevor die Größe der Größe geändert wird.

  • originalSize - Die Größe, die als {Breite, Höhe} dargestellt wird, bevor die Größe der Größe geändert wird.

  • position - Die aktuelle Position, dargestellt als {links, oben}.

  • size - Die aktuelle Größe, dargestellt als {Breite, Höhe}.

Syntax

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

Dieses Ereignis wird am Ende eines Größenänderungsvorgangs ausgelöst.

Event - stop(event, ui)

Dieses Ereignis wird am Ende eines Größenänderungsvorgangs ausgelöst. Wobei event vom Typ Event ist und ui vom Typ Object ist . Mögliche Werte von ui sind -

  • element - Ein jQuery-Objekt, das das veränderbare Element darstellt.

  • helper - Ein jQuery-Objekt, das den Helfer darstellt, dessen Größe geändert wird.

  • originalElement - Das jQuery-Objekt, das das ursprüngliche Element darstellt, bevor es umbrochen wird.

  • originalPosition - Die Position, die als {left, top} dargestellt wird, bevor die Größe der Größe geändert wird.

  • originalSize - Die Größe, die als {Breite, Höhe} dargestellt wird, bevor die Größe der Größe geändert wird.

  • position - Die aktuelle Position, dargestellt als {links, oben}.

  • size - Die aktuelle Größe, dargestellt als {Breite, Höhe}.

Syntax

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

Beispiel

Das folgende Beispiel zeigt die Verwendung der Ereignismethode während der Größenänderungsfunktion. Dieses Beispiel zeigt die Verwendung von Ereignissen zum Erstellen und Ändern der Größe .

<!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>

Speichern wir den obigen Code in einer HTML-Datei resizeexample.htm und öffnen Sie es in einem Standardbrowser, der Javascript unterstützt, sollte die folgende Ausgabe sehen müssen -

Ziehen Sie das quadratische Feld, und die Ausgabe wird beim Größenänderungsereignis angezeigt.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved