Redimensionnez n’importe quel élément avec le Framework JavaScript jQuery UI

Le redimensionnement fournit une multitude de possibilités pour vos applications web.

Avec jQuery UI, le redimensionnement peut s’appliquer à la plupart des éléments HTML.

Tout est dans la formation ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Redimensionnez n’importe quel élément avec le Framework JavaScript jQuery UI

Bonjour à tous et bienvenu sur Développement Facile.

Dans ce nouveau cours consacré au plug-in jQuery UI, vous allez apprendre à utiliser la fonction de redimensionnement des éléments, dans plusieurs sites internet, vous pouvez redimensionner des éléments, que ce soit des images, des zones de texte, ou des zones complètes d’un site Internet, vous pouvez le redimensionner.

Les éléments redimensionnables

Cette fonctionnalité peut être proposée très facilement avec jQuery UI. Justement vous pouvez l’utiliser sur un div, un paragraphe, un textarea, une image, il suffit d’ajouter la méthode resizable à cet élément et ça va rajouter une icône qui indique à l’utilisateur qu’il peut redimensionner cette zone.

Les options – éléments redimensionnables

Vous avez plusieurs options, vous pouvez ajouter une animation avec animate, la durée de l’animation avec animateDuration, vous pouvez mettre des effets easing aussi, aspectRatio c’est pour obliger l’utilisateur à conserver les proportions d’une image par exemple, si il fait un redimensionnement sur une image, très important.

autoHide, cancel, containment, delay, vous avez tout un tas d’options pour personnaliser le widget pour les éléments redimensionnables.

La distance avant que le redimensionnement ne débute, ghost, grid vous pouvez, avec ghost, helper c’est une classe CSS qui va servir de guide, il y aura des pointillés, sur l’exemple j’ai mis des pointillés pour guider l’utilisateur dans le redimensionnement.

Vous avez définir le redimensionnement maximum et minimum avec les options maxHeight, maxWidth, minHeight et minWidth, largeur maximum, hauteur maximale, définie pour le redimensionnement de l’utilisateur, disable, alsoResize vous avez vraiment énormément d’options.

Les méthodes – éléments redimensionnables

Les méthodes vous les connaissez, classiques : destroy, disable, enable, option, je passe très vite sur les méthodes, vous les connaissez par cœur, les options widget.

Evénements – éléments redimensionnables

Les événements pareil, vous les connaissez, create, resize ça se déclenche sur le redimensionnement, start et stop, vous les connaissez ces événements vous les avez vu avec les widgets précédents, je passe, de toute façon c’est expliqué ici.

Les éléments redimensionnables

Le plus important c’est de passer à la pratique, on va bientôt y passer. alsoResize ça redimensionne, vous pouvez redimensionner deux éléments automatiquement en même temps, ça peut être sympa grâce à l’option alsoResize si vous redimensionnez un élément, les éléments associés à celui-ci seront redimensionnés en même temps. Je vous ai expliqué, pour limiter le redimensionnement maximum, vous pouvez utiliser les options maxHeight, maxWidth, minHeight, minWidth, et vous pouvez aider l’utilisateur à faire son redimensionnement en utilisant l’option helper sur une classe CSS correspondante, conserver avec l’option aspectRatio les proportions de votre image, par exemple très utilisé.

Et vous pouvez animer vos animations avec animate, animateDuration, animateEasing, ça permet de réaliser des animations très sympas. Pensez à personnaliser votre élément avec theme roller.

Exemple d’éléments redimensionnables

On passe tout de suite au code source, ce sera très sympa, alors les éléments redimensionnables, on a deux éléments en CSS on définit leurs tailles, la couleur de fond, voilà, des éléments redimensionnés, on a créé deux div, elles ont une taille toutes les deux, et après on en créé des resizables. On autorise le redimensionnement de l’élément un, les tailles minimum et maximum, et le guide pour aider pendant le redimensionnement.
On conserve l’aspectRatio pour l’image, et qu’est-ce que ça donne ?
Vous avez cette élément là, ça redimensionne les deux en même temps, vous avez le petit guide ici que vous voyez, les deux éléments sont redimensionnés en même temps, celui-là on peut le redimensionner tout seul à n’importe quelle taille sans aucun problème, par contre celui-là il a une taille maximum, je suis à la taille maximum, une taille minimum voilà, et celui-là il est indépendant comme je vous l’ai dit, tout simplement.
C’est amusant, là une image ou on est obligé de conserver les proportions, donc l’image aura toujours des proportions conservées et vous avez une animation qui va avec l’image, pour l’animation on regarde l’image resizable, animationDuration slow avec de type easing, ça fait un effet de rebondit sur l’image quand on arrête le redimensionnement.
Là elle est redimensionnée très grosse, c’est assez amusant le redimensionnement, vous pouvez l’implémenter dans votre site Internet, vous voyez le code source est relativement simple, vous définissez le guide pour le redimensionnement, c’est le guide, pour l’image je n’ai pas mis de, si j’ai mis un guide aussi, vous voyez l’image, l’ancienne taille, la nouvelle taille, aussi simple que ça, oui c’est vrai que j’ai mis un guide ici.

Votre plan d’actions !

Maintenant c’est à vous de jouer, c’est partit, vous pouvez poser vos questions directement sous la vidéo si il y a des choses que vous n’avez pas compris, si vous avez besoin d’un peu plus d’aide, sur Développement Facile sous la cours vidéo. Vous retrouverez en téléchargement le code source complet et commenté de cet exemple comme ça vous pourrez le réutiliser facilement dans vos applications Web, et dès maintenant je vous invite à cliquer pour voir la deuxième vidéo il y a une bannière en haut vidéo 2 en dessous aussi, dans la vidéo 2 je vous explique comment je vais vous accompagner pendant quatre mois, pour apprendre tout le potentiel à utiliser de framework jQuery, du framework Dojo, de l’extension jQuery UI, pour vraiment complètement révolutionner votre développement Web être beaucoup plus efficace, plus rapide, performant, et compatible avec la majorité des navigateurs donc cliquez sur l’image vidéo 2 juste au-dessus de cette vidéo, et je vous dis à bientôt sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple redimensionnement d’éléments

Et voici le code source pour ajouter le redimensionnement aux éléments HTML avec jQuery UI.

Posez vos questions sur ce cours

Utilisez les commentaires pour poser vos questions sur ce cours.