Vidéo: How To Create Transparent Login Form Using HTML and CSS | HTML Form 2025
La grande variété et les types d'écrans utilisés pour afficher les informations rendent nécessaire que vos commandes CSS3 permettent à l'utilisateur de redimensionner les éléments nécessaire. Dans la plupart des cas, vous pouvez simplement autoriser l'utilisateur à créer une taille de l'élément. Toutefois, il peut arriver que vous deviez surveiller la quantité de redimensionnement afin de pouvoir personnaliser le contenu pour répondre aux besoins du conteneur.
L'exemple suivant montre comment redimensionner un objet et surveiller sa taille. (Vous pouvez trouver le code complet pour cet exemple dans le dossier Chapter 06Interactions du code téléchargeable sous le nom ResizeContent.HTML.)
$ (function () {$ ("# ResizeMe"). Resizable ({minWidth: 200, minHauteur: 60, resize: function (event, ui) {$ ("# Contenu").html ("Largeur:" + ui. size. width + "
Hauteur:" + ui taille size.);}});});
Cet exemple est intéressant car il montre comment définir les propriétés et répondre aux événements. Dans ce cas, les propriétés minWidth et minHeight maintiennent l'élément à une taille minimale spécifique - l'utilisateur ne peut pas réduire l'élément.
Le code répond également à l'événement de redimensionnement. Il y a une exigence spéciale pour le redimensionnement dont vous avez besoin de savoir. Le conteneur de redimensionnement est séparé de l'élément de contenu. Voici le code HTML de cet exemple:
Paragraphe redimensionnable
Le style associé, #ResizeMe, fournit une bordure autour de, définit la hauteur et la largeur de départ et centre le contenu dans le conteneur.
Lorsque vous voulez écrire du contenu à l'écran, vous devez utiliser l'élément content, pas l'élément container. Sinon, les poignées de dimensionnement disparaîtront et l'utilisateur ne pourra pas redimensionner l'élément après la première fois. Dans ce cas, la taille actuelle du conteneur apparaît dans le cadre de l'objet ui transmis au gestionnaire d'événements resize.
Vous accédez à l'information par la taille. largeur et taille. propriétés de hauteur, comme indiqué dans le code.
