Redimensionarea elementelor în jQuery. Lucrul cu lățimea elementului. Limitarea limitelor permise pentru redimensionarea elementelor

O sarcină destul de veche de urmărire a evenimentului de redimensionare a unui element arbitrar pe o pagină. Relevant la crearea unei structuri modulare independente pentru ajustarea dimensiunii și a altor atribute CSS ale elementului dorit de pe pagină, în special blocuri cu încărcare periodică Ajax (de exemplu: știri). De obicei rezolvată prin sincronizare și sondare periodică a dimensiunii elementului. O nouă opțiune nu folosește un sondaj de sincronizare.

Truc:În interiorul elementului inserăm un cadru gol cu ​​poziția: absolut și 100% - (s) dimensiuni, dați poziția elementului: relativ; ... Și urmăriți frame.onresize:

Cod de testare:

Sub spoiler

Ținând cont de dorințe, - un cod mai detaliat:

Cod extins

Cod:

Returnează setează lățimea elementului.

• versiune adăugată: 1.0.width ()

  Se intoarce: Întreg

  Obține lățimea elementului

• versiune adăugată: 1.0.lățime (valoare)

  Un fel: Șir sau Număr

  Se intoarce: jQuery

  Un număr întreg care reprezintă numărul de pixeli sau un număr cu o unitate de șiruri.

• versiune adăugată: 1.4.1.width (funcție (index, lățime))

  funcție (index, lățime)

  Un fel: Funcție

  Se intoarce: jQuery

  O funcție care returnează lățimea pentru a o seta pe cea nouă. Obține indexul poziției elementului în set și vechea valoare a lățimii. Funcția se referă la elementul curent.

Diferența dintre .css („lățime”) și .width () este că această metodă returnează doar o valoare numerică (de exemplu, 400, nu 400px). Se recomandă utilizarea metodei .width () atunci când valoarea rezultată trebuie utilizată în calculele matematice.

Această metodă poate fi utilizată pentru a obține lățimea documentului și a ferestrei.

$ (window) .width (); $ (document) .width ();

Rețineți că metoda .width () returnează întotdeauna lățimea conținutului, indiferent de valoarea proprietății CSS de dimensiune a casetei. Începând cu jQuery 1.8, trebuie să obțineți valoarea proprietății de dimensionare a casetei, apoi să scăpați dimensiunea cutiei și căptușeala. Toate acestea dacă proprietatea box-sizing: border-box este aplicată elementului. Pentru a evita aceste calcule, utilizați .css („lățimea”).

Puteți trece fie un șir, fie un număr la metoda .width (valoare). Dacă este trecut doar un număr, atunci jQuery adaugă automat „px”. Dacă este un șir, atunci ar trebui să arate astfel: 100 px, 50% sau automat. Vă rugăm să rețineți că în browserele moderne, valorile de umplere și de margine nu sunt incluse în lățime.

Exemple:

Exemplu: Afișează diferențe în lățimea elementelor. Deoarece elementele se află într-un iframe, dimensiunile reale pot fi ușor diferite.

Obțineți lățimea paragrafului Obțineți lățimea documentului Obțineți lățimea ferestrei

Exemplu de paragraf pentru testarea lățimii

Exemplu: Setați lățimi diferite atunci când faceți clic pe elemente div.

Elemente de scalare (interacțiune redimensionabilă)

Interacțiune redimensionabilă adaugă manipulatori elementului, deplasându-l, utilizatorul poate scala elementul schimbându-i dimensiunea. Unele browsere oferă automat această capacitate pentru zonele de text, dar interacțiunea Redimensionabilă oferă o capacitate de scalare similară pentru orice element din document. Un exemplu de aplicare a acestui tip de interacțiune, care este implementat folosind metoda resizable (), este prezentat mai jos:

Executați exemplul

Acest exemplu creează două elemente div, fiecare conținând un element img și un text. În script, una dintre ele este selectată și i se aplică metoda resizable () (folosind parametrul alsoResize, care va fi descris mai târziu). Biblioteca UI jQuery adaugă un manipulator elementului selectat, care vă permite să modificați dimensiunile verticale și orizontale ale elementului, așa cum se vede în figură. În figură, elementul este prezentat cu înălțime crescută și lățime redusă:

