Sukurti „Auto-Resizing Elements“ su „Scalable.js“

Jei reikia padaryti lanksčius elementus, kurie automatiškai užpildo savo konteinerius Aš labai rekomenduoju keisti. Šis nemokamas atviro kodo JS scenarijus puikiai tinka skysto dizaino kūrimui be daug streso.

Viskas Scalable.js bibliotekoje yra kaliojo, kad galėtumėte pakeisti kiekvieno konteinerio stilių, dydį, padėtį ir vidinį turinį. Reikia elementų, suderintų su puslapio viršuje ar apačioje? Scalable tam turi galimybių.

Pažvelkite į „GitHub“ repo, kad sužinotumėte daugiau apie tai, kaip tai veikia.

Pagrindiniu formatu šis scenarijus užima tikslinio puslapio elementą ir kai kurias ekrano pritaikymo parinktis. Štai keletas pavyzdžių, paimtų tiesiai iš „GitHub“:

var scalable = new Scalable (konteinerisEl, parinktys);

Natūralu, kad pirmasis parametras yra tas, kurį nukreipiate į konteinerį (geriausia a

ar kažkas panašaus).

Parametrų parametras turi būti raktų => vertės porų masyvas. Šios parinktys apima konteinerio aukščio reikšmės, min ir maksimalūs plotiai, min. ir maksimalios skalės (ty kiek jis gali skaluoti su vidiniais elementais).

Pažvelkite į pagrindinį projekto puslapį, kad galėtumėte naudoti demo. Jūs galite vilkti konteinerio kampus, kad automatiškai pakeistų lankstų elementą. Tai gana kietas, nes žemiau šios srities rasite tinkamas kodas tiesiogiai iš puslapio.

Yra būdų, kaip elgtis su lanksčiais elementais tik su švariu CSS. Tačiau šie metodai gali jaustis pasenę ir jie nesuteikia tiek daug kontrolės kaip „JavaScript“.

Jei norite tai išbandyti, paimkite „GitHub“ kopiją ir pažiūrėkite, ką manote.

Scalable vis dar aktyviai vystosi, tačiau tai yra lengvas scenarijus, kurį galite redaguoti pagal savo poreikius.