JqueryUI - Redimensionnable

jQueryUI fournit la méthode resizable () pour redimensionner n'importe quel élément DOM. Cette méthode simplifie le redimensionnement de l'élément qui prend autrement du temps et beaucoup de codage en HTML. La méthode resizable () affiche une icône en bas à droite de l'élément à redimensionner.

Syntaxe

le resizable() La méthode peut être utilisée sous deux formes -

  • $ (selector, context) .resizable (options), méthode

  • $ (selector, context) .resizable ("action", params) Méthode

$ (selector, context) .resizable (options), méthode

La méthode resizable (options) déclare qu'un élément HTML peut être redimensionné. Le paramètre options est un objet qui spécifie le comportement des éléments impliqués lors du redimensionnement.

Syntaxe

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

Vous pouvez fournir une ou plusieurs options à la fois en utilisant un objet Javascript. S'il y a plus d'une option à fournir, vous les séparerez en utilisant une virgule comme suit -

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

Le tableau suivant répertorie les différentes options pouvant être utilisées avec cette méthode -

Sr.No. Option et description
1 aussiRedimensionner

Cette option est de type Selector , jQuery ou n'importe quel élément DOM . Il représente des éléments qui se redimensionnent également lors du redimensionnement de l'objet d'origine. Par défaut, sa valeur estfalse.

Option - alsoResize

Cette option peut être de type Selector , jQuery ou n'importe quel élément DOM . Il représente des éléments qui se redimensionnent également lors du redimensionnement de l'objet d'origine. Par défaut, sa valeur estfalse.

Cela peut être de type -

  • Selector - Ce type indique les éléments DOM à sélectionner dans un document DOM pour le redimensionnement.

  • jQuery- Une fonction de rappel sera appelée pour chaque élément redimensionnable sur la page. Cette fonction doit renvoyer true si l'élément est redimensionné.

  • Element - Un élément du modèle d'objet de document (DOM).

Syntax

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

Cette option lorsqu'elle est définie sur trueest utilisé pour activer un effet visuel lors du redimensionnement lorsque le bouton de la souris est relâché. La valeur par défaut estfalse (aucun effet).

Option - animate

Cette option lorsqu'elle est définie sur trueest utilisé pour activer un effet visuel lors du redimensionnement lorsque le bouton de la souris est relâché. La valeur par défaut estfalse (aucun effet).

Syntax

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

Cette option est utilisée pour définir la durée (en millisecondes) de l'effet de redimensionnement. Cette option n'est utilisée que lorsqueanimatel'option est vraie . Par défaut, sa valeur est"slow".

Option - animateDuration

Cette option est utilisée pour définir la durée (en millisecondes) de l'effet de redimensionnement. Cette option n'est utilisée que lorsqueanimatel'option est vraie . Par défaut, sa valeur est"slow".

Cela peut être de type -

  • Number - Ceci spécifie la durée en millisecondes

  • String - Ceci sépare la durée nommée, telle que «lente» ou «rapide».

Syntax

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

Cette option permet de spécifier l’ accélération à appliquer lors de l’utilisation deanimateoption. Par défaut, sa valeur est"swing".

Option - animateEasing

Cette option permet de spécifier l’ accélération à appliquer lors de l’utilisation deanimateoption. Par défaut, sa valeur est"swing".

Les fonctions d'accélération spécifient la vitesse à laquelle une animation progresse à différents points de l'animation.

Syntax

$( ".selector" ).resizable({ animateEasing: "easeOutBounce" });
5 ratio d'aspect

Cette option est utilisée pour indiquer s'il faut conserver le rapport d'aspect (hauteur et largeur) de l'élément. Par défaut, sa valeur estfalse.

Option - aspectRatio

Cette option est utilisée pour indiquer s'il faut conserver le rapport d'aspect (hauteur et largeur) de l'élément. Par défaut, sa valeur estfalse.

Cela peut être de type -

  • Boolean- Cette valeur si définie sur true , l'élément conservera son rapport hauteur / largeur d'origine.

  • Number - Ceci spécifie l'élément pour conserver un rapport hauteur / largeur spécifique pendant le redimensionnement.

Syntax

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

Cette option est utilisée pour masquer l'icône ou les poignées d'agrandissement, sauf lorsque la souris survole l'élément. Par défaut, sa valeur estfalse.