Configurarea interacțiunii redimensionabile

Proprietățile descrise în tabelul de mai jos sunt utilizate pentru a personaliza interacțiunea Resizable. Interacțiunile redimensionabile depind de interacțiunile Draggable. Aceasta înseamnă că, pe lângă setările afișate în tabel, pot fi utilizate setări de interacțiune care pot fi glisate, inclusiv întârziere, distanță, grilă și izolare.

Proprietăți de interacțiune redimensionabile

Proprietate	Descriere
de asemenea, Redimensionați	Un selector folosit pentru a selecta elementele de redimensionat în același timp cu elementul căruia i se aplică interacțiunea Redimensionabilă. Valoarea implicită este falsă, înseamnă că nu există astfel de elemente
aspectRatio	Dacă valoarea acestei opțiuni este adevărată, atunci elementul va fi redimensionat, menținând în același timp raportul de aspect. Valoarea implicită este adevărată
ascundere automată	Dacă valoarea acestei opțiuni este adevărată, atunci mânerele devin vizibile numai atunci când indicatorul mouse-ului este deasupra elementului. Valoarea implicită este falsă
fantomă	Dacă valoarea acestei opțiuni este adevărată, atunci când elementul este redimensionat, vor fi vizibile contururile semi-transparente, reprezentând noua dimensiune a elementului. Valoarea implicită este adevărată
mânere	Determină unde vor fi amplasate mânerele. Valorile acceptate sunt prezentate mai jos
maxHeight	Determină înălțimea maximă la care un element poate fi redimensionat. Valoarea implicită este nulă, ceea ce înseamnă că nu există restricții
lățimea maximă	Determină lățimea maximă la care un element poate fi redimensionat. Valoarea implicită este nulă
minHeight
minWidth	Specifică înălțimea minimă la care un element poate fi redimensionat

Redimensionarea simultană a altor elemente

În opinia mea, opțiunea cea mai frecvent utilizată atunci când configurați interacțiuni redimensionabile este, de asemenea, Redimensionare. Cu ajutorul acestuia, puteți defini elemente suplimentare, ale căror dimensiuni se vor schimba simultan cu dimensiunile elementului la care a fost aplicată metoda resizable (). Folosesc această opțiune în principal pentru a mă asigura că elementele sunt redimensionate sincronizate cu elementele lor părinte.

Am folosit deja această caracteristică în exemplul anterior prin definirea redimensionării simultane a elementelor img și div. În primul rând, să vedem ce se întâmplă dacă opțiunea alsoResize nu este utilizată. Codul corespunzător este prezentat în exemplul de mai jos:

$ (function () ($ ("# astor"). resizable ();));

Dacă opțiunea alsoResize nu este utilizată, atunci doar elementul div este redimensionat. Dimensiunile elementelor pe care le conține rămân neschimbate. Ce se întâmplă în acest caz este prezentat în figură:

Uneori acesta este exact rezultatul pe care doriți să-l obțineți, dar personal folosesc opțiunea alsoResize în aproape toate cazurile de utilizare a interacțiunii Resizable. Ceea ce îmi place la acest parametru este că selectarea elementelor adecvate nu se limitează la conținutul elementului care este redimensionat. Orice alt element poate fi specificat folosind această opțiune, așa cum se arată în exemplul de mai jos:

$ (function () ($ ("# astor"). resizable ((alsoResize: "img, #lily"));));

În acest scenariu, selecția elementelor este extinsă pentru a include alte divs și elemente img. Astfel, atunci când un element div este redimensionat, jQuery UI va redimensiona patru elemente simultan. Rezultatul este prezentat în figură:

Limitarea limitelor permise pentru redimensionarea elementelor

Puteți limita intervalul de redimensionare a elementelor scalate utilizând opțiunile maxHeight, maxWidth, minHeight și minWidth. Valorile pentru aceste opțiuni pot fi numere reprezentând numărul de pixeli sau nule. Un exemplu de utilizare a acestor setări este prezentat mai jos.

