Sistem 

Ölçmə elementləri. Elementdə “onresize” monitorinqi Digər elementlərin eyni vaxtda ölçüsünün dəyişdirilməsi

Elementin enini qaytarır və təyin edir.

  • versiya əlavə edildi: 1.0.width()

    Qaytarır: Tam ədəd

    Elementin enini alır

  • versiya əlavə edildi: 1.0.en(dəyər)

    Növ: Sim və ya Nömrə

    Qaytarır: jQuery

    Piksellərin sayını təmsil edən tam ədəd və ya sətir vahidi olan ədəd.

  • versiya əlavə edildi: 1.4.1.width(funksiya (indeks, en))

    funksiya (indeks, en)

    Növ: Funksiya

    Qaytarır: jQuery

    Yenisini təyin etmək üçün eni qaytaran funksiya. Elementin çoxluqdakı mövqe indeksini və köhnə genişlik dəyərini alır. Funksiya cari elementə aiddir.

.css("en") və .width() arasındakı fərq bu metodun yalnız rəqəmli dəyəri qaytarmasıdır (məsələn, 400 piksel deyil, 400). Nəticə dəyərin riyazi hesablamalarda istifadə edilməsi lazım olduqda The.width() metodundan istifadə etmək tövsiyə olunur.

Bu üsuldan sənədin və pəncərənin genişliyini əldə etmək olar.

$(pəncərə).width(); $(sənəd).width();

Qeyd edək ki, .width() metodu CSS qutusunun ölçüsünün dəyərindən asılı olmayaraq həmişə məzmunun enini qaytarır. jQuery 1.8-dən etibarən siz qutu ölçüsü xassəsinin dəyərini almalı, sonra haşiyənin və dolğunluğun ölçüsünü çıxarmalısınız. Bütün bunlar elementə box-sizing: border-box xassəsi tətbiq edilərsə. Bu hesablamalardan qaçmaq üçün .css("width") istifadə edin.

Siz .width(value) metoduna sətir və ya rəqəm ötürə bilərsiniz. Yalnız bir rəqəm keçərsə, jQuery avtomatik olaraq "px" əlavə edir. Bir xətt varsa, o zaman belə görünməlidir: 100px, 50% və ya avtomatik. Nəzərə alın ki, müasir brauzerlərdə genişliyə padding və sərhəd dəyərləri daxil deyil.

Nümunələr:

Nümunə: Element genişliklərindəki fərqləri göstərin. Elementlər iframe-də olduğundan, faktiki ölçülər bir qədər fərqli ola bilər.

eni demo gövdəsi ( fon:sarı; ) düyməsi ( şrift ölçüsü:12px; kənar:2px; ) p ( eni:150px; haşiyə:1px qırmızı bərk; ) div (rəng:qırmızı; şrift-ağırlıq:qalın; ) Paraqrafı əldə edin Genişlik Sənədin eni Pəncərənin eni alın

Genişliyi yoxlamaq üçün nümunə paraqraf

function showWidth(ele, w) ( $("div").text("" + ele + " üçün eni " + w + "px."); ) $("#getp").click(funksiya). () ( showWidth("paraqraf", $("p").width()); )); $("#getd").click(funksiya () ( showWidth("sənəd", $(sənəd).width()); )); $("#getw").click(funksiya () ( showWidth("window", $(window).width()); ));

Nümunə: Div elementlərinə klikləyərkən müxtəlif genişlikləri təyin edin.