Option - autoHide

Cette option est utilisée pour masquer l'icône ou les poignées d'agrandissement, sauf lorsque la souris survole l'élément. Par défaut, sa valeur estfalse.

Syntax

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

Cette option est utilisée pour empêcher le redimensionnement des éléments spécifiés. Par défaut, sa valeur estinput,textarea,button,select,option.

Option - cancel

Cette option est utilisée pour empêcher le redimensionnement des éléments spécifiés. Par défaut, sa valeur estinput,textarea,button,select,option.

Syntax

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

Cette option est utilisée pour restreindre le redimensionnement des éléments dans un élément ou une région spécifié. Par défaut, sa valeur estfalse.

Option - containment

Cette option est utilisée pour restreindre le redimensionnement des éléments dans un élément ou une région spécifié. Par défaut, sa valeur estfalse.

Cela peut être de type -

  • Selector - Ce type indique que l'élément redimensionnable sera contenu uniquement dans le premier élément de la liste trouvée par le sélecteur.

  • Element- Ce type indique n'importe quel élément DOM. L'élément redimensionnable sera contenu dans la boîte englobante de cet élément.

  • String- Les valeurs possibles pour ce type sont - parent et document .

Syntax

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

Cette option est utilisée pour définir la tolérance ou le délai en millisecondes. Le redimensionnement ou le déplacement commencera par la suite. Par défaut, sa valeur est0.

Option - delay

Cette option est utilisée pour définir la tolérance ou le délai en millisecondes. Le redimensionnement ou le déplacement commencera par la suite. Par défaut, sa valeur est0.

Syntax

$( ".selector" ).resizable({ delay: 150 });
dix désactivée

Cette option désactive le mécanisme de redimensionnement lorsqu'elle est définie sur true . La souris ne redimensionne plus les éléments, jusqu'à ce que le mécanisme soit activé, en utilisant le redimensionnable ("enable"). Par défaut, sa valeur estfalse.

Option - disabled

Cette option désactive le mécanisme de redimensionnement lorsqu'elle est définie sur true . La souris ne redimensionne plus les éléments, jusqu'à ce que le mécanisme soit activé, en utilisant le redimensionnable ("enable"). Par défaut, sa valeur estfalse.

Syntax

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

Avec cette option, le redimensionnement ne démarre que lorsque la souris se déplace d'une distance (pixels). Par défaut, sa valeur est1 pixel. Cela peut aider à éviter un redimensionnement involontaire lorsque vous cliquez sur un élément.

Option - distance

Avec cette option, le redimensionnement ne démarre que lorsque la souris se déplace d'une distance (pixels). Par défaut, sa valeur est1 pixel. Cela peut aider à éviter un redimensionnement involontaire lorsque vous cliquez sur un élément.

Syntax

$( ".selector" ).resizable({ distance: 30 });
12 fantôme

Cette option, lorsqu'elle est définie sur true , un élément d'assistance semi-transparent s'affiche pour le redimensionnement. Cet élément fantôme sera supprimé lorsque la souris sera relâchée. Par défaut, sa valeur estfalse.

Option - ghost

Cette option, lorsqu'elle est définie sur true , un élément d'assistance semi-transparent s'affiche pour le redimensionnement. Cet élément fantôme sera supprimé lorsque la souris sera relâchée. Par défaut, sa valeur estfalse.

Syntax

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

Cette option est de type Array [x, y], indiquant le nombre de pixels que l'élément agrandit horizontalement et verticalement lors du mouvement de la souris. Par défaut, sa valeur estfalse.

Option - grid

Cette option est de type Array [x, y], indiquant le nombre de pixels que l'élément agrandit horizontalement et verticalement lors du mouvement de la souris. Par défaut, sa valeur estfalse.

Syntax

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

Cette option est une chaîne de caractères indiquant quels côtés ou angles de l'élément peuvent être redimensionnés. Par défaut, ses valeurs sonte, s, se.

Option - handles

Cette option est une chaîne de caractères indiquant quels côtés ou angles de l'élément peuvent être redimensionnés. Les valeurs possibles sont: n, e, s et w pour les quatre côtés, et ne, se, nw et sw pour les quatre coins. Les lettres n, e, s et w représentent les quatre points cardinaux (Nord, Sud, Est et Ouest).