Width () .innerWidth () .outerWidth ()

Funcțiile returnează lățimea elementului. În plus, folosind width (), puteți seta o nouă valoare pentru lățime. Există mai multe opțiuni pentru utilizarea funcțiilor:

latime ()- lățimea elementului fără a lua în considerare umplutura și grosimea chenarului.
lățime interioară ()- lățimea elementului, ținând cont de dimensiunea căptușelii.
lățime exterioară (includeMargin)- lățimea elementului, ținând cont de căptușeala internă, chenarul (chenarul-lățimea) și, dacă este necesar, căptușeala externă (marginea).

setează noua lățime la valoare, pentru toate elementele selectate

setează o nouă valoare pentru lățimea elementelor egală cu valoarea returnată de funcția definită de utilizator. Funcția este apelată separat, pentru fiecare dintre elementele selectate. Când este apelat, îi sunt transferați următorii parametri: index- poziția elementului în set, valoare- valoarea curentă a lățimii elementului.

Exemple de utilizare:

$ ("div.content"). width ()	conţinut.
$ (document) .width ()	va returna lățimea întregii pagini
$ (". conținut"). lățime (30)	setează lățimea la 30 de pixeli pentru toate elementele din clasă conţinut.
$ ("div.content"). outerWidth ()	va returna lățimea primului element div cu clasa conţinut... Valoarea înălțimii va include umplutura și grosimea chenarului
$ ("div.content"). outerWidth (adevărat)	similar cu exemplul anterior, dar valoarea lățimii va include și margini.

Observația 1: Folosirea funcției .width () este de obicei mai convenabilă decât .css („lățime”) deoarece valoarea sa returnată nu conține finalul „px”. Adică, în primul caz, primiți 30, iar în al doilea „30px”.

Observația 2: Este important să rețineți că folosind metoda .width (nume) veți obține doar valorile atributelor primului element selectat. Dacă aveți nevoie de valorile tuturor elementelor, atunci ar trebui să utilizați construcții precum .map () sau .each ().

În acțiune

Măriți lățimea tuturor elementelor din al doilea rând cu 10 pixeli.

~ lt ~! DOCTYPE html ~ gt ~ ~ lt ~ html ~ gt ~ ~ lt ~ head ~ gt ~ ~ lt ~ script src = "http://code.jquery.com/jquery-latest.js" ~ gt ~~ lt ~ / script ~ gt ~ ~ lt ~ style ~ gt ~ ul (margin: 10px;) .item (float: stânga; înălțime: 20px; margin: 1px; padding: 3px; background-color: #eee; list-style -tip: none;) ~ lt ~ / style ~ gt ~ ~ lt ~ / head ~ gt ~ ~ lt ~ body ~ gt ~ ~ lt ~ ul id = "list" ~ gt ~ ~ lt ~ li class = "item" style = "width: 60px" ~ gt ~ High ~ lt ~ / li ~ gt ~ ~ lt ~ li class = "item iioo" style = "width: 75px" ~ gt ~ Fast ~ lt ~ / li ~ gt ~ ~ lt ~ li class = "item" style = "width: 90px" ~ gt ~ Strong ~ lt ~ / li ~ gt ~ ~ lt ~ / ul ~ gt ~ ~ lt ~ br ~ gt ~ ~ lt ~ ul id = "list2" ~ gt ~ ~ lt ~ li class = "item" style = "width: 60px" ~ gt ~ Above ~ lt ~ / li ~ gt ~ ~ lt ~ li class = "item" style = "width: 75px" ~ gt ~ Mai rapid ~ lt ~ / li ~ gt ~ ~ lt ~ li class = "item" style = "width: 90px" ~ gt ~ Stronger ~ lt ~ / li ~ gt ~ ~ lt ~ / ul ~ gt ~ ~ lt ~ script ~ gt ~ $ ("# list2 .item"). width (funcție (i, val) (return val + 10;)); ~ lt ~ / script ~ gt ~ ~ lt ~ / body ~ gt ~ ~ lt ~ / html ~ gt ~