eni demo div ( en: 70px; hündürlük: 50px; float:sol; kənar: 5px; fon: qırmızı; kursor: göstərici; ) .mod ( fon: mavi; kursor: default; ) d d d d (funksiya() ( var modWidth = 50; $("div").one("klik", funksiya () ( $(bu).width(modWidth).addClass("mod"); modWidth -= 8; ))();

jQuery DOM Metodlarının Tərifi və Tətbiqi

jQuery-nin .width() metodu uyğunlaşdırılmış elementlər dəstindəki birinci element üçün hazırda hesablanmış eni alır və ya hər bir uyğun elementin enini təyin edir.

Nəzərə alın ki, .css metodları arasındakı fərq (" eni") və .width() ondan ibarətdir ki, sonuncu vahidləri göstərmədən dəyər qaytarır, birincisi isə dəyəri qaytarır. piksel(aşağıdakı nümunə).

Riyazi hesablamada elementin enindən istifadə etmək lazım olduqda jQuery-nin .width() metodu tövsiyə olunur. Elementin hündürlüyünü hesablamaq üçün .height() metodundan istifadə edin.

jQuery-nin .width() metodu həmçinin pəncərə və ya sənədin enini tapa bilər:

$(sənəd).width() // HTML sənədinin enini qaytarır $(window).width() // brauzerin baxış pəncərəsinin enini qaytarır

jQuery-nin .width() metodunun element və ya onun əsas elementi gizlədildiyi zaman dəqiqliyinə zəmanət verilmir. Dəqiq dəyər əldə etmək üçün metoddan istifadə etməzdən əvvəl elementin göründüyünə əmin olun. jQuery ölçülərini ölçmək üçün elementi müvəqqəti olaraq göstərməyə və sonra yenidən gizlətməyə çalışacaq, lakin bu üsul etibarlı deyil və səhifə performansına təsir edə bilər. Bu tip ölçmə funksiyası jQuery kitabxanasının gələcək versiyasında silinə bilər.

Versiyadan üsul jQuery 1.8 hansı en və hündürlük hesablama modelindən (content-box , və ya border-box xassələri box-sizing ) istifadə olunmasından asılı olmayaraq elementin enini hesablayır və qaytarır. Yəni, üsul sərhədləri və doldurmanı çıxaracaq. Əgər bununla qane deyilsinizsə, o zaman .css metodundan istifadə edin (" eni"). İki modelin və bu metodların müqayisəsi nümunəsi aşağıda təqdim olunur.

jQuery sintaksisi: Qaytarılan dəyərlər: Sintaksis 1.0: $(seçici ).width() // parametrlərsiz istifadə edilən metod Dəyərlərin qurulması: Sintaksis 1.0: $(selector).width( dəyər) dəyər- Sətir (ixtiyari vahidlərdə dəyər) və ya Tam (pikseldə dəyər) Sintaksis 1.4.1: $(selektor ).width(funksiya () indeks, cari dəyər)) indeks- Tam cari dəyər- Tam. jQuery 1.0-da əlavə edildi (sintaksis 1.4.1-də yeniləndi) Parametr dəyərləri Nümunə istifadə jQuery .width() metodundan istifadə (dəyəri qaytarma) konsolu .log($("p").css("width")); //.css() metodundan istifadə etməklə

konsol .log($("p").width()); // the.width() metodundan istifadə edərək brauzer konsolunda birinci elementin enini qaytarırıq və göstəririk

konsol .log($(sənəd).width()); // brauzer konsolunun konsolunda HTML sənədinin enini qaytarır və göstərir .log($(window).width()); // brauzer konsolunda brauzerin baxış pəncərəsinin enini qaytarır və göstərir ) ); ) ); ağla

Adi paraqraf

İkinci adi abzas

  • .css() brauzer konsolunda birinci elementin enini qaytarır və göstərir

    .

  • jQuery .width() metodundan istifadə edərək brauzer konsolunda birinci elementin enini qaytarırıq və göstəririk

    , HTML sənədinin eni və brauzerin baxış pəncərəsinin eni.

Nümunəmizin nəticəsi:

Məzmun qutusu və sərhəd qutusu elementlərinin eni və hündürlüyünü hesablamaq üçün modellərdən istifadə edərkən .width() metodu ilə .css() metodu arasındakı fərqə baxacağımız aşağıdakı nümunəni nəzərdən keçirin:

jQuery-nin .width() metodundan istifadə (content-box və border-box modelləri)

.test1 ( qutu ölçüsü : məzmun qutusu ; /* standart model (yalnız elementin məzmununu ehtiva edir) */ eni : 200px ; /* elementin eni */ doldurma : 10px ; haşiyə : 10px bərk yaşıl ; ) .test2 ( qutu- sizing : border-box ; /* border-box modeli (element məzmunu, haşiyələr və padding daxildir) */ width : 200px ; /* element width */ padding : 10px /* padding on all sides * / border : 10px solid green ; /* 10px tam yaşıl haşiyə */ )

$(sənəd).ready(funksiya ()( $("düymə").click(funksiya ()( // element klikləndikdə funksiyanı təyin edin console .log($(".test1 ").css("width ") ); // class.test1 konsolu ilə.css() metodundan istifadə etməklə .log($(".test1 ").width()); // the.width() metodundan istifadə edərək eni qaytarırıq və göstəririk brauzer konsolunda olan elementin .test1 konsolu .log($(".test2 ").css("width ") // .css() metodundan istifadə edərək enini qaytarırıq .test2 konsollu element .log($(" .test2 ").width()); // brauzer konsolunda .test2 sinifli elementin enini qaytarır və göstərir ) ) ); ağla

Adi paraqraf

Adi paraqraf

Bu nümunədə, bir düyməni tıkladığımızda:

  • jQuery .css() metodundan istifadə edərək biz brauzer konsolunda element eni dəyərini qaytarırıq və göstəririk

    siniflə test 1 Və test2. Nəzərə alın ki, elementlərin hansı modeldən istifadə etməsindən asılı olmayaraq, nəticə eyni olacaq.

  • jQuery .width() metodundan istifadə edərək biz brauzer konsolunda elementin eni dəyərini qaytarırıq və göstəririk

    siniflə test 1 Və test2. Nəzərə alın ki, ikinci halda elementin olduğu yer

    sərhəd qutusu modelindən istifadə edir, çıxış dəyəri həm elementin haşiyəsini, həm də dolğunluğunu daxil etmir. Sərhəd qutusu metodundan istifadə edərkən bu metodla .css() metodu arasındakı fərq budur.

Nümunəmizin nəticəsi:

.width() funksiyasını qaytarmaq əvəzinə genişlik dəyərlərini təyin edəcəyik.

jQuery .width() metodundan istifadə (dəyərləri təyin etmək)

p (fon rəngi: narıncı; )

$(sənəd).ready(funksiya ()( $("button").click(funksiya ()( // elementə kliklədikdə funksiyanı təyin edin $(".test1 ").width(150 ); // set test1 sinifli elementlərin eni piksellə $(".test2 ").width("35% " // test2 sinifli elementlərin enini faizlə təyin edin ) ); ağla

Adi paraqraf

Adi paraqraf

Adi paraqraf

Adi paraqraf

Bu misalda düyməyə basıldıqda elementlərin enini təyin etmək üçün jQuery-nin .width() metodundan istifadə edirik.

siniflə test 1 bərabərdir 150 piksel, və siniflə elementlər test2 eni bərabərdir 35% ana elementdən.

Nəzərə alın ki, piksellərdən başqa bir dəyər göstərsəniz (vahidlər göstərilmədən), dəyər sətir kimi ötürülməlidir.

Nümunəmizin nəticəsi:

Funksiyanı .width() metoduna parametr kimi ötürəcəyimiz aşağıdakı nümunəni nəzərdən keçirək.

jQuery .width() metodundan istifadə (parametr kimi funksiya)

div (fon rəngi: sarı; /* fon rəngini təyin edin */)

$(sənəd).ready(funksiya ()( $("div").click(funksiya ()( // element klikləndikdə funksiyanı təyin edin $(bu ).width(funksiya () indeks, cari dəyər)( // müəyyən bir element qaytarılması üzərinə kliklədikdə funksiyanı təyin edin cari dəyər- 50; // elementin eninin yeni dəyərini qaytarın (cari dəyər mənfi 50 piksel) ) ); ) ); ) ); ağla

Bu misalda biz funksiyanı parametr kimi .width() metoduna ötürdük ki, o, kliklənmiş elementin eni üçün yeni dəyər təyin edir. Bizim vəziyyətimizdə elementin yeni eni elementin cari eni minus kimi hesablanır 50 piksel.

Nümunəmizin nəticəsi:

.resize() metodundan və .width() metodundan istifadə edərək brauzerin baxış pəncərəsinin enini izləyəcəyik və dəyişdikdə müəyyən fon rəngini təyin edəcəyimiz aşağıdakı nümunəni nəzərdən keçirək.

Pəncərənin enini dəyişdirərkən jQuery-nin .width() metodundan istifadə $(sənəd).ready(funksiya ()( $(window).resize(funksiya ()) $(bu ).width() 1000 && $(bu ).width() > 800) ( // Görünüş pəncərəsinin eni 1000 pikseldən az və 800 pikseldən böyükdürsə $("bədən").css("background- color ", "sarı " ); // fon rəngini sarıya təyin edin ) else if ($(bu ).width() 800 && $(bu ).width() > 600) ( // Görünüş pəncərəsinin eni azdırsa 800 pikseldən və 600 pikseldən çox $( "body ").css("background-color ", "green" // fon rəngini yaşıl rəngə təyin edin ) else ( // şərtlərdən heç biri yerinə yetirilmədikdə $(); "body ").css("background-color " , "mavi" // fon rəngini mavi təyin edin ) ); Pəncərənin ölçüsünü dəyişməyə çalışın

Bu misalda .resize() metodundan və .width() metodundan istifadə edərək biz brauzerin baxış pəncərəsinin enini izləyirik və o dəyişdikdə elementə xüsusi fon rəngi təyin edirik. 1000 piksel və daha çox 800 piksel sarı. Görünüş sahəsinin eni daha kiçikdirsə 800 piksel və daha çox 600 piksel, sonra fon rəngi təyin olunacaq yaşıl, digər hallarda fon rəngi təyin olunacaq mavi.

Nəzərə alın ki, səhifə yükləndikdə rəng olacaq ağ, çünki funksiya yalnız pəncərə ölçüsü dəyişdirildikdə işləyəcək (jQuery .resize() metodu).

Nümunəmizin nəticəsi.

Səhifədə ixtiyari elementin ölçüsünün dəyişdirilməsi hadisəsini izləmək üçün kifayət qədər qədim bir vəzifə. Səhifədə istədiyiniz elementin ölçülərini və digər CSS atributlarını, xüsusən də dövri Ajax yüklənməsi olan blokları (məsələn: xəbərlər) tənzimləmək üçün modul müstəqil struktur yaratarkən aktualdır. Adətən element ölçülərinin vaxtı və dövri sorğusu ilə həll edilir. Vaxt təyin edilmiş sorğudan istifadə etməyən yeni seçim.

Hiylə: Elementin içərisinə mövqe: mütləq və 100% ölçüləri olan boş çərçivə daxil edin, elementin mövqeyini verin: nisbi; . Frame.onresize faylını izləyin:

Test Kodu: Məzmun budur... frame.onresize = function())( alert("#Test div ölçüsü dəyişdirildi."); ) setTimeout(function())( //3 saniyədən sonra ölçü dəyişdirmə testi. sənəd. getElementById("Test").style.width="100px"; 3000); Arzuları nəzərə alaraq spoyler altında daha ətraflı kod:

Genişləndirilmiş kod

Kod: Məzmun budur... setTimeout(function())( // Çərçivə gecikməsinin işlənməsi (FF və IE üçün) var timerResize="first"; frame.onresize = function())( // çərçivə, - Frame ad (name=frame ) - kodun başlanğıcına baxın if(timerResize!=="first")clearTimeout(timerResize=setTimeout(function())( // Həddindən artıq tetikleyicileri silmək üçün gecikmə; div #Test ölçüsü dəyişdirildi."); / / "onresize" hadisəsinin işlənməsinin əsas hissəsi; ),20) // Parametr 20(ms) - təkrar hadisələrə istənilən reaksiya sürətindən asılıdır; // hamar dəyişikliklər üçün uyğundur elementin ölçüsündə, // və ya bir neçə fərqli proseslə demək olar ki, eyni vaxtda ölçüsünün dəyişdirilməsi ) ),200); setTimeout(funksiya())( //Ölçü dəyişdirilməsini sınayın. document.getElementById("Test").style.width="100px"; ),3000); setTimeout(funksiya())( //Ölçü dəyişdirmə testi. document.getElementById("Test").style.width="200px"; ),7000);

Width() .innerWidth() .outerWidth()

Funksiyalar elementin enini qaytarır. Bundan əlavə, width() funksiyasından istifadə edərək yeni enlik dəyəri təyin edə bilərsiniz. Funksiyalardan istifadə etmək üçün bir neçə variant var:

width() — padding və haşiyə qalınlığı nəzərə alınmadan elementin eni.
innerWidth() — daxili doldurmanın ölçüsünü nəzərə alan elementin eni.
outerWidth(includeMargin) — elementin eni, daxili doldurma, haşiyə (sərhəd eni) və lazım gələrsə, xarici doldurma (margin) nəzərə alınmaqla.

yeni eni dəyərini təyin edir dəyər, bütün seçilmiş elementlər üçün

yeni element enini xüsusi funksiyanın qaytaracağı dəyərə təyin edir. Funksiya seçilmiş elementlərin hər biri üçün ayrıca çağırılır. Zəng edildikdə, ona aşağıdakı parametrlər ötürülür: indeks- elementin çoxluqdakı mövqeyi, dəyər— elementin eninin cari dəyəri.

İstifadə nümunələri:

$("div.content").width() məzmun.
$(sənəd).width()bütün səhifənin enini qaytaracaq
$(".content").width(30)sinifi olan bütün elementlər üçün genişlik dəyərini 30 pikselə təyin edir məzmun.
$("div.content").outerWidth()birinci div elementinin enini siniflə qaytaracaq məzmun. Hündürlük dəyərinə padding və haşiyə qalınlığı daxildir
$("div.content").outerWidth(doğru)əvvəlki nümunəyə bənzəyir, lakin genişlik dəyərinə padding də daxil olacaq.

Qeyd 1: .width() funksiyasından istifadə adətən .css("width") funksiyasından daha rahatdır, çünki onun qaytardığı dəyər "px" sonunu ehtiva etmir. Yəni, birinci halda 30, ikincidə isə "30px" alacaqsınız.

Qeyd 2: Qeyd etmək vacibdir ki, .width(name) metodundan istifadə etməklə siz bütün seçilmiş elementlərin yalnız birinci elementinin atribut dəyərlərini əldə edəcəksiniz. Əgər bütün elementlərin dəyərlərinə ehtiyacınız varsa, o zaman .map() və ya .each() kimi konstruksiyalardan istifadə etməlisiniz.

Fəaliyyətdə

İkinci sıradakı bütün elementlərin enini 10 piksel artırın.

~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( kənar: 10px; ) .item( float: sol; hündürlük: 20px; kənar: 1px; doldurma: 3px; fon rəngi: #eee; siyahı üslubu -type:none; ) ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~ul id="list"~gt~ ~lt~li class="item" style="width:60px"~gt~ Yüksək ~lt~/li ~gt~ ~lt~li class="item iioo" style="width:75px"~gt~ Sürətli ~lt~/li ~gt~ ~lt ~li class="item" style="width:90px"~gt~ Güclü ~lt~/li ~gt~ ~lt~/ul~gt~ ~lt~br~gt~ ~lt~ul id="list2" ~gt~ ~lt~li class="item" style="width:60px"~gt~ Yuxarıda ~lt~/li ~gt~ ~lt~li class="item" style="width:75px"~gt~ Daha sürətli ~lt~/li ~gt~ ~lt~li class="item" style="width:90px"~gt~ Daha güclü ~lt~/li ~gt~ ~lt~/ul~gt~ ~lt~script~ gt~ $("#list2 .element").width(funksiya(i,val)( qaytarmaq val+10; )); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

Ölçəkləmə elementləri (Ölçü dəyişdirilə bilən qarşılıqlı əlaqə)

Ölçü dəyişdirilə bilən qarşılıqlı əlaqə elementə tutacaqlar əlavə edir ki, onları köçürməklə istifadəçi ölçüsünü dəyişdirərək elementi miqyaslandıra bilər. Bəzi brauzerlər avtomatik olaraq mətn sahələri üçün bu qabiliyyəti təmin edir, lakin Ölçü dəyişdirilə bilən qarşılıqlı əlaqə sənəddəki hər hansı element üçün bu miqyaslaşdırma qabiliyyətini təmin edir. Resizable() metodundan istifadə etməklə həyata keçirilən bu tip qarşılıqlı əlaqənin nümunəsi aşağıda verilmişdir:

jQuery UI #astor, #lily (mətn hizalanması: mərkəz; en: 150px; float: sol; kənar: 20px) #astor img, #lily img (ekran: blok; kənar: avtomatik) $(function() ( $() "#astor").resizable(( həmçininResize: "#astor img" )); Astra .png" /> Lily .png" /> Məsələni işə salın

Bu nümunə hər birində img elementi və mətn olan iki div elementi yaradır. Skriptdə onlardan biri seçilir və ona resizable() metodu tətbiq olunur (sonra təsvir olunacaq alsoResize parametrindən istifadə etməklə). jQuery UI kitabxanası seçilmiş elementə şəkildə göründüyü kimi elementin şaquli və üfüqi ölçülərini dəyişməyə imkan verən manipulyator əlavə edir. Şəkildə element artan hündürlüyü və azaldılmış eni ilə göstərilir:

Ölçü dəyişdirilə bilən qarşılıqlı əlaqənin qurulması

Ölçü dəyişdirilə bilən qarşılıqlı əlaqəni konfiqurasiya etmək üçün aşağıdakı cədvəldə təsvir olunan xassələrdən istifadə edin. Resizable-in qarşılıqlı əlaqəsi Draggable-ın qarşılıqlı əlaqəsindən asılıdır. Bu o deməkdir ki, cədvəldə göstərilən parametrlərə əlavə olaraq siz Draggable-ın gecikmə, məsafə, şəbəkə və saxlama daxil olmaqla qarşılıqlı əlaqə parametrlərindən istifadə edə bilərsiniz.

Ölçü dəyişdirilə bilən qarşılıqlı əlaqə xüsusiyyətləri Əmlakın təsviri
həmçinin ölçüsünü dəyişdirin Ölçü dəyişdirilə bilən qarşılıqlı əlaqənin tətbiq olunduğu elementlə eyni vaxtda ölçüsü dəyişdirilməli olan elementləri seçmək üçün istifadə edilən seçici. Varsayılan dəyər yanlışdır, yəni belə elementlər yoxdur
aspekt nisbəti Bu seçim doğrudursa, aspekt nisbəti saxlanılmaqla elementin ölçüsü dəyişdiriləcək. Defolt dəyər doğrudur
avtomatik Gizlət Bu seçim doğru olaraq təyin edilərsə, tutacaqlar yalnız siçan göstəricisi elementin üzərində olduqda görünəcək. Defolt dəyər yanlışdır
kabus Bu seçim doğrudursa, elementin ölçüsü dəyişdirildikdə elementin yeni ölçülərini göstərmək üçün yarı şəffaf konturlar görünəcək. Defolt dəyər doğrudur
tutacaqlar Manipulyatorların harada yerləşəcəyini müəyyən edir. Dəstəklənən dəyərlər aşağıda verilmişdir
maxHündürlük Elementin ölçüsünün dəyişdirilə biləcəyi maksimum hündürlüyü müəyyən edir. Varsayılan dəyər sıfırdır, yəni heç bir məhdudiyyət yoxdur
maxWidth Elementin ölçüsünün dəyişdirilə biləcəyi maksimum genişliyi müəyyən edir. Defolt dəyər sıfırdır
minHündürlük
minEni Elementin ölçüsünün dəyişdirilə biləcəyi minimum hündürlüyü müəyyən edir
Eyni zamanda digər elementlərin ölçüsünün dəyişdirilməsi

Məncə, Ölçü dəyişdirilə bilən qarşılıqlı əlaqə qurarkən ən çox istifadə edilən seçim alsoResize seçimidir. Onun köməyi ilə siz ölçüləri resizable() metodunun tətbiq olunduğu elementin ölçüləri ilə eyni vaxtda dəyişəcək əlavə elementləri təyin edə bilərsiniz. Mən bu seçimdən əsasən elementlərin ana elementlərinin ölçüləri ilə sinxron şəkildə ölçüsünü dəyişməsini təmin etmək üçün istifadə edirəm.

Biz artıq əvvəlki nümunədə img və div elementlərinin eyni vaxtda ölçülərinin dəyişdirilməsini təyin etməklə bu funksiyadan istifadə etmişik. İlk növbədə, həmçininResize seçimi istifadə edilmədikdə nə baş verdiyinə baxaq. Müvafiq kod aşağıdakı nümunədə göstərilmişdir:

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

Əgər alsoResize seçimi istifadə edilmirsə, onda yalnız div elementinin ölçüləri dəyişdirilir. Tərkibindəki elementlərin ölçüləri dəyişməz olaraq qalır. Nə baş verdiyi şəkildə göstərilir:

Bəzən bu, istədiyiniz nəticədir, lakin şəxsən mən Ölçüləndirilə bilən qarşılıqlı əlaqədən istifadə etdiyim demək olar ki, bütün hallarda alsoResize seçimindən istifadə edirəm. Bu seçimdə mənim xoşuma gələn odur ki, uyğun elementlərin seçimi ölçüsü dəyişdirilən elementin məzmunu ilə məhdudlaşmır. Bu seçimdən istifadə edərək, aşağıdakı nümunədə göstərildiyi kimi hər hansı digər elementi təyin edə bilərsiniz:

$(funksiya() ( $("#astor").resizable(( həmçininResize: "img, #lily" )); ));

Bu ssenaridə element seçimi digər div və img elementlərini daxil etmək üçün genişləndirilir. Bu yolla, bir div elementinin ölçüsünü dəyişdirdiyiniz zaman jQuery UI eyni anda dörd elementin ölçüsünü dəyişəcək. Nəticə şəkildə göstərilir:

Elementlərin ölçüsünü dəyişdirmək üçün icazə verilən məhdudiyyətlərin məhdudlaşdırılması

Siz maxHeight, maxWidth, minHeight və minWidth seçimlərindən istifadə edərək miqyaslana bilən elementlərin ölçü məhdudiyyətlərini məhdudlaşdıra bilərsiniz. Bu seçimlərin dəyərləri piksel sayını ifadə edən rəqəmlər və ya null ola bilər. Bu parametrlərdən istifadə nümunəsi aşağıda göstərilmişdir.