JQuery-laajennus näytön tilaa optimaaliseen käyttöön
Optimoimalla kuinka tilaa käytetään näytöllä on keskeinen osa hyvän web-suunnittelun ja varsinkin reagoivan suunnittelun.
On monia tapoja lähestyä tällaisia haasteita, ja yksi suosituimmista on elementtien automaattinen järjestäminen vanhemman kontin sisällä. Se on tehokas ja hyvin suoritettu, luo ulkoasun, joka on sekä visuaalisesti houkutteleva että toiminnallisesti optimaalinen.
Jos suunnittelet reagoivaa sivustoa, melkein varmasti löydät tarpeen muuttaa sisältöä dynaamisesti käyttäjän laitteiden näytön koon mukaan. Sisällön automaattinen järjestely on järkevää, koska se minimoi kunkin sivun ja kunkin elementin raja-arvojen mukauttamisen.
Sivustot, joissa on jatkuvasti muuttuvaa sisältöä (kuten blogeja tai verkkokauppoja), voivat hyötyä erityisesti automaattisesta järjestelystä. Loppujen lopuksi haluatko todella mennä asiakkaan sivuston koodiin ja sätä rajapisteitä ja ulkoasua, jos he yhtäkkiä päättävät aloittaa kirjoittamisen lyhyemmät tai lyhyemmät blogiviestit?
Kaikkien tämän tekeminen tyhjästä on aikaa vievää ja sen lisäksi, että useimmat suunnittelijat eivät ole kehittäjiä. Sen sijaan on järkevää käyttää olemassa olevaa laajennusta tai kehystä.
JavaScript (mukaan lukien jQuery ja muut kirjastot) on yleisin tapa luoda tällainen ulkoasu, todennäköisesti sen laajan ristikkokelpoisuuden vuoksi. Näin nykyiset ponnistelut kuten vGrid, Wookmark ja muuraustyöt toimivat.
Freetile.js on äskettäinen jQuery-laajennus, joka mahdollistaa tämän tyyppisen dynaamisen, organisoidun ja reagoivan ulkoasun. Se on ollut moottorina Assemblage and Assemblage Plus -ohjelman takana lähes kaksi vuotta, ja se on nyt saatavilla itsenäisenä avoimen lähdekoodin projektina.
Se eroaa nykyisistä ponnisteluista tässä tilassa muutamasta syystä. Sallii minkä tahansa kokoisten elementtien käyttäminen ilman kiinteän kokoisen saraketjun tarvetta. Tämä vapauttaa sinut siitä, että sinun on määritettävä elementtisi sopiva sarakkeen leveys. Ja voit mukauttaa algoritmia, joka arvioi kunkin elementin mahdolliset lisäyskohdat, joten voit ilmaista asetuksia, kuten kohdistusta ja läheisyyttä.
Siinä on älykkäät animaatiorutiinit, joiden avulla on helppo erottaa elementit, jotka pitäisi animoitua ja joiden ei pitäisi olla. Animaation määrittäminen koodissa on myös helppoa.
Freetile.js: n käyttö on helppokäyttöinen. Vaikka sinulla ei olisi JavaScript-osaamista, sinun pitäisi pystyä selvittämään sen käyttö melko nopeasti.
Freetile.js on lisensoitu BSD-lisenssin alla, ja se on saatavana GitHubin kautta.
Oletko käyttänyt Freetile.js: tä? Mitä rakensi? Jaa kokemuksesi kommentteihin.