Rakenna reagoivia Tabbed-widgetit GridTabin avulla

Web-sivustojen rakentaminen on aina helpompaa avoimen lähdekoodin työkalut pikemminkin kuin pyörän keksiä. Nämä työkalut vaihtelevat kirjastoista pienempiin laajennuksiin, mutta voit löytää ratkaisun pohjimmiltaan mitä tahansa.

Ilmiömäinen jQuery GridTab-plugin on yksi hieno esimerkki. Sen avulla voit perustaa ruudukko, määritellä katkaisupisteet, ja luo reagoiva välilehti-widget joka sopii mihin tahansa verkkosivustoon.

Voit lisätä omia CSS-luokkia tai työskennellä olemassa olevien kanssa luodaksesi muotoiluun sopivan välilehden. Tämä plugin tukee myös navigointielementit seuraaville / edellisille ohjauksille ja välilehti.

Asennus on helppoa ja vaatii vain jQuery-kirjasto riippuvuutena. Kun se on asennettu, voit napata GridTabin npm: stä tai ladata sen suoraan GitHubista.

Muista, että tämän välilehden widget-pluginissa on a oletustyyli, niin se on erillinen CSS-tyylitaulukko JS-laajennustiedoston päälle. Voit kuitenkin yhdistää tämän CSS: n omaan, jotta voit vähentää HTTP-pyyntöjä.

Voit aloittaa pluginin yksinkertaisesti siirtämällä sen koko ruudukon koko kera mikä tahansa valinnainen parametri (kaikki luetellaan GitHubissa).

Tässä on yksinkertainen alustusskripti:

 $ (asiakirja). jo (toiminto () $ ('# gridtab-1'.) gridtab (grid: 3);); 

Asetukset sisältävät mukautetut valitsimet, reagoivat tyylit, reunus- / pehmuste- / väriasetukset, ja tietenkin a takaisinsoitto-toiminto.

Saatat olla utelias näkemään, miten tämä kaikki toimii ja mitä se näyttää selaimessasi. Tutustu “demoja” osio nähdä a muutamia esimerkkejä, mukaan lukien raaka lähdekoodi voit kopioida.

Useimmat ihmiset ajattelevat välilehtiä pienten profiilien widgetien ominaisuuksiksi. kuitenkin, portfolio-sivustot voi myös hyödyntää ruudut, joissa on välilehtiominaisuudet ja GridTab-plugin on paras resurssi tämän vaikutuksen naulaamiseen.

Kaikki mitä sinun tarvitsee tietää, mukaan lukien täydelliset asiakirjat, löytyy GridTabin tärkeimmältä sivulta. Tähän sisältyy myös linkki GitHub-repoon, jotta voit selata lähteitä ja aloittaa oman reagoivan välilehden räätälöinnin..