Changer la taille des éléments sur jQuery. Travailler avec la largeur de l'élément. Restriction des limites admissibles pour changer la taille des éléments

L'ancienne tâche de suivre l'événement de modifier la taille d'un élément arbitraire sur la page. En réalité, lors de la création d'une structure indépendante modulaire pour régler les tailles et les autres attributs CSS de l'élément souhaité sur une page, en particulier des blocs avec un chargement périodique AJAX (par exemple: News). Il est généralement résolu par le timing et l'enquête périodique de la taille de l'élément. Une nouvelle variante - n'utilise pas une enquête sur le temps.

Tour: À l'intérieur de l'élément Insérer un cadre vierge avec la position: absolu et 100% - (s), donner la partition: élément relatif; . Et piste de piste.EnRésize:

Code de test:

Sous spoiler

Compte tenu des souhaits, - Code plus déployé:

Code avancé

Le code:

Retourne, définit la largeur de l'élément.

• version ajoutée: 1.0 .largeur ()

  Retour: Entier

  Obtient la largeur de l'élément

• version ajoutée: 1.0 .Width (valeur)

  Un type: Chaîne ou numéro

  Retour: jQuery.

  Un entier représentant le nombre de pixels ou un nombre avec une unité de mesure sous la forme d'une chaîne.

• version ajoutée: 1.4.1 .Width (fonction (index, largeur))

  fonction (index, largeur)

  Un type: Une fonction

  Retour: jQuery.

  La fonction renvoyant la largeur pour installer un nouveau. Obtient l'index de position d'élément dans l'ensemble et la valeur de la largeur ancienne. La fonction fait référence à l'élément actuel.

La différence entre. CSS ("largeur") et.Width () au fait que cette méthode renvoie une valeur exceptionnellement numérique (par exemple, 400 et non 400px). Méthode.Width () Il est recommandé d'utiliser lorsque la valeur obtenue doit être utilisée dans des calculs mathématiques.

Cette méthode peut être utilisée pour obtenir la largeur du document et la fenêtre.

$ (Fenêtre) .Width (); $ (document) .Width ();

Notez que la méthode.Width () renvoie toujours la largeur du contenu, sans prendre en compte la valeur de la propriété CSS Box-dimensionnement. En commençant par JQuery 1.8, vous devez obtenir la valeur de la propriété de taille de la boîte, puis prenez la taille du cadre et des tirets. Tout cela dans le cas où la propriété de taille de la boîte: la propriété de bordure est appliquée à l'élément. Pour éviter ces calculs, utilisez.CSS ("largeur").

Pour transférer à la méthode.Width (valeur), vous pouvez à la fois la chaîne et le numéro. Si seulement le numéro est transmis, alors JQuery ajoute automatiquement "PX". Si une chaîne doit alors ressembler à ceci: 100px, 50% ou auto. Veuillez noter que dans les brasérants modernes, la largeur n'inclut pas les indents et les valeurs de cadre.

Exemples:

Exemple: Montrer les différences entre les valeurs de largeur des éléments. Étant donné que les éléments sont en iframe, ces tailles peuvent être légèrement différentes.

Obtenez la largeur de paragraphe. Obtenir la largeur du document. Obtenir la largeur de la fenêtre.

Échantillon paragraphe à la largeur de test

Exemple: Définissez une largeur différente lorsque vous cliquez sur les éléments div.

Éléments d'échelle (interaction redimensable)

Interaction redimensionnable Ajoute aux manipulateurs d'éléments, en déplaçant qui, l'utilisateur peut échoué à l'élément en modifiant sa taille. Certains navigateurs fournissent automatiquement une telle opportunité pour les zones de texte, mais l'interaction de la redoutable offre la possibilité d'une mise à l'échelle similaire pour tout élément du document. Un exemple d'application de ce type d'interaction implémenté à l'aide de méthode redimensable ()indiqué ci-dessous:

Exemple

