Sistema 

Mastelio keitimo elementai. Elemento dydžio „keitimo“ stebėjimas Kitų elementų dydžio keitimas vienu metu

Grąžina ir nustato elemento plotį.

  • pridėta versija: 1.0.width()

    Grąžina: sveikasis skaičius

    Gauna elemento plotį

  • pridėta versija: 1.0.width(value)

    Tipas: eilutė arba skaičius

    Grąžina: jQuery

    Sveikasis skaičius, nurodantis pikselių skaičių, arba skaičius su eilutės vienetu.

  • pridėta versija: 1.4.1.width(funkcija(indeksas, plotis))

    funkcija (indeksas, plotis)

    Tipas: Funkcija

    Grąžina: jQuery

    Funkcija, kuri grąžina plotį, kad būtų nustatytas naujas. Gauna elemento padėties indeksą rinkinyje ir senąją pločio reikšmę. Funkcija nurodo esamą elementą.

Skirtumas tarp .css("width") ir .width() yra tas, kad šis metodas grąžina tik skaitinę reikšmę (pvz., 400, o ne 400 pikselių). Metodą.width() rekomenduojama naudoti, kai gautą reikšmę reikia naudoti atliekant matematinius skaičiavimus.

Šiuo metodu galima nustatyti dokumento ir lango plotį.

$(langas).width(); $(dokumentas).width();

Atminkite, kad metodas .width() visada grąžina turinio plotį, neatsižvelgiant į CSS dėžutės dydžio ypatybės reikšmę. Nuo 1.8 versijos jQuery turite gauti dėžutės dydžio ypatybės vertę, tada atimti kraštinės ir užpildymo dydį. Visa tai, jei elementui taikoma ypatybė box-sizing: border-box. Norėdami išvengti šių skaičiavimų, naudokite .css("width").

.width(value) metodui galite perduoti eilutę arba skaičių. Jei perduodamas tik skaičius, „jQuery“ automatiškai prideda „px“. Jei eilutė, ji turėtų atrodyti taip: 100 pikselių, 50% arba automatinis. Atminkite, kad šiuolaikinėse naršyklėse į plotį neįtraukiamos užpildymo ir kraštinės reikšmės.

Pavyzdžiai:

Pavyzdys: Rodyti elementų pločių skirtumus. Kadangi elementai yra „iframe“, tikrieji matmenys gali šiek tiek skirtis.

plotis demonstracinis turinys ( fonas: geltonas; ) mygtukas ( šrifto dydis: 12 tšk.; paraštė: 2 piks.; ) p ( plotis: 150 piks.; kraštinė: 1 piks. raudona vientisa; ) div ( spalva: raudona; šrifto svoris: paryškintas; ) Gauti pastraipą Plotis Gauti dokumento plotį Gauti lango plotį

Bandymo pločio pastraipos pavyzdys

function showWidth(ele, w) ( $("div").text("" + ele + " plotis yra " + w + "px."); ) $("#getp").click(function () ( showWidth("pastraipa", $("p").width()); )); $("#getd").click(function () ( showWidth("document", $(document).width()); )); $("#getw").click(function () ( showWidth("langas", $(langas).width()); ));

Pavyzdys: spustelėdami div elementus nustatykite skirtingus pločius.