Par défaut, ses valeurs sont e, s, se.

Syntax

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

Cette option est utilisée pour ajouter une classe CSS pour styliser l'élément à redimensionner. Lorsque l'élément est redimensionné, un nouvel élément <div> est créé, qui est celui qui est mis à l'échelle (classe ui-resizable-helper). Une fois le redimensionnement terminé, l'élément d'origine est dimensionné et l'élément <div> disparaît. Par défaut, sa valeur estfalse.

Option - helper

Cette option est utilisée pour ajouter une classe CSS pour styliser l'élément à redimensionner. Lorsque l'élément est redimensionné, un nouvel élément <div> est créé, qui est celui qui est mis à l'échelle (classe ui-resizable-helper). Une fois le redimensionnement terminé, l'élément d'origine est dimensionné et l'élément <div> disparaît. Par défaut, sa valeur estfalse.

Syntax

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

Cette option est utilisée pour définir la hauteur maximale à laquelle le redimensionnable doit être autorisé à redimensionner. Par défaut, sa valeur estnull.

Option - maxHeight

Cette option est utilisée pour définir la hauteur maximale à laquelle le redimensionnable doit être autorisé à redimensionner. Par défaut, sa valeur estnull.

Syntax

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

Cette option est utilisée pour définir la largeur maximale à laquelle le redimensionnable doit être autorisé à redimensionner. Par défaut, sa valeur estnull.

Option - maxWidth

Cette option est utilisée pour définir la largeur maximale à laquelle le redimensionnable doit être autorisé à redimensionner. Par défaut, sa valeur estnull.

Syntax

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

Cette option est utilisée pour définir la hauteur minimale à laquelle le redimensionnable doit être autorisé à redimensionner. Par défaut, sa valeur est10.

Option - minHeight

Cette option est utilisée pour définir la hauteur minimale à laquelle le redimensionnable doit être autorisé à redimensionner. Par défaut, sa valeur est10.

Syntax

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

Cette option est utilisée pour définir la largeur minimale à laquelle le redimensionnable doit être autorisé à redimensionner. Par défaut, sa valeur est10.

Option - minWidth

Cette option est utilisée pour définir la largeur minimale à laquelle le redimensionnable doit être autorisé à redimensionner. Par défaut, sa valeur est10.

Cela peut être de type -

Syntax

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

La section suivante vous montrera quelques exemples fonctionnels de la fonctionnalité de redimensionnement.

Fonctionnalité par défaut

L'exemple suivant montre un exemple simple de fonctionnalité redimensionnable, en ne passant aucun paramètre au resizable() méthode.

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

Sauvegardons le code ci-dessus dans un fichier HTML resizeexample.htmet ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devriez voir la sortie suivante. Maintenant, vous pouvez jouer avec le résultat -

Faites glisser la bordure carrée pour redimensionner.

Utilisation d'animation et de fantôme

L'exemple suivant illustre l'utilisation de deux options animate et ghost dans la fonction de redimensionnement de 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>

Sauvegardons le code ci-dessus dans un fichier HTML resizeexample.htmet ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante. Maintenant, vous pouvez jouer avec le résultat -

Faites glisser la bordure carrée pour redimensionner et voir l'effet des options d'animation et fantôme.

Utilisation de confinement, minHeight et minWidth

L'exemple suivant illustre l'utilisation de trois options containment, minHeight et minWidth dans la fonction de redimensionnement de 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>

Sauvegardons le code ci-dessus dans un fichier HTML resizeexample.htmet ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devriez voir la sortie suivante. Maintenant, vous pouvez jouer avec le résultat -

Faites glisser la bordure carrée pour redimensionner, vous ne pouvez pas redimensionner au-delà du conteneur principal.

Utilisation du délai, de la distance et du masquage automatique

L'exemple suivant illustre l'utilisation de trois options delay, distance et autoHide dans la fonction de redimensionnement de 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>

Sauvegardons le code ci-dessus dans un fichier HTML resizeexample.htmet ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devriez voir la sortie suivante. Maintenant, vous pouvez jouer avec le résultat -