Dans cet exemple, deux éléments div sont créés, chacun contenant un élément IMG et un texte. Dans le scénario, l'un d'entre eux est sélectionné et la méthode redimensionnable () est appliquée à celle-ci (à l'aide du paramètre Alsoresize, qui sera décrit ci-dessous). La bibliothèque de l'interface utilisateur JQuery ajoute un manipulateur à l'élément sélectionné, ce qui vous permet de changer la taille verticale et horizontale de l'élément, comme on peut le voir sur la figure. Sur la figure, l'élément est représenté avec une hauteur accrue et une largeur réduite:

Configuration de l'interaction redimensionnable

Pour configurer une interaction redimensionnable, les propriétés décrites dans le tableau ci-dessous sont utilisées. L'interaction redimensionnable dépend de l'interaction de dragage. Cela signifie que, en plus des paramètres donnés dans le tableau, vous pouvez utiliser les paramètres d'interaction glagibles, y compris ceux tels que retard, distance, grille et confinement.

Propriétés de l'interaction redimensionnable

Propriété	La description
alsoresize.	Le sélecteur utilisé pour sélectionner des éléments dont les dimensions doivent être modifiées simultanément avec les dimensions de l'élément sur lequel une interaction redimensionnable est appliquée. La valeur par défaut est false, cela signifie l'absence de tels éléments
ratio d'aspect.	Si la valeur de cette option est vraie, la variation de la taille de l'élément se produira avec la préservation de la proportion du rapport de format. Valeur par défaut - True
masquage automatique.	Si la valeur de cette option est vraie, les manipulateurs ne deviennent visibles que lorsque le pointeur de la souris est situé au-dessus de l'élément. Valeur par défaut - Faux
fantôme.	Si la valeur de cette option est vraie, alors lorsque vous modifiez la taille de l'élément, les contours translucides seront visibles, affichant les nouvelles dimensions de l'élément. Valeur par défaut - True
poignées.	Détermine où les manipulateurs seront situés. Les valeurs prises en charge sont données plus tard.
hauteur maximum	Détermine la hauteur maximale à laquelle vous pouvez redimensionner l'élément. La valeur par défaut est NULL, cela signifie aucune restriction
largeur maximale.	Détermine la largeur maximale à laquelle vous pouvez redimensionner l'élément. Valeur par défaut - null
mineuse
minwidth.	Détermine la hauteur minimale à laquelle vous pouvez redimensionner l'élément

Changement simultané de la taille des autres éléments

À mon avis, le plus courant lors de la configuration de l'interaction redimensionnable est l'option Alsoresize. Avec elle, vous pouvez définir des éléments supplémentaires dont les dimensions seront modifiées simultanément avec les dimensions de l'élément sur lequel la méthode redimensionnable () a été appliquée. J'utilise cette option principalement pour assurer un changement synchrone de la taille des éléments ainsi que la taille de leurs éléments parents.

Nous avons déjà utilisé cette fonctionnalité dans l'exemple précédent, en définissant le changement simultané de la taille des éléments IMG et DIV. Tout d'abord, voyons ce qui se passe si l'option Alsoresize n'est pas utilisée. Le code correspondant est donné dans l'exemple ci-dessous:

$ (Fonction () ($ ("# astor"). Redimensionnable ();));

Si l'option Alsoresize n'est pas utilisée, seules les dimensions de l'élément div sont modifiées. Les dimensions des éléments contenues y sont inchangées. Ce qui se passe est montré à la figure:

Parfois, il s'agit précisément d'un tel résultat et est nécessaire pour obtenir, mais personnellement, j'utilise l'option Alsoresize dans presque tous les cas d'application de l'application de l'application. Dans ce paramètre, j'aime bien le fait que le choix des éléments appropriés ne se limite pas au contenu dont les dimensions sont modifiées. Avec cette option, vous pouvez spécifier tout autre élément comme indiqué dans l'exemple ci-dessous:

$ (Fonction () ($ ("# astor"). Resizable ((Alsoresize: "IMG, #lily"));));)););

Dans ce scénario, la sélection des éléments est étendue pour activer les autres éléments DIV et IMG. Ainsi, lorsque vous modifiez les tailles d'un élément de Div JQuery UI changera la taille de quatre éléments à la fois. Le résultat est illustré à la figure:

Restriction des limites admissibles pour changer la taille des éléments

Vous pouvez limiter les limites de modification de la taille des éléments évolutifs en appliquant les options MaxHeight, MaxWidth, Minheight et Minwidth. Les valeurs de ces options peuvent être des chiffres exprimant le nombre de pixels ou null. Un exemple d'utilisation de ces paramètres est indiqué ci-dessous.

Largeur () .innerWidth () .outerwidth ()

