Sistem 

Elementi skaliranja. Spremljanje “onresize” na elementu Istočasno spreminjanje velikosti drugih elementov

Vrne in nastavi širino elementa.

  • dodana različica: 1.0.premer()

    Vrne: celo število

    Dobi širino elementa

  • dodana različica: 1.0.width(value)

    Vrsta: niz ali številka

    Vrne: jQuery

    Celo število, ki predstavlja število slikovnih pik, ali število z enoto niza.

  • dodana različica: 1.4.1.width(funkcija(indeks, širina))

    funkcija (indeks, širina)

    Tip: funkcija

    Vrne: jQuery

    Funkcija, ki vrne širino za nastavitev nove. Pridobi indeks položaja elementa v nizu in staro vrednost širine. Funkcija se nanaša na trenutni element.

Razlika med .css("width") in .width() je v tem, da ta metoda vrne samo številsko vrednost (na primer 400, ne 400px). Metodo.width() je priporočljivo uporabiti, kadar je treba dobljeno vrednost uporabiti v matematičnih izračunih.

To metodo lahko uporabite za določitev širine dokumenta in okna.

$(okno).width(); $(dokument).width();

Upoštevajte, da metoda .width() vedno vrne širino vsebine, ne glede na vrednost lastnosti CSS box-sizing. Od jQuery 1.8 naprej morate pridobiti vrednost lastnosti box-sizing, nato pa odšteti velikost obrobe in oblazinjenja. Vse to, če je za element uporabljena lastnost box-sizing: border-box. Da bi se izognili tem izračunom, uporabite .css("width").

Metodi .width(value) lahko posredujete niz ali številko. Če je posredovano samo število, jQuery samodejno doda »px«. Če je črta, bi morala izgledati takole: 100 slikovnih pik, 50 % ali samodejno. Upoštevajte, da v sodobnih brskalnikih širina ne vključuje vrednosti obrob in obrob.

Primeri:

Primer: Prikaži razlike v širinah elementov. Ker so elementi v okvirju iframe, so lahko dejanske mere nekoliko drugačne.

širina demo telo ( ozadje: rumeno; ) gumb ( velikost-pisave: 12 slikovnih pik; margina: 2 slikovnih pik; ) p ( širina: 150 slikovnih pik; obroba: 1 slikovnih pik rdeče polno; ) div ( barva: rdeča; teža pisave: krepko; ) Pridobi odstavek Širina Pridobite širino dokumenta Pridobite širino okna

Vzorčni odstavek za testiranje širine

function showWidth(ele, w) ( $("div").text("Širina za " + ele + " je " + w + "px."); ) $("#getp").click(function () ( showWidth("odstavek", $("p").width()); )); $("#getd").click(function () ( showWidth("document", $(document).width()); )); $("#getw").click(function () ( showWidth("window", $(window).width()); ));

Primer: nastavite različne širine, ko kliknete elemente div.

