Luo automaattisen koon muuttaminen Scalable.js n avulla

Jos sinun täytyy tehdä joustavia elementtejä, jotka täyttävät automaattisesti säiliönsä Suosittelisin erittäin skaalautuvaa. Tämä ilmainen avoimen lähdekoodin JS-skripti sopii täydellisesti nestemäisen muotoilun luomiseen ilman paljon stressiä.

Scalable.js-kirjastossa kaikki on muokattava, joten voit muuttaa jokaisen säiliön tyyliä, kokoa, sijaintia ja sisäistä sisältöä. Tarvitsetko elementit sivun ylä- tai alaosaan? Skaalautuvilla on vaihtoehtoja.

Tutustu GitHub-repoon saadaksesi lisätietoja siitä, miten tämä toimii.

Tämä skripti ottaa kaikkein perusmuodossaan kohdesivun elementin ja joitakin vaihtoehtoja näytön mukauttamiseksi. Tässä on esimerkkikoodi, joka on otettu suoraan GitHubista:

var scalable = new Skaalautuva (containerEl, asetukset);

Luonnollisesti ensimmäinen parametri on mikä tahansa kohdistusosio, jonka kohdistat (mieluiten a

tai jotain vastaavaa).

Vaihtoehtoparametrin tulisi ottaa joukko näppäintä => arvopareja. Näitä vaihtoehtoja ovat säiliön korkeusarvot, min- ja max-leveydet sekä mini- ja max-asteikot (eli kuinka paljon se voi skaalata sisäisten elementtien kanssa).

Katsokaa pääprojektisivua käyttökelpoisesta demosta. Voit vetää säiliön kulmat automaattisesti joustavan kohteen koon muuttamiseksi sisällä. Tämä on melko viileä, koska tämän alueen alapuolella on käyttökelpoinen koodi otettu suoraan sivulta.

On olemassa tapoja käsitellä joustavia elementtejä vain puhtaalla CSS: llä. Nämä menetelmät voivat kuitenkin tuntua päivinä ja ne eivät tarjoa yhtä paljon valvontaa kuin JavaScript.

Jos haluat kokeilla tätä, ota vain kopio GitHubista ja katso mitä mieltä olet.

Skaalautuva on edelleen aktiivisessa kehityksessä, mutta se on helppo skriptin muokkaaminen tarpeisiisi.