Faites glisser la bordure carrée pour redimensionner et vous pouvez remarquer que -

  • La première boîte carrée se redimensionne après un délai de 1000 ms,

  • La deuxième boîte carrée commence à se redimensionner après le déplacement de la souris de 40 pixels.

  • Passez la souris sur la troisième case carrée et l'icône de grossissement apparaît.

Utilisation de alsoResize

L'exemple suivant montre l'utilisation de l'option alsoResize dans la fonction de redimensionnement de 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>

Sauvegardons le code ci-dessus dans un fichier HTML resizeexample.htmet ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devriez voir la sortie suivante. Maintenant, vous pouvez jouer avec le résultat -

Faites glisser la bordure carrée pour redimensionner et vous pouvez remarquer que la deuxième boîte carrée se redimensionne également avec la première boîte carrée.

Utilisation d'AspectRatio, Grid

L'exemple suivant montre l'utilisation de l'option aspectRatio et grid dans la fonction de redimensionnement de 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>

Sauvegardons le code ci-dessus dans un fichier HTML resizeexample.htmet ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devriez voir la sortie suivante. Maintenant, vous pouvez jouer avec le résultat -

Faites glisser la bordure carrée pour redimensionner, la première boîte carrée se redimensionne avec le rapport hauteur / largeur de 10/3 et la seconde redimensionne avec la grille de [50,20].

$ (selector, context) .resizable ("action", params) Méthode

La méthode redimensionnable ("action", params) peut effectuer une action sur des éléments redimensionnables, comme autoriser ou empêcher la fonctionnalité de redimensionnement. L'action est spécifiée sous forme de chaîne dans le premier argument (par exemple, "désactiver" pour empêcher le redimensionnement). Découvrez les actions qui peuvent être passées, dans le tableau suivant.

Syntaxe

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

Le tableau suivant répertorie les différentes actions pouvant être utilisées avec cette méthode -

Sr.No. Action et description
1 détruire

Cette action détruit complètement la fonctionnalité redimensionnable d'un élément. Cela ramènera l'élément à son état pré-init.

Action - destroy

Cette action détruit complètement la fonctionnalité redimensionnable d'un élément. Cela ramènera l'élément à son état pré-init. Cette méthode n'accepte aucun argument.

Syntax

$( ".selector" ).resizable("destroy");
2 désactiver

Cette action désactive la fonctionnalité de redimensionnement d'un élément. Cette méthode n'accepte aucun argument.

Action - disable

Cette action désactive la fonctionnalité de redimensionnement d'un élément. Cette méthode n'accepte aucun argument.

Syntax

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

Cette action active la fonctionnalité de redimensionnement d'un élément. Cette méthode n'accepte aucun argument.

Action - enable

Cette action active la fonctionnalité de redimensionnement d'un élément. Cette méthode n'accepte aucun argument.

Syntax

$( ".selector" ).resizable("enable");
4 option (optionName)

Cette action récupère la valeur du nom d' option spécifié . Cette option correspond à l'une de celles utilisées avec redimensionnable (options).

Action - option( optionName )

Cette action récupère la valeur du nom d' option spécifié . Cette option correspond à l'une de celles utilisées avec redimensionnable (options).

Syntax

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

Obtient un objet contenant des paires clé / valeur représentant le hachage d'options redimensionnables actuel. Cela n'accepte aucun argument.

Action - option()

Obtient un objet contenant des paires clé / valeur représentant le hachage d'options redimensionnables actuel. Cela n'accepte aucun argument.

Syntax

var options = $( ".selector" ).resizable( "option" );
6 option (optionName, valeur)

Cette action définit la valeur de l'option redimensionnable avec spécifié optionName . Cette option correspond à l'une de celles utilisées avec redimensionnable (options).

Action - option( optionName, value )

Cette action définit la valeur de l'option redimensionnable avec spécifié optionName . Cette option correspond à l'une de celles utilisées avec redimensionnable (options).

Syntax

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

Cette action définit une ou plusieurs options pour le redimensionnable.

Action - option( options )

Cette action définit une ou plusieurs options pour le redimensionnable.

Syntax

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

Cette action renvoie un objet jQuery contenant l'élément redimensionnable. Cette méthode n'accepte aucun argument.

Action - widget()

Cette action renvoie un objet jQuery contenant l'élément redimensionnable. Cette méthode n'accepte aucun argument.