širina demo div (širina: 70px; višina: 50px; float:left; rob: 5px; ozadje: rdeče; kazalec: kazalec;) .mod (ozadje: modro; kazalec: privzeto;) d d d d d (funkcija() ( var modWidth = 50; $("div").one("klik", funkcija () ($(this).width(modWidth).addClass("mod"); modWidth -= 8; ))();

Definicija in uporaba metod jQuery DOM

Metoda .width() jQuery pridobi trenutno izračunano širino za prvi element v nizu ujemajočih se elementov ali pa nastavi širino vsakega ujemajočega se elementa.

Upoštevajte, da je razlika med metodama .css (" premer") in .width() je, da slednji vrne vrednost brez podajanja enot, medtem ko prvi vrne vrednost v slikovnih pik(primer spodaj).

Metoda .width() jQuery je priporočljiva, ko morate v matematičnem izračunu uporabiti širino elementa. Za izračun višine elementa uporabite metodo .height().

Metoda .width() jQuery lahko poišče tudi širino okna ali dokumenta:

$(document).width() // vrne širino dokumenta HTML $(window).width() // vrne širino vidnega polja brskalnika

Ni zajamčeno, da bo metoda .width() jQuery točna, če je element ali njegov nadrejeni element skrit. Če želite dobiti natančno vrednost, se pred uporabo metode prepričajte, da je element viden. jQuery bo poskušal element začasno prikazati in nato znova skriti, da bi izmeril njegove dimenzije, vendar ta metoda ni zanesljiva in lahko vpliva na delovanje strani. Ta vrsta merilne funkcije bo morda odstranjena v prihodnji različici knjižnice jQuery.

Metoda iz različice jQuery 1.8 izračuna in vrne širino elementa ne glede na to, kateri model izračuna širine in višine je uporabljen (lastnosti content-box ali border-box box-sizing). To pomeni, da bo metoda odštela obrobe in oblazinjenje. Če s tem niste zadovoljni, uporabite metodo .css (" premer"). Spodaj je predstavljen primer primerjave obeh modelov in teh metod.

Sintaksa jQuery: Vrnjene vrednosti: Sintaksa 1.0: $(izbirnik).width() // metoda, uporabljena brez parametrov Vrednosti nastavitev: Sintaksa 1.0: $(izbirnik).width( vrednost) vrednost- Niz (vrednost v poljubnih enotah) ali celo število (vrednost v slikovnih pikah) Sintaksa 1.4.1: $(izbirnik).width(funkcija ( kazalo, trenutna vrednost)) kazalo- Celo število trenutna vrednost- Celo število. Dodano v jQuery 1.0 (sintaksa posodobljena v 1.4.1) Vrednosti parametrov Primer uporabe Uporaba metode jQuery .width() (vrne vrednost) konzola .log($("p ").css("width ")); // z uporabo metode.css().

konzola .log($("p ").width()); // z uporabo metode.width() vrnemo in prikažemo širino prvega elementa v konzoli brskalnika

konzola .log($(dokument).width()); // vrne in prikaže širino dokumenta HTML v konzoli brskalnika console .log($(window).width()); // vrne in prikaže širino vidnega polja brskalnika v konzoli brskalnika ) ); ) ); Jokaj

Redni odstavek

Drugi redni odstavek

  • .css() vrne in prikaže širino prvega elementa v konzoli brskalnika

    .

  • Z uporabo metode jQuery .width() vrnemo in prikažemo širino prvega elementa v konzoli brskalnika

    , širina dokumenta HTML in širina vidnega polja brskalnika.

Rezultat našega primera:

Razmislite o naslednjem primeru, v katerem si bomo ogledali razliko med metodo .width() in metodo .css() pri uporabi modelov za izračun širine in višine elementov content-box in border-box elementov:

Uporaba metode .width() jQuery (modela polja vsebine in polja obrobe)

.test1 ( box-sizing : content-box ; /* privzeti model (vključuje samo vsebino elementa) */ width : 200px ; /* element width */ padding : 10px ; border : 10px solid green ; ) .test2 ( box- /* model obrobe (vključuje vsebino elementa, obrobe in obrobo) */ širina: 200 slikovnih pik /* širina elementa */ oblazinjenje: 10 slikovnih pik /* obroba na vseh straneh * / obroba: 10 slikovnih pik polno zelena; /* 10 slikovnih pik polna zelena obroba */ )

$(document).ready(function ()( $("button ").click(function ()( // nastavi funkcijo, ko je element kliknjen konzola .log($(".test1 ").css("width ") ); // z uporabo metode.css() s konzolo class.test1 .log($(".test1 ").width()); // z uporabo metode.width() vrnemo in prikažemo širino elementa z razredom v konzoli brskalnika.log($(".test2 ").css("width")); // z uporabo metode .css() vrnemo in prikažemo širino element s konzolo razreda .test2 .log($(" .test2 ").width()); // vrne in v konzoli brskalnika prikaže širino elementa z razredom .test2 ) ) ); Jokaj

Redni odstavek

Redni odstavek

V tem primeru, ko kliknemo gumb:

  • Z metodo jQuery .css() vrnemo in prikažemo vrednost širine elementa v konzoli brskalnika

    z razredom test1 in test2. Upoštevajte, da bo izhodni rezultat enak, ne glede na to, kateri model uporabljajo elementi.

  • Z uporabo metode jQuery .width() vrnemo in prikažemo vrednost širine elementa v konzoli brskalnika

    z razredom test1 in test2. Upoštevajte, da v drugem primeru, kjer element

    uporablja model border-box, izhodna vrednost ne vključuje tako obrobe elementa kot oblazinjenja. To je razlika med to metodo in metodo .css() pri uporabi metode border-box.

Rezultat našega primera:

.width() namesto vrnitve bomo nastavili vrednosti širine.

Uporaba metode jQuery .width() (nastavitev vrednosti)

p (barva ozadja: oranžna;)

$(document).ready(function ()( $("button ").click(function ()( // nastavi funkcijo, ko je element kliknjen $(".test1 ").width(150 ); // nastavi širina elementov z razredom test1 v pikslih $(".test2 ").width("35% "); // nastavi širino elementov z razredom test2 v odstotkih ) ); Jokaj

Redni odstavek

Redni odstavek

Redni odstavek

Redni odstavek

V tem primeru, ko kliknemo gumb, uporabimo metodo .width() jQuery za nastavitev širine elementov.

z razredom test1 enako 150 slikovnih pik in elemente z razredom test2širina enaka 35% od nadrejenega elementa.

Upoštevajte, da če podate vrednost, ki ni slikovnih pik (brez podajanja enot), je treba vrednost posredovati kot niz.

Rezultat našega primera:

Razmislite o naslednjem primeru, v katerem bomo posredovali funkcijo kot parameter metodi .width().

Uporaba metode jQuery .width() (funkcija kot parameter)

div (barva-ozadje: rumena; /* nastavi barvo ozadja */)

$(document).ready(function ()( $("div ").click(function ()( // nastavi funkcijo, ko je element kliknjen $(this).width(function ( kazalo, trenutna vrednost)( // nastavi funkcijo ob kliku na določen element return trenutna vrednost- 50; // vrne novo vrednost širine elementa (trenutna vrednost minus 50 slikovnih pik) ) ); ) ); ) ); Jokaj

V tem primeru posredujemo funkcijo kot parameter metodi .width(), ki vrne in nastavi novo vrednost za širino kliknjenega elementa. V našem primeru se nova širina elementa izračuna kot trenutna širina elementa minus 50 slikovnih pik.

Rezultat našega primera:

Oglejmo si naslednji primer, v katerem bomo z uporabo metod .resize() in metod .width() sledili širini vidnega polja brskalnika in, ko se spremeni, nastavili določeno barvo ozadja.

Uporaba metode .width() jQuery pri spreminjanju širine okna $(document).ready(function ()( $(window).resize(function () ( // veže rutino za obravnavo dogodkov (sproži, ko oknu spremenite velikost), če ( $(this ).width() 1000 && $(this ).width() > 800) ( // Če je širina vidnega polja manjša od 1000 slikovnih pik in večja od 800 slikovnih pik $("body ").css("background- barva ", "rumena " ); // nastavi barvo ozadja na rumeno ) else if ($(this ).width() 800 && $(this ).width() > 600) ( // Če je širina vidnega polja manjša več kot 800 slikovnih pik in več kot 600 slikovnih pik $( "body ").css("background-color", "green "); // nastavi barvo ozadja na zeleno ) else ( // če ni izpolnjen nobeden od pogojev $( "body ").css("background-color " , "blue"); // nastavi barvo ozadja na modro ) ); Poskusite spremeniti velikost okna

V tem primeru z uporabo metod .resize() in metod .width() sledimo širini vidnega polja brskalnika in, ko se spremeni, elementu nastavimo posebno barvo ozadja 1000 slikovnih pik in več 800 slikovnih pik rumena. Če je širina vidnega polja manjša 800 slikovnih pik in več 600 slikovnih pik, potem bo nastavljena barva ozadja zelena, v drugih primerih bo barva ozadja nastavljena na modra.

Upoštevajte, da ko se stran naloži, bo barva bela, saj se bo funkcija izvajala samo, ko se spremeni velikost okna (metoda jQuery .resize()).

Rezultat našega primera.

Dokaj starodavna naloga sledenja dogodku spreminjanja velikosti poljubnega elementa na strani. Pomemben je pri ustvarjanju modularno neodvisne strukture za prilagajanje velikosti in drugih atributov CSS želenega elementa na strani, zlasti blokov s periodičnim nalaganjem Ajax (na primer: novice). Običajno se rešuje s časovnim določanjem in periodičnim preverjanjem velikosti elementov. Nova možnost, ki ne uporablja glasovanja s časovnim razporedom.

Trik: Znotraj elementa vstavite prazen okvir z dimenzijami position:absolute in 100%, dajte elementu position:relative; . Sledimo frame.onresize:

Preizkusna koda: Tukaj je vsebina... frame.onresize = function())( alert("#Test div je bila spremenjena velikost."); ) setTimeout(function())( //Preskusno spreminjanje velikosti po 3 sekundah. dokument. getElementById("Test ").style.width="100px"; 3000); Pod spojlerjem Ob upoštevanju želja podrobnejša koda:

Razširjena koda

Koda: Tukaj je vsebina ... setTimeout(function())( // Izračunavanje zakasnitve okvirja (za FF in IE) var timerResize="first"; frame.onresize = function())( // frame, - Frame name (name=frame ) - glej začetek kode; if(timerResize!=="first")clearTimeout(timerResize=setTimeout(function())( // Zakasnitev za brisanje čezmernih sprožilcev; alert("The div #Test je bil spremenjen."); / / Telo obdelave dogodka "onresize"; ),20) // Parameter 20(ms) - odvisen od želene hitrosti odziva na ponavljajoče se dogodke; // pomembno za gladke spremembe v velikosti elementa, // ali skoraj istočasno spreminjanje velikosti z več različnimi procesi ),200); setTimeout(function())( //Preizkus spreminjanja velikosti. document.getElementById("Test").style.width="100px"; ),3000); setTimeout(function())( //Preizkus spreminjanja velikosti. document.getElementById("Test").style.width="200px"; ),7000);

Width() .innerWidth() .outerWidth()

Funkcije vrnejo širino elementa. Poleg tega lahko z uporabo width() nastavite novo vrednost širine. Obstaja več možnosti za uporabo funkcij:

width() — širina elementa brez upoštevanja oblazinjenja in debeline obrobe.
innerWidth() — širina elementa ob upoštevanju velikosti notranjega oblazinjenja.
outerWidth(includeMargin) — širina elementa ob upoštevanju notranjega oblazinjenja, obrobe (border-width) in po potrebi zunanjega oblazinjenja (margin).

nastavi novo vrednost širine na vrednost, za vse izbrane elemente

nastavi novo širino elementa na vrednost, ki jo bo vrnila funkcija po meri. Funkcija se kliče posebej za vsakega od izbranih elementov. Ob klicu se vanj posredujejo naslednji parametri: kazalo— položaj elementa v nizu, vrednost— trenutna vrednost širine elementa.

Primeri uporabe:

$("div.content").width() vsebino.
$(dokument).width()vrne širino celotne strani
$(".content").width(30)nastavi vrednost širine na 30 slikovnih pik za vse elemente z razredom vsebino.
$("div.content").outerWidth()vrne širino prvega elementa div z razredom vsebino. Vrednost višine bo vključevala debelino oblazinjenja in obrobe
$("div.content").outerWidth(true)podobno kot v prejšnjem primeru, vendar bo vrednost širine vključevala tudi oblazinjenje.

Opomba 1: Uporaba funkcije .width() je običajno bolj priročna kot .css("width"), ker vrednost, ki jo vrne, ne vsebuje končnice "px". To pomeni, da boste v prvem primeru dobili 30, v drugem pa "30px".

Opomba 2: Pomembno je upoštevati, da boste z uporabo metode .width(name) pridobili samo vrednosti atributov prvega elementa od vseh izbranih. Če potrebujete vrednosti vseh elementov, potem uporabite konstrukte, kot sta .map() ali .each().

V akciji

Povečajte širino vseh elementov v drugi vrstici za 10 slikovnih pik.

~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: left; height:20px; margin: 1px; padding: 3px; background-color: #eee; list-style -type:none; ) ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~ul id="list"~gt~ ~lt~li class="item" style="width:60px"~gt~ Visoko ~lt~/li ~gt~ ~lt~li class="item iioo" style="width:75px"~gt~ Hitro ~lt~/li ~gt~ ~lt ~li class="item" style="width:90px"~gt~ Močno ~lt~/li ~gt~ ~lt~/ul~gt~ ~lt~br~gt~ ~lt~ul id="list2" ~gt~ ~lt~li class="item" style="width:60px"~gt~ Zgoraj ~lt~/li ~gt~ ~lt~li class="item" style="width:75px"~gt~ Hitrejši ~lt~/li ~gt~ ~lt~li class="item" style="width:90px"~gt~ Močnejši ~lt~/li ~gt~ ~lt~/ul~gt~ ~lt~script~ gt~ $("#list2 .item").width(function(i,val)( return val+10; )); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

Elementi za spreminjanje velikosti (interakcija z možnostjo spreminjanja velikosti)

Interakcija Resizable elementu doda ročaje, s premikanjem katerih lahko uporabnik spreminja velikost elementa. Nekateri brskalniki samodejno zagotavljajo to zmožnost za področja besedila, vendar interakcija Resizable omogoča to zmožnost spreminjanja velikosti za kateri koli element v dokumentu. Primer te vrste interakcije, ki se izvaja z metodo resizable(), je podan spodaj:

Uporabniški vmesnik jQuery #astor, #lily (poravnava besedila: sredina; širina: 150 slikovnih pik; plavajoča: levo; rob: 20 slikovnih pik) #astor img, #lily img (zaslon: blok; rob: samodejno) $(function() ( $( "#astor").resizable(( alsoResize: "#astor img" )); Astra .png" /> Lily .png" /> Primer izvajanja

Ta primer ustvari dva elementa div, od katerih vsak vsebuje element img in besedilo. V skriptu je eden izmed njih izbran in zanj uporabljena metoda resizable() (z uporabo parametra alsoResize, ki bo opisan kasneje). Knjižnica uporabniškega vmesnika jQuery izbranemu elementu doda manipulator, ki vam omogoča spreminjanje navpičnih in vodoravnih dimenzij elementa, kot je prikazano na sliki. Na sliki je element prikazan s povečano višino in zmanjšano širino:

Nastavitev interakcije z možnostjo spreminjanja velikosti

Če želite konfigurirati interakcijo Resizable, uporabite lastnosti, opisane v spodnji tabeli. Interakcija Resizable je odvisna od interakcije Draggable. To pomeni, da poleg nastavitev, prikazanih v tabeli, lahko uporabite nastavitve interakcije Draggable, vključno z zakasnitvijo, razdaljo, mrežo in zadrževanjem.

Interakcijske lastnosti spremenljive velikosti Opis nepremičnine
tudi Spremeni velikost Izbirnik, ki se uporablja za izbiro elementov, ki jim je treba spremeniti velikost hkrati z elementom, za katerega je uporabljena interakcija Spremenljive velikosti. Privzeta vrednost je false, kar pomeni, da takih elementov ni
razmerje Če je ta možnost resnična, bo velikost elementa spremenjena, pri čemer bo ohranjeno razmerje stranic. Privzeta vrednost je res
autoHide Če je ta možnost nastavljena na true, postanejo ročice vidne le, ko je kazalec miške nad elementom. Privzeta vrednost je false
duh Če je ta možnost resnična, bodo ob spremembi velikosti elementa vidni polprozorni obrisi, ki označujejo nove dimenzije elementa. Privzeta vrednost je res
ročaji Določa, kje bodo nameščeni manipulatorji. Podprte vrednosti so navedene spodaj
maxHeight Določa največjo višino, na katero je mogoče spremeniti velikost elementa. Privzeta vrednost je null, kar pomeni, da ni omejitev
maxWidth Določa največjo širino, na katero je mogoče spremeniti velikost elementa. Privzeta vrednost je nič
minHeight
minWidth Določa najmanjšo višino, na katero je mogoče spremeniti velikost elementa
Hkrati spreminjanje velikosti drugih elementov

Po mojem mnenju je najpogosteje uporabljena možnost pri nastavljanju interakcij Resizable možnost alsoResize. Z njegovo pomočjo lahko definirate dodatne elemente, katerih velikosti se bodo spreminjale hkrati z velikostmi elementa, za katerega je bila uporabljena metoda resizable(). To možnost uporabljam predvsem zato, da zagotovim, da se velikost elementov spreminja sinhrono z velikostjo njihovih nadrejenih elementov.

To funkcijo smo že uporabili v prejšnjem primeru z definiranjem hkratnega spreminjanja velikosti elementov img in div. Najprej poglejmo, kaj se zgodi, če možnost alsoResize ni uporabljena. Ustrezna koda je prikazana v spodnjem primeru:

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

Če možnost alsoResize ni uporabljena, se spremenijo samo dimenzije elementa div. Dimenzije elementov, ki jih vsebuje, ostanejo nespremenjene. Kaj se zgodi je prikazano na sliki:

Včasih je ravno to rezultat, ki ga želite, vendar osebno uporabljam možnost alsoResize v skoraj vseh primerih, ko uporabljam interakcijo Resizable. Pri tej možnosti mi je všeč, da izbira ustreznih elementov ni omejena z vsebino elementa, ki se mu spreminja velikost. S to možnostjo lahko določite kateri koli drug element, kot je prikazano v spodnjem primeru:

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

V tem scenariju je izbor elementov razširjen tako, da vključuje druge elemente div in img. Na ta način, ko spremenite velikost enega elementa div, bo uporabniški vmesnik jQuery spremenil velikost štirih elementov hkrati. Rezultat je prikazan na sliki:

Omejitev dovoljenih omejitev za spreminjanje velikosti elementov

Omejitve velikosti razširljivih elementov lahko omejite z možnostmi maxHeight, maxWidth, minHeight in minWidth. Vrednosti teh možnosti so lahko številke, ki izražajo število slikovnih pik, ali nič. Spodaj je prikazan primer uporabe teh nastavitev.