Les fonctions renvoient la largeur de l'élément. De plus, en utilisant la largeur (), vous pouvez définir une nouvelle valeur de largeur. Il existe plusieurs options pour utiliser des fonctions:

largeur () - Largeur de l'élément excluant les trindages et l'épaisseur du cadre.
innerWidth () - Largeur de l'élément, en tenant compte de la taille des tirettes internes (rembourrage).
outerwidth (incluseMargin) - la largeur de l'élément, en tenant compte des trindages internes, du cadre (largeur de la bordure) et, si nécessaire, des tirettes externes (marge).

définit une nouvelle valeur de largeur égale valeurPour tous les éléments sélectionnés

définit une nouvelle valeur de la largeur des éléments égaux à la valeur que la fonction utilisateur revient. La fonction est appelée séparément, pour chacun des éléments sélectionnés. Lorsque vous appelez cela, les paramètres suivants sont transmis: indice. - position de l'élément dans l'ensemble, valeur - la valeur actuelle de la largeur de l'élément.

Exemples d'utilisation:

$ ("div.content"). Largeur ()	contenu.
$ (Document) .Width ()	renvoyer la largeur de la page
$ (". Contenu"). Largeur (30)	définit la valeur de largeur de 30 pixels sur tous les éléments avec classe contenu.
$ ("div.content"). Outerwidth ()	renvoyer la largeur du premier élément div avec la classe contenu. Les tiges internes et l'épaisseur du cadre seront incluses dans la hauteur
$ ("div.content"). Outerwidth (vrai)	semblable à l'exemple précédent, mais la valeur de largeur comprendra également des tirettes externes.

Note 1.: Utilisation de la fonction.Width () est généralement plus pratique que .CSS ("largeur"), car la valeur de retour ne contient pas la fin du "px". C'est dans le premier cas, vous obtiendrez 30 et dans le deuxième "30px".

Note 2.: Il est important de noter que l'utilisation de la méthode.Width (nom), vous recevrez les valeurs d'attribut du premier élément de toutes sélectionnées. Si vous avez besoin des valeurs de tous les éléments, vous devez utiliser la conception du type .map () ou celle-ci ().

En action

Exécutez la largeur de tous les éléments de la deuxième ligne de 10 pixels.

~ Lt ~! Doctype html ~ gt ~ ~ lt ~ html ~ gt ~ ~ lt ~ tête ~ gt ~ ~ lt ~ script src \u003d "http://code.jquerer.com/jquery-tentest.js" ~ gt ~~ lt ~ / script ~ gt ~ ~ lt ~ style ~ gt ~ gt ~ ul (marge: 10px;) .Item (flotteur: gauche; hauteur: 20px; marge: 1px; Colding: #ee; style de liste -Type: aucun;) ~ lt ~ / style ~ gt ~ ~ lt ~ / tête ~ gt ~ lt ~ corps ~ gt ~ ~ lt ~ ul ID \u003d "Liste" ~ GT ~ ~ lt ~ Li Class \u003d "Article" Style \u003d "largeur: 60px" ~ gt ~ hauts ~ lt ~ / li ~ gt ~ ~ lt ~ li ~ gt ~ ~ lt ~ li class \u003d "item iope" style \u003d "largeur: 75px" ~ gt ~ rapide ~ lt ~ / li ~ gt ~ ~ lt ~ Li Class \u003d "Item" style \u003d "largeur: 90px" ~ gt ~ forte ~ lt ~ / li ~ gt ~ ~ lt ~ / ul ~ gt ~ ~ lt ~ br ~ gt ~ ~ lt ~ ul id \u003d "list2" ~ Gt ~ ~ lt ~ li classe \u003d "Item" style \u003d "largeur: 60px" ~ gt ~ ci-dessus ~ lt ~ / li ~ gt ~ ~ lt ~ li ~ ~ ~ lt ~ li class \u003d "item" style \u003d "largeur: 75px" ~ gt ~ plus vite ~ Lt ~ / li ~ gt ~ ~ lt ~ li class \u003d "Item" style \u003d "largeur: 90px" ~ gt ~ plus fort ~ lt ~ / li ~ gt ~ ~ lt ~ / ul ~ gt ~ ~ lt ~ script ~ gt ~ $ ("# list2 .item"). Largeur (retour Val + 10;)); ~ lt ~ / script ~ gt ~ ~ lt ~ / corps ~ gt ~ ~ lt ~ / html ~ gt ~