Syntax

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

Exemple

Voyons maintenant un exemple utilisant les actions du tableau ci-dessus. L'exemple suivant illustre l'utilisation des méthodes destroy () et 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>

Sauvegardons le code ci-dessus dans un fichier HTML resizeexample.htm et ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devriez voir la sortie suivante -

Vous ne pouvez pas redimensionner la première boîte carrée car elle est désactivée et la deuxième boîte carrée est détruite.

Gestion d'événements sur des éléments redimensionnables

En plus de la méthode redimensionnable (options) que nous avons vue dans les sections précédentes, JqueryUI fournit des méthodes d'événement qui sont déclenchées pour un événement particulier. Ces méthodes d'événement sont répertoriées ci-dessous -

Sr.No. Méthode d'événement et description
1 create (événement, interface utilisateur)

Cet événement est déclenché lors de la création de l'élément redimensionnable.

Event - create(event, ui)

Cet événement est déclenché lors de la création de l'élément redimensionnable. Où event est de type Event et ui est de type Object .

Syntax

$( ".selector" ).resizable({
create: function( event, ui ) {}
});
2 redimensionner (événement, interface utilisateur)

Cet événement est déclenché lorsque le gestionnaire de l'élément redimensionnable est déplacé.

Event - resize(event, ui)

Cet événement est déclenché lorsque le gestionnaire de l'élément redimensionnable est déplacé. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont -

  • element - Un objet jQuery représentant l'élément redimensionnable.

  • helper - Un objet jQuery représentant l'assistant en cours de redimensionnement.

  • originalElement - L'objet jQuery représentant l'élément d'origine avant qu'il ne soit encapsulé.

  • originalPosition - La position représentée par {gauche, haut} avant que le redimensionnable ne soit redimensionné.

  • originalSize - La taille représentée par {largeur, hauteur} avant que le redimensionnable ne soit redimensionné.

  • position - La position actuelle représentée par {gauche, haut}.

  • size - La taille actuelle représentée par {largeur, hauteur}.

Syntax

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

Cet événement est déclenché au début d'une opération de redimensionnement.

Event - start(event, ui)

Cet événement est déclenché au début d'une opération de redimensionnement. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont -

  • element - Un objet jQuery représentant l'élément redimensionnable.

  • helper - Un objet jQuery représentant l'assistant en cours de redimensionnement.

  • originalElement - L'objet jQuery représentant l'élément d'origine avant qu'il ne soit encapsulé.

  • originalPosition - La position représentée par {gauche, haut} avant que le redimensionnable ne soit redimensionné.

  • originalSize - La taille représentée par {largeur, hauteur} avant que le redimensionnable ne soit redimensionné.

  • position - La position actuelle représentée par {gauche, haut}.

  • size - La taille actuelle représentée par {largeur, hauteur}.

Syntax

$( ".selector" ).resizable({
 start: function( event, ui ) {}
});
4 stop (événement, interface utilisateur)

Cet événement est déclenché à la fin d'une opération de redimensionnement.

Event - stop(event, ui)

Cet événement est déclenché à la fin d'une opération de redimensionnement. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont -

  • element - Un objet jQuery représentant l'élément redimensionnable.

  • helper - Un objet jQuery représentant l'assistant en cours de redimensionnement.

  • originalElement - L'objet jQuery représentant l'élément d'origine avant qu'il ne soit encapsulé.

  • originalPosition - La position représentée par {gauche, haut} avant que le redimensionnable ne soit redimensionné.

  • originalSize - La taille représentée par {largeur, hauteur} avant que le redimensionnable ne soit redimensionné.

  • position - La position actuelle représentée par {gauche, haut}.

  • size - La taille actuelle représentée par {largeur, hauteur}.

Syntax

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

Exemple

L'exemple suivant illustre l'utilisation de la méthode d'événement pendant la fonctionnalité de redimensionnement. Cet exemple illustre l'utilisation des événements de création et de redimensionnement .

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

Sauvegardons le code ci-dessus dans un fichier HTML resizeexample.htm et ouvrez-le dans un navigateur standard qui prend en charge javascript, devrait voir la sortie suivante -

Faites glisser la boîte carrée et vous verrez la sortie s'afficher lors de l'événement de redimensionnement.

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