plotis demonstracinis div ( plotis: 70 piks.; aukštis: 50 piks.; slankioji: kairėn; paraštė: 5 piks.; fonas: raudonas; žymeklis: rodyklė; ) .mod ( fonas: mėlynas; žymeklis: numatytasis; ) d d d d d (funkcija () ( var modWidth = 50; $("div").one("click", function () ( $(this).width(modWidth).addClass("mod"); modWidth -= 8; ))();

jQuery DOM metodų apibrėžimas ir taikymas

jQuery .width() metodas gauna šiuo metu apskaičiuotą pirmojo suderintų elementų rinkinio elemento plotį arba nustato kiekvieno atitinkančio elemento plotį.

Atkreipkite dėmesį, kad skirtumas tarp .css metodų (" plotis") ir .width() reiškia, kad pastarasis grąžina reikšmę nenurodydamas vienetų, o pirmasis grąžina reikšmę pikselių(pavyzdys žemiau).

jQuery .width() metodas rekomenduojamas, kai reikia naudoti elemento plotį atliekant matematinius skaičiavimus. Norėdami apskaičiuoti elemento aukštį, naudokite .height() metodą.

jQuery .width() metodas taip pat gali rasti lango ar dokumento plotį:

$(document).width() // grąžina HTML dokumento plotį $(window).width() // grąžina naršyklės peržiūros srities plotį

Negarantuojama, kad jQuery .width() metodas bus tikslus, kai elementas arba jo pirminis elementas yra paslėpti. Norėdami gauti tikslią vertę, prieš naudodami metodą įsitikinkite, kad elementas matomas. „jQuery“ bandys laikinai parodyti ir vėl paslėpti elementą, kad išmatuotų jo matmenis, tačiau šis metodas nėra patikimas ir gali turėti įtakos puslapio našumui. Šio tipo matavimo funkcija gali būti pašalinta būsimoje jQuery bibliotekos versijoje.

Metodas iš versijos jQuery 1.8 apskaičiuoja ir grąžina elemento plotį, neatsižvelgiant į tai, koks pločio ir aukščio skaičiavimo modelis naudojamas (content-box , arba border-box properties box-sizing ). Tai reiškia, kad šis metodas atims kraštines ir užpildymą. Jei nesate patenkinti, naudokite .css metodą (" plotis“). Toliau pateikiamas dviejų modelių ir šių metodų palyginimo pavyzdys.

jQuery sintaksė: grąžinamos reikšmės: Sintaksė 1.0: $(selector ).width() // metodas naudojamas be parametrų Nustatymo reikšmės: Sintaksė 1.0: $(selector).width( vertė) vertė– Eilutė (reikšmė savavališkais vienetais) arba sveikasis skaičius (reikšmė pikseliais) Sintaksė 1.4.1: $(selector ).width(function ( indeksas, dabartinė vertė)) indeksas- Sveikasis skaičius dabartinė vertė- Sveikasis skaičius. Pridėta jQuery 1.0 (sintaksė atnaujinta 1.4.1) Parametrų reikšmės Naudojimo pavyzdys Naudojant jQuery .width() metodą (grąžinant reikšmę) konsolė .log($("p ").css("width")); // naudojant .css() metodą

konsolė .log($("p ").width()); // naudodami metodą.width() grąžiname ir rodome pirmojo elemento plotį naršyklės konsolėje

konsolė .log($(document).width()); // grąžina ir parodo HTML dokumento plotį naršyklės konsolėje konsolėje .log($(window).width()); // grąžina ir parodo naršyklės peržiūros srities plotį naršyklės konsolėje ) ); ) ); Verkti

Įprasta pastraipa

Antra įprasta pastraipa

  • .css() grąžina ir rodo pirmojo elemento plotį naršyklės konsolėje

    .

  • Naudodami jQuery .width() metodą, grąžiname ir rodome pirmojo elemento plotį naršyklės konsolėje

    , HTML dokumento plotis ir naršyklės peržiūros srities plotis.

Mūsų pavyzdžio rezultatas:

Apsvarstykite šį pavyzdį, kuriame pažvelgsime į skirtumą tarp .width() metodo ir .css() metodo, kai naudojate turinio laukelio ir kraštinės laukelio elementų pločio ir aukščio skaičiavimo modelius:

Naudojant jQuery .width() metodą (turinio laukelio ir kraštinės laukelio modeliai)

.test1 ( box-sizing : content-box ; /* numatytasis modelis (apima tik elemento turinį) */ plotis : 200 pikselių ; /* elemento plotis dydis : border-box ; /* border-box modelis (su elemento turiniu, krašteliais ir užpildu) */ plotis : 200px ; /* 10 piks. vientisas žalias kraštelis */ )

$(document).ready(function ()( $("button ").click(function ()( // nustatykite funkciją, kai elementas paspaudžiamas console .log($().test1 ").css("width ") ); // naudodami .css() metodą su class.test1 konsole .log($(".test1 ").width()); // naudodami .width() metodą grąžiname ir rodome plotį elemento su klase naršyklės konsolėje .log($(".test2 ").css("width") // naudodami .css() metodą grąžiname ir rodome elementas su klase .test2 console .log($(" .test2 ").width() // grąžina ir naršyklės konsolėje rodo elemento su klase .test2 ) ) ); Verkti

Įprasta pastraipa

Įprasta pastraipa

Šiame pavyzdyje spustelėjus mygtuką:

  • Naudodami jQuery .css() metodą, grąžiname ir naršyklės konsolėje rodome elemento pločio reikšmę

    su klase testas1 Ir testas2. Atkreipkite dėmesį, kad nesvarbu, kokį modelį naudoja elementai, išvesties rezultatas bus toks pat.

  • Naudodami jQuery .width() metodą, grąžiname ir naršyklės konsolėje rodome elemento pločio reikšmę

    su klase testas1 Ir testas2. Atkreipkite dėmesį, kad antruoju atveju, kai elementas

    naudoja border-box modelį, išvesties reikšmė neapima nei elemento kraštinės, nei užpildymo. Tai yra skirtumas tarp šio metodo ir .css() metodo, kai naudojamas border-box metodas.

Mūsų pavyzdžio rezultatas:

.width() nustatysime pločio reikšmes, o ne grąžinsime.

jQuery .width() metodo naudojimas (nustatymo reikšmės)

p (fono spalva: oranžinė;)

$(document).ready(function ()( $("button ").click(function ()( // nustato funkciją, kai elementas yra spustelėjęs $().test1 ").width(150 ); // nustatyti elementų plotis su class test1 pikseliais $(.test2 ").width("35% " // nustato elementų plotį su class test2 procentais ) ) ); Verkti

Įprasta pastraipa

Įprasta pastraipa

Įprasta pastraipa

Įprasta pastraipa

Šiame pavyzdyje, kai spustelėjamas mygtukas, elementų pločiui nustatyti naudojame jQuery .width() metodą.

su klase testas1 lygus 150 pikselių, ir elementus su klase testas2 plotis lygus 35% iš pirminio elemento.

Atminkite, kad jei nurodote ne pikselius, o kitą reikšmę (nenurodant vienetų), reikšmė turi būti perduodama kaip eilutė.

Mūsų pavyzdžio rezultatas:

Apsvarstykite šį pavyzdį, kuriame funkciją perduosime kaip .width() metodo parametrą.

jQuery .width() metodo naudojimas (funkcija kaip parametras)

div (fono spalva: geltona; /* nustatyti fono spalvą */)

$(document).ready(function ()( $("div ").click(function ()( // nustato funkciją spustelėjus elementą $(this ).width(function ( indeksas, dabartinė vertė)( // nustatykite funkciją spustelėjus konkretaus elemento grąžinimą dabartinė vertė- 50; // grąžina naują elemento pločio reikšmę (dabartinė vertė atėmus 50 pikselių) ); ) ); ) ); Verkti

Šiame pavyzdyje funkciją perduodame kaip parametrą .width() metodui, kuris grąžina ir nustato naują spustelėto elemento pločio reikšmę. Mūsų atveju naujas elemento plotis skaičiuojamas kaip dabartinis elemento plotis minus 50 pikselių.

Mūsų pavyzdžio rezultatas:

Panagrinėkime toliau pateiktą pavyzdį, kuriame, naudodami .resize() ir .width() metodus, stebėsime naršyklės peržiūros srities plotį ir, jam pasikeitus, nustatysime tam tikrą fono spalvą.

jQuery .width() metodo naudojimas keičiant lango plotį $(document).ready(function ()( $(window).resize(function () ( // susieti įvykių tvarkyklę (suveikia, kai keičiamas lango dydis)) if ( $(this ).width() 1000 && $(this ).width() > 800) ( // Jei peržiūros srities plotis yra mažesnis nei 1000 pikselių ir didesnis nei 800 pikselių $("body ").css("background- color ", "yellow" ); // nustatyti fono spalvą į geltoną ) else if ($(this ).width() 800 && $(this ).width() > 600) ( // Jei peržiūros srities plotis mažesnis nei 800 pikselių ir daugiau nei 600 pikselių $( "body ").css("fono spalva ", "green" // nustatykite fono spalvą į žalią ) else ( // jei netenkinama nė viena sąlyga $(); "body ").css("fono spalva " , "mėlyna" // nustatyti fono spalvą į mėlyną ) ) ); Pabandykite pakeisti lango dydį

Šiame pavyzdyje, naudodami .resize() ir .width() metodus, stebime naršyklės peržiūros srities plotį ir, kai jis pasikeičia, nustatome konkrečią elemento fono spalvą 1000 pikselių ir dar 800 pikselių geltona. Jei peržiūros srities plotis mažesnis 800 pikselių ir dar 600 pikselių, tada bus nustatyta fono spalva žalias, kitais atvejais bus nustatyta fono spalva mėlyna.

Atkreipkite dėmesį, kad įkeliant puslapį spalva bus tokia baltas, nes funkcija veiks tik pakeitus lango dydį (metodas jQuery .resize()).

Mūsų pavyzdžio rezultatas.

Gana sena užduotis stebėti atsitiktinio puslapio elemento dydžio keitimo įvykį. Tai aktualu kuriant modulinę nepriklausomą struktūrą, skirtą koreguoti pageidaujamo puslapio elemento dydžius ir kitus CSS atributus, ypač blokus su periodiniu Ajax įkėlimu (pavyzdžiui, naujienos). Paprastai tai išsprendžiama nustatant laiką ir periodiškai apklausiant elementų dydžius. Nauja parinktis, kuri nenaudoja laiko apklausos.

Triukas: elemento viduje įterpkite tuščią rėmelį su padėtis:absoliutus ir 100% matmenimis, nurodykite elemento padėtį:santykinis; . Ir sekite frame.onresize:

Testo kodas: Štai turinys... frame.onresize = function())( alert("#Test div buvo pakeistas."); ) setTimeout(function())( //Bandykite keisti dydį po 3 sekundžių. document. getElementById("Test ").style.width="100px" ),3000); Po spoileriu Atsižvelgiant į pageidavimus, išsamesnis kodas:

Išplėstinis kodas

Kodas: Štai turinys... setTimeout(function())( // Kadrų delsos nustatymas (FF ir IE) var timerResize="first"; frame.onresize = function())( // frame, - Frame pavadinimas (name=frame ) – žr. kodo pradžią if(timerResize!=="first")clearTimeout(timerResize=setTimeout(function())( // Vėlavimas išvalyti perteklinius trigerius); div #Test buvo pakeistas."); / / Įvykio "onresize" apdorojimo turinys; ),20) // Parametras 20(ms) – priklauso nuo norimo reakcijos į pasikartojančius įvykius greičio; // tinka sklandžiam pakeitimui elemento dydžiu, // arba beveik vienu metu keičiant dydį keliais skirtingais procesais ) ),200). setTimeout(function())( //Išbandyti dydžio keitimą. document.getElementById("Test").style.width="100px"; ),3000); setTimeout(function())( //Išbandyti dydžio keitimą. document.getElementById("Test").style.width="200px"; ),7000);

Plotis() .innerWidth() .outerWidth()

Funkcijos grąžina elemento plotį. Be to, naudodami width (), galite nustatyti naują pločio reikšmę. Yra keletas funkcijų naudojimo parinkčių:

width() – elemento plotis, neatsižvelgiant į paminkštinimą ir kraštinės storį.
innerWidth() – elemento plotis, atsižvelgiant į vidinio užpildo dydį.
outerWidth(includeMargin) — elemento plotis, atsižvelgiant į vidinį užpildymą, kraštinę (border-width) ir, jei reikia, išorinį užpildymą (margin).

nustato naują pločio reikšmę į vertė, visiems pasirinktiems elementams

nustato naujo elemento plotį į vertę, kurią pateiks tinkinta funkcija. Funkcija iškviečiama atskirai kiekvienam pasirinktam elementui. Kai iškviečiama, jam perduodami šie parametrai: indeksas— elemento padėtis rinkinyje, vertė— dabartinė elemento pločio reikšmė.

Naudojimo pavyzdžiai:

$("div.content").width() turinys.
$(dokumentas).width()grąžins viso puslapio plotį
$(.content").width(30)nustato pločio reikšmę iki 30 pikselių visiems elementams su klase turinys.
$("div.content").outerWidth()grąžins pirmojo div elemento plotį su klase turinys. Į aukščio vertę bus įtrauktas paminkštinimas ir kraštinės storis
$("div.content").outerWidth(true)panašus į ankstesnį pavyzdį, tačiau pločio vertė taip pat apima užpildymą.

1 pastaba: Naudoti funkciją .width() paprastai yra patogiau nei .css("width"), nes jos grąžinamoje reikšmėje nėra galūnės "px". Tai yra, pirmuoju atveju gausite 30, o antruoju - „30 pikselių“.

Užrašas 2: Svarbu pažymėti, kad naudojant .width(name) metodą, gausite tik pirmojo elemento atributų reikšmes iš visų pasirinktų. Jei jums reikia visų elementų reikšmių, turėtumėte naudoti tokias konstrukcijas kaip .map() arba .each() .

Veikiant

Padidinkite visų antrosios eilutės elementų plotį 10 pikselių.

~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( paraštė: 10px; ) .item( float: left; aukštis:20px; paraštė: 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~ Aukštas ~lt~/li ~gt~ ~lt~li class="item iioo" style="width:75px"~gt~ Greitas ~lt~/li ~gt~ ~lt ~li class="item" style="width:90px"~gt~ Stiprus ~lt~/li ~gt~ ~lt~/ul~gt~ ~lt~br~gt~ ~lt~ul id="list2" ~gt~ ~lt~li class="item" style="width:60px"~gt~ Virš ~lt~/li ~gt~ ~lt~li class="item" style="width:75px"~gt~ Greitesnis ~lt~/li ~gt~ ~lt~li class="item" style="width:90px"~gt~ Stipresnis ~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~

Elementų mastelio keitimas (keisto dydžio sąveika)

Keičiamo dydžio sąveika prie elemento prideda rankenėlių, kurias perkeldamas vartotojas gali keisti elemento mastelį keisdamas jo dydį. Kai kurios naršyklės automatiškai suteikia šią galimybę teksto sritims, tačiau keičiamo dydžio sąveika suteikia šią mastelio keitimo galimybę bet kuriam dokumento elementui. Tokio tipo sąveikos, kuri įgyvendinama naudojant resizable() metodą, pavyzdys pateikiamas toliau:

„jQuery“ vartotojo sąsaja #astor, #lily (teksto lygiavimas: centre; plotis: 150 pikselių; plūduriavimas: kairėn; paraštė: 20 pikselių) #astor img, #lily img (ekranas: blokas; paraštė: automatinis) $(function() ( $( "#astor").resizable(( taip patKeisti dydį: "#astor img" )); Astra .png" /> Lily .png" /> Vykdyti pavyzdį

Šiame pavyzdyje sukuriami du div elementai, kurių kiekviename yra img elementas ir tekstas. Scenarijuje pasirenkamas vienas iš jų ir jam taikomas resizable() metodas (naudojant parametrą alsoResize, kuris bus aprašytas vėliau). JQuery vartotojo sąsajos biblioteka prie pasirinkto elemento prideda manipuliatorių, leidžiantį keisti vertikalius ir horizontalius elemento matmenis, kaip parodyta paveikslėlyje. Paveiksle elementas parodytas padidintu aukščiu ir sumažintu pločiu:

Keičiamo dydžio sąveikos nustatymas

Norėdami sukonfigūruoti keičiamo dydžio sąveiką, naudokite toliau pateiktoje lentelėje aprašytas ypatybes. Keičiamo dydžio sąveika priklauso nuo „Draggable“ sąveikos. Tai reiškia, kad be nustatymų, pateiktų lentelėje, galite naudoti „Draggable“ sąveikos nustatymus, įskaitant delsą, atstumą, tinklelį ir sulaikymą.

Keičiamo dydžio sąveikos savybės Savybės aprašymas
taip pat Keisti dydį Parinkiklis, naudojamas elementams, kurių dydis turėtų būti pakeistas tuo pačiu metu, kaip ir elemento, kuriam taikoma keičiamo dydžio sąveika, parinkti. Numatytoji reikšmė yra false, o tai reiškia, kad tokių elementų nėra
AspectRatio Jei ši parinktis teisinga, elemento dydis bus pakeistas išlaikant formato santykį. Numatytoji reikšmė yra tiesa
automatinis slėpimas Jei ši parinktis nustatyta kaip tiesa, tada rankenos bus matomos tik tada, kai pelės žymeklis yra virš elemento. Numatytoji vertė yra klaidinga
vaiduoklis Jei ši parinktis teisinga, pakeitus elemento dydį bus matomi pusiau permatomi kontūrai, nurodantys naujus elemento matmenis. Numatytoji reikšmė yra tiesa
rankenos Nustato, kur bus manipuliatoriai. Palaikomos vertės pateikiamos žemiau
maksimalus ūgis Apibrėžiamas maksimalus aukštis, iki kurio galima pakeisti elemento dydį. Numatytoji reikšmė yra null, o tai reiškia, kad nėra jokių apribojimų
maxWidth Apibrėžiamas maksimalus plotis, iki kurio galima pakeisti elemento dydį. Numatytoji vertė yra nulinė
minAugtis
minWidth Apibrėžiamas minimalus aukštis, iki kurio galima pakeisti elemento dydį
Kitų elementų dydžio keitimas tuo pačiu metu

Mano nuomone, dažniausiai naudojama parinktis, kai nustatomos keičiamo dydžio sąveikos, yra parinktis alsoResize. Su jo pagalba galite apibrėžti papildomus elementus, kurių dydžiai keisis kartu su elemento, kuriam buvo pritaikytas resizable() metodas, dydžiais. Šią parinktį naudoju daugiausia siekdamas užtikrinti, kad elementų dydis būtų keičiamas sinchroniškai su pirminių elementų dydžiais.

Šią funkciją jau naudojome ankstesniame pavyzdyje, apibrėždami vienu metu keičiamą img ir div elementų dydį. Pirmiausia pažiūrėkime, kas atsitiks, jei nenaudojama parinktis alsoResize. Atitinkamas kodas parodytas toliau pateiktame pavyzdyje:

$(function() ( $("#astor").keisti dydį(); ));

Jei parinktis alsoResize nenaudojama, keičiami tik div elemento matmenys. Jame esančių elementų matmenys nesikeičia. Kas atsitiks, parodyta paveikslėlyje:

Kartais tai yra būtent tokio rezultato, kokio norite, bet asmeniškai aš naudoju parinktį alsoResize beveik visais atvejais, kai naudoju keičiamo dydžio sąveiką. Man patinka ši parinktis, kad tinkamų elementų pasirinkimas nėra ribojamas elemento, kurio dydis keičiamas, turinys. Naudodami šią parinktį galite nurodyti bet kurį kitą elementą, kaip parodyta toliau pateiktame pavyzdyje:

$(function() ( $("#astor").resizable(( taip patKeisti dydį: "img, #lelija" )); ));

Pagal šį scenarijų elementų pasirinkimas išplečiamas įtraukiant kitus div ir img elementus. Tokiu būdu, kai pakeisite vieno div elemento dydį, jQuery vartotojo sąsaja pakeis keturių elementų dydį iš karto. Rezultatas parodytas paveikslėlyje:

Elementų dydžio keitimo leistinų ribų ribojimas

Galite apriboti keičiamo dydžio elementų dydžio ribas naudodami maxHeight, maxWidth, minHeight ir minWidth parinktis. Šių parinkčių reikšmės gali būti skaičiai, išreiškiantys pikselių skaičių, arba nulis. Žemiau pateiktas šių nustatymų naudojimo pavyzdys.