Sustav 

Elementi skaliranja. Praćenje “onresize” na elementu Istodobna promjena veličine drugih elemenata

Vraća i postavlja širinu elementa.

  • dodana verzija: 1.0.širina()

    Vraća: cijeli broj

    Dobiva širinu elementa

  • dodana verzija: 1.0.width(vrijednost)

    Vrsta: niz ili broj

    Vraća: jQuery

    Cijeli broj koji predstavlja broj piksela ili broj s jedinicom niza.

  • dodana verzija: 1.4.1.width(funkcija(indeks, širina))

    funkcija (indeks, širina)

    Vrsta: funkcija

    Vraća: jQuery

    Funkcija koja vraća širinu za postavljanje nove. Dobiva indeks položaja elementa u skupu i staru vrijednost širine. Funkcija se odnosi na trenutni element.

Razlika između .css("width") i .width() je u tome što ova metoda vraća samo numeričku vrijednost (na primjer, 400, ne 400px). Metoda.width() preporučuje se za korištenje kada se dobivena vrijednost treba koristiti u matematičkim izračunima.

Ova metoda se može koristiti za dobivanje širine dokumenta i prozora.

$(prozor).width(); $(dokument).width();

Imajte na umu da metoda .width() uvijek vraća širinu sadržaja, bez obzira na vrijednost svojstva CSS box-sizing. Od jQuery 1.8, morate dobiti vrijednost svojstva box-sizing, zatim oduzeti veličinu ruba i ispune. Sve to ako se na element primijeni svojstvo box-sizing: border-box. Da biste izbjegli ove izračune, koristite .css("width").

Metodi .width(value) možete proslijediti niz ili broj. Ako je proslijeđen samo broj, tada jQuery automatski dodaje “px”. Ako je linija, trebala bi izgledati ovako: 100px, 50% ili automatski. Imajte na umu da u modernim preglednicima širina ne uključuje vrijednosti ispune i obruba.

Primjeri:

Primjer: Prikaži razlike u širinama elemenata. Budući da su elementi u iframeu, stvarne dimenzije mogu biti malo drugačije.

širina demo body ( background:yellow; ) button ( font-size:12px; margin:2px; ) p ( width:150px; border:1px red solid; ) div ( color:red; font-weight:bold; ) Get Paragraph Width Dohvati širinu dokumenta Dohvati širinu prozora

Uzorak odlomka za testiranje širine

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

Primjer: postavite različite širine kada kliknete na div elemente.

širina demo div ( širina: 70px; visina: 50px; float:lijevo; margina: 5px; pozadina: crvena; kursor: pokazivač; ) .mod ( pozadina: plava; kursor: zadano; ) d d d d d (funkcija() ( var modWidth = 50; $("div").one("klik", funkcija () ( $(this).width(modWidth).addClass("mod"); modWidth -= 8; ))();

Definicija i primjena jQuery DOM metoda

jQueryjeva metoda .width() dobiva trenutno izračunatu širinu za prvi element u skupu podudarnih elemenata ili postavlja širinu svakog podudarnog elementa.

Imajte na umu da je razlika između .css metoda (" širina") i .width() je da potonji vraća vrijednost bez navođenja jedinica, dok prvi vraća vrijednost u piksela(primjer u nastavku).

jQueryjeva metoda .width() preporučuje se kada trebate koristiti širinu elementa u matematičkom izračunu. Za izračunavanje visine elementa koristite metodu .height().

jQueryjeva metoda .width() također može pronaći širinu prozora ili dokumenta:

$(document).width() // vraća širinu HTML dokumenta $(window).width() // vraća širinu prozora preglednika

Nije zajamčeno da će jQueryjeva metoda .width() biti točna kada je element ili njegov roditelj skriven. Da biste dobili točnu vrijednost, provjerite je li element vidljiv prije upotrebe metode. jQuery će pokušati privremeno prikazati i zatim ponovno sakriti element kako bi izmjerio njegove dimenzije, ali ova metoda nije pouzdana i može utjecati na izvedbu stranice. Ova vrsta funkcije mjerenja može biti uklonjena u budućoj verziji jQuery biblioteke.

Metoda iz verzije jQuery 1.8 izračunava i vraća širinu elementa bez obzira koji se model izračuna širine i visine koristi (content-box ili border-box svojstva box-sizing). Odnosno, metoda će oduzeti obrube i ispunu. Ako niste zadovoljni s ovim, koristite .css metodu (" širina"). Primjer usporedbe dvaju modela i ovih metoda prikazan je u nastavku.

jQuery sintaksa: Povratne vrijednosti: Sintaksa 1.0: $(selektor).width() // metoda koja se koristi bez parametara Vrijednosti postavki: Sintaksa 1.0: $(selektor).width( vrijednost) vrijednost- Niz (vrijednost u proizvoljnim jedinicama) ili cijeli broj (vrijednost u pikselima) Sintaksa 1.4.1: $(selektor).width(funkcija ( indeks, Trenutna vrijednost)) indeks- Cijeli broj Trenutna vrijednost- Cijeli broj. Dodano u jQuery 1.0 (sintaksa ažurirana u 1.4.1) Vrijednosti parametara Primjer upotrebe Korištenje metode jQuery .width() (vraćanje vrijednosti) konzola .log($("p ").css("width ")); // koristeći metodu.css().

konzola .log($("p ").width()); // pomoću metode.width() vraćamo i prikazujemo širinu prvog elementa u konzoli preglednika

konzola .log($(dokument).width()); // vraća i prikazuje širinu HTML dokumenta u konzoli preglednika console .log($(window).width()); // vraća i prikazuje širinu prozora preglednika u konzoli preglednika ) ); ) ); Plakati

Uobičajeni paragraf

Drugi redovni paragraf

  • .css() vraća i prikazuje širinu prvog elementa u konzoli preglednika

    .

  • Pomoću metode jQuery .width() vraćamo i prikazujemo širinu prvog elementa u konzoli preglednika

    , širina HTML dokumenta i širina okvira preglednika.

Rezultat našeg primjera:

Razmotrite sljedeći primjer u kojem ćemo pogledati razliku između metode .width() i metode .css() pri korištenju modela za izračun širine i visine elemenata content-box i border-box:

Korištenje jQueryjeve metode .width() (modeli okvira sadržaja i okvira obruba)

.test1 ( box-sizing : content-box ; /* zadani model (uključuje samo sadržaj elementa) */ width : 200px ; /* element width */ padding : 10px ; border : 10px solid green ; ) .test2 ( box- /* model rubnog okvira (uključuje sadržaj elementa, obrube i ispunu) */ širina: 200px /* širina elementa */ razmak: 10px /* ispuna na svim stranama * / obrub: 10px jednobojno zeleno; /* 10 px puni zeleni obrub */ )

$(document).ready(function ()( $("button ").click(function ()( // postavi funkciju kada se element klikne konzola .log($(".test1 ").css("width ") ); // korištenjem metode.css() s konzolom class.test1 .log($(".test1 ").width()); // korištenjem metode.width() vraćamo i prikazujemo širinu elementa s klasom u konzoli preglednika.log($(".test2 ").css("width")); // pomoću metode .css() vraćamo i prikazujemo širinu element s klasom .test2 console .log($(" .test2 ").width()); // vraća i prikazuje u konzoli preglednika širinu elementa s klasom .test2 ) ) ); Plakati

Uobičajeni paragraf

Uobičajeni paragraf

U ovom primjeru, kada kliknemo na gumb:

  • Pomoću metode jQuery .css() vraćamo i prikazujemo vrijednost širine elementa u konzoli preglednika

    s razredom test1 I test2. Imajte na umu da bez obzira koji model elementi koriste, izlazni rezultat će biti isti.

  • Pomoću metode jQuery .width() vraćamo i prikazujemo vrijednost širine elementa u konzoli preglednika

    s razredom test1 I test2. Imajte na umu da u drugom slučaju, gdje je element

    koristi model graničnog okvira, izlazna vrijednost ne uključuje i obrub i ispunu elementa. Ovo je razlika između ove metode i metode .css() kada se koristi metoda rubnog okvira.

Rezultat našeg primjera:

.width() postavit ćemo vrijednosti širine radije nego vratiti.

Upotreba metode jQuery .width() (postavljanje vrijednosti)

p (boja pozadine: narančasta;)

$(document).ready(function ()( $("button ").click(function ()( // postavi funkciju kada se klikne na element $(".test1 ").width(150 ); // postavi širina elemenata s klasom test1 u pikselima $(".test2 ").width("35% "); // postavite širinu elemenata s klasom test2 u postocima ) ) ); Plakati

Uobičajeni paragraf

Uobičajeni paragraf

Uobičajeni paragraf

Uobičajeni paragraf

U ovom primjeru, kada se klikne gumb, koristimo jQueryjevu metodu .width() za postavljanje širine elemenata.

s razredom test1 jednak 150 piksela, a elementi s klasom test2širina jednaka 35% od nadređenog elementa.

Imajte na umu da ako navedete vrijednost koja nije piksel (bez navođenja jedinica), tada se vrijednost mora proslijediti kao niz.

Rezultat našeg primjera:

Razmotrite sljedeći primjer u kojem ćemo proslijediti funkciju kao parametar metodi .width().

Upotreba metode jQuery .width() (funkcija kao parametar)

div ( background-color : yellow ; /* postavi boju pozadine */ )

$(document).ready(function ()( $("div ").click(function ()( // postavi funkciju kada se klikne na element $(this).width(function ( indeks, Trenutna vrijednost)( // postavite funkciju kada kliknete na određeni element return Trenutna vrijednost- 50; // vrati novu vrijednost širine elementa (trenutna vrijednost minus 50 piksela) ) ); ) ); ) ); Plakati

U ovom primjeru prosljeđujemo funkciju kao parametar metodi .width() koja vraća i postavlja novu vrijednost za širinu kliknutog elementa. U našem slučaju, nova širina elementa izračunava se kao trenutna širina elementa minus 50 piksela.

Rezultat našeg primjera:

Razmotrimo sljedeći primjer u kojem ćemo pomoću metode .resize() i metode .width() pratiti širinu prozora preglednika i, kada se promijeni, postaviti određenu boju pozadine.

Korištenje jQueryjeve metode .width() pri mijenjanju širine prozora $(document).ready(function ()( $(window).resize(function () ( // veže rukovatelja događajima (aktivira se kada se promijeni veličina prozora) if ( $(this ).width() 1000 && $(this ).width() > 800) ( // Ako je širina okvira za prikaz manja od 1000 piksela i veća od 800 piksela $("body ").css("background- color ", "yellow " ); // postavite boju pozadine na žutu ) else if ($(this ).width() 800 && $(this ).width() > 600) ( // Ako je širina okvira za prikaz manja od 800 piksela i više od 600 piksela $( "body ").css("background-color", "green "); // postavi boju pozadine na zelenu ) else ( // ako nijedan od uvjeta nije ispunjen $( "body ").css("background-color " , "blue"); // postavi boju pozadine na plavu ) ); Pokušajte promijeniti veličinu prozora

U ovom primjeru, pomoću metode .resize() i metode .width(), pratimo širinu okvira preglednika i, kada se promijeni, postavljamo određenu boju pozadine za element 1000 piksela i više 800 piksela žuta boja. Ako je širina okvira za prikaz manja 800 piksela i više 600 piksela, zatim će se postaviti boja pozadine zelena, u ostalim slučajevima boja pozadine bit će postavljena na plava.

Imajte na umu da kada se stranica učita boja će biti bijela, jer će se funkcija pokrenuti samo kada se promijeni veličina prozora (jQuery .resize() metoda).

Rezultat našeg primjera.

Prilično stari zadatak praćenja događaja promjene veličine proizvoljnog elementa na stranici. Relevantno je pri izradi modularno neovisne strukture za podešavanje veličina i drugih CSS atributa željenog elementa na stranici, posebno blokova s ​​periodičnim Ajax učitavanjem (na primjer: vijesti). Obično se rješava vremenskim određivanjem i periodičnim ispitivanjem veličina elemenata. Nova opcija koja ne koristi vremensko prozivanje.

Trik: Unutar elementa umetnite prazan okvir s dimenzijama position:absolute i 100%, dajte elementu position:relative; . I pratimo frame.onresize :

Testni kod: Evo sadržaja... frame.onresize = function())( alert("#Test div je promijenio veličinu."); ) setTimeout(function())( //Testiraj promjenu veličine nakon 3 sekunde. dokument. getElementById("Testiraj ").style.width="100px"; 3000); Ispod spojlera Uzimajući u obzir želje, detaljniji kod:

Prošireni kod

Kod: Evo sadržaja... setTimeout(function())( // Određivanje kašnjenja okvira (za FF i IE) var timerResize="first"; frame.onresize = function())( // frame, - Frame name (name=frame ) - vidi početak koda; if(timerResize!=="first")clearTimeout(timerResize=setTimeout(function())( // Odgoda za brisanje prekomjernih okidača; alert("The div #Test je promijenio veličinu."); // Tijelo obrade događaja "onresize"; ),20) // Parametar 20(ms) - ovisi o željenoj brzini odgovora na ponovljene događaje; // relevantno za glatke promjene u veličini elementa, // ili gotovo istodobna promjena veličine pomoću nekoliko različitih procesa ),200); setTimeout(function())( //Testiraj promjenu veličine. document.getElementById("Test").style.width="100px"; ),3000); setTimeout(function())( //Testiraj promjenu veličine. document.getElementById("Test").style.width="200px"; ),7000);

Width() .innerWidth() .outerWidth()

Funkcije vraćaju širinu elementa. Osim toga, koristeći width(), možete postaviti novu vrijednost širine. Postoji nekoliko opcija za korištenje funkcija:

width() — širina elementa bez uzimanja u obzir ispune i debljine obruba.
innerWidth() — širina elementa uzimajući u obzir veličinu unutarnjeg ispuna.
outerWidth(includeMargin) — širina elementa, uzimajući u obzir unutarnje ispune, rub (border-width) i, ako je potrebno, vanjske ispune (margina).

postavlja novu vrijednost širine na vrijednost, za sve odabrane elemente

postavlja novu širinu elementa na vrijednost koju će prilagođena funkcija vratiti. Funkcija se poziva zasebno za svaki od odabranih elemenata. Kada se pozove, prosljeđuju mu se sljedeći parametri: indeks— položaj elementa u skupu, vrijednost— trenutna vrijednost širine elementa.

Primjeri korištenja:

$("div.content").width() sadržaj.
$(dokument).width()vratit će širinu cijele stranice
$(".sadržaj").width(30)postavlja vrijednost širine na 30 piksela za sve elemente s klasom sadržaj.
$("div.content").outerWidth()vratit će širinu prvog div elementa s klasom sadržaj. Vrijednost visine uključivat će ispunu i debljinu obruba
$("div.content").outerWidth(true)slično prethodnom primjeru, ali će vrijednost širine također uključivati ​​ispunu.

Napomena 1: Korištenje funkcije .width() obično je praktičnije od .css("width") jer vrijednost koju vraća ne sadrži završetak "px". Odnosno, u prvom slučaju dobit ćete 30, au drugom "30px".

Napomena 2: Važno je napomenuti da ćete pomoću metode .width(name) dobiti samo vrijednosti atributa prvog elementa od svih odabranih. Ako trebate vrijednosti svih elemenata, trebali biste koristiti konstrukcije poput .map() ili .each() .

U akciji

Povećajte širinu svih elemenata u drugom retku za 10 piksela.

~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~ Brzo ~lt~/li ~gt~ ~lt ~li class="item" style="width:90px"~gt~ Snažan ~lt~/li ~gt~ ~lt~/ul~gt~ ~lt~br~gt~ ~lt~ul id="list2" ~gt~ ~lt~li class="item" style="width:60px"~gt~ Iznad ~lt~/li ~gt~ ~lt~li class="item" style="width:75px"~gt~ Brži ~lt~/li ~gt~ ~lt~li class="item" style="width:90px"~gt~ Jač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 skaliranja (interakcija promjenjive veličine)

Interakcija Resizable dodaje ručke elementu tako da, pomičući ih, korisnik može skalirati element mijenjajući njegovu veličinu. Neki preglednici automatski pružaju ovu mogućnost za tekstualna područja, ali interakcija s promjenom veličine pruža ovu mogućnost skaliranja za bilo koji element u dokumentu. Primjer ove vrste interakcije, koja se implementira pomoću metode resizable(), dan je u nastavku:

jQuery UI #astor, #lily (text-align: center; width: 150px; float: left; margin: 20px) #astor img, #lily img (display: block; margin: auto) $(function() ( $( "#astor").resizable(( alsoResize: "#astor img" )); Astra .png" /> Lily .png" /> Primjer pokretanja

Ovaj primjer stvara dva div elementa, od kojih svaki sadrži img element i tekst. U skripti se odabire jedan od njih i na njega se primjenjuje metoda resizable() (koristeći parametar alsoResize, koji će biti opisan kasnije). jQuery UI biblioteka dodaje manipulator odabranom elementu koji vam omogućuje promjenu okomitih i vodoravnih dimenzija elementa, kao što se vidi na slici. Na slici je element prikazan s povećanom visinom i smanjenom širinom:

Postavljanje interakcije s promjenom veličine

Za konfiguraciju interakcije s mogućnošću promjene veličine upotrijebite svojstva opisana u donjoj tablici. Interakcija Resizable ovisi o interakciji Draggable. To znači da uz postavke prikazane u tablici, možete koristiti postavke interakcije Draggable-a, uključujući odgodu, udaljenost, mrežu i zadržavanje.

Svojstva interakcije promjenjive veličine Opis nekretnine
također Promijeni veličinu Selektor koji se koristi za odabir elemenata kojima treba promijeniti veličinu u isto vrijeme kad i element na koji se primjenjuje interakcija Promjenjive veličine. Zadana vrijednost je false, što znači da nema takvih elemenata
aspectRatio Ako je ova opcija istinita, elementu će se promijeniti veličina uz zadržavanje omjera širine i visine. Zadana vrijednost je istina
autoHide Ako je ova opcija postavljena na true, ručice postaju vidljive samo kada je pokazivač miša iznad elementa. Zadana vrijednost je false
duh Ako je ova opcija istinita, kada se promijeni veličina elementa, bit će vidljivi poluprozirni obrisi koji označavaju nove dimenzije elementa. Zadana vrijednost je istina
ručke Određuje gdje će se nalaziti manipulatori. Podržane vrijednosti navedene su u nastavku
maxHeight Definira maksimalnu visinu na koju se može promijeniti veličina elementa. Zadana vrijednost je null, što znači da nema ograničenja
maxWidth Definira maksimalnu širinu na koju se može promijeniti veličina elementa. Zadana vrijednost je nula
minVisina
minWidth Definira minimalnu visinu na koju se može promijeniti veličina elementa
Promjena veličine drugih elemenata u isto vrijeme

Po mom mišljenju, najčešće korištena opcija pri postavljanju interakcija Resizable je opcija alsoResize. Uz njegovu pomoć možete definirati dodatne elemente čije će se veličine mijenjati istovremeno s veličinama elementa na koji je primijenjena metoda resizable(). Ovu opciju koristim uglavnom kako bih osigurao da elementi mijenjaju veličinu sinkrono s veličinama njihovih nadređenih elemenata.

Već smo upotrijebili ovu značajku u prethodnom primjeru definirajući istodobnu promjenu veličine elemenata img i div. Prije svega, da vidimo što se događa ako se opcija alsoResize ne koristi. Odgovarajući kod prikazan je u primjeru u nastavku:

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

Ako se opcija alsoResize ne koristi, tada se mijenjaju samo dimenzije elementa div. Dimenzije elemenata koje sadrži ostaju nepromijenjene. Što se događa prikazano je na slici:

Ponekad je to upravo rezultat koji želite, ali osobno koristim opciju alsoResize u gotovo svim slučajevima kada koristim interakciju Resizable. Ono što mi se sviđa kod ove opcije je to što odabir odgovarajućih elemenata nije ograničen sadržajem elementa kojem se mijenja veličina. Pomoću ove opcije možete navesti bilo koji drugi element, kao što je prikazano u primjeru u nastavku:

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

U ovom scenariju, izbor elemenata je proširen kako bi uključio druge div i img elemente. Na ovaj način, kada promijenite veličinu jednog div elementa, jQuery UI će promijeniti veličinu četiri elementa odjednom. Rezultat je prikazan na slici:

Ograničavanje dopuštenih granica za promjenu veličine elemenata

Možete ograničiti ograničenja veličine skalabilnih elemenata korištenjem opcija maxHeight, maxWidth, minHeight i minWidth. Vrijednosti ovih opcija mogu biti brojevi koji izražavaju broj piksela ili null. Primjer korištenja ovih postavki prikazan je u nastavku.