Tässä artikkelissa ohjeistetaan Barebones-teeman työkalut joiden avulla voit järjestää sisältöä verkkokaupassa välilehtien alle.
Barebones-teema poistuu.
Teeman kehittäminen on lopetettu, ja kaikki sen sisältämät työkalut tullaan poistamaan käytöstä.
Jatkossa MyCashflow'n oletusteemana toimii Fluid-teema, jonka ulkoasua ja toimintoja on helppo mukauttaa graafisen käyttöliittymän avulla käyttämällä teema-asetuksia.
Välilehtien luontiin käytetään oletusteeman tabs.js-pluginia.
Plugin vaatii jQueryn toimiakseen. Voit lisätä jQueryn teemaan käyttämällä {SupportScripts}
-tagia.
Oletusteemoihin jQuery on lisätty valmiiksi.
Löydät pluginin oletusteeman tiedostosta /scripts/plugins/tabs.js.
Välilehtien ulkoasu määritellään seuraavissa tiedostoissa:
- /styles/scss/modules/_tabs.scss
- /styles/scss/modules/_navigations.scss
Plugin otetaan käyttöön alustamalla se komennolla MCF.Tabs.init(). Kun plugin on alustettu, se muuttaa määrätyllä tavalla muotoillut elementit automaattisesti välilehtiosioiksi. Oletusteemassa tabs.js-plugin on valmiiksi alustettu.
Alla näet esimerkin pluginin vaatimasta HTML-merkkauksesta:
<div class="TabsNavigation">
<ul>
<li class="Current"><a href="#Tab1">Ensimmäinen välilehti</a></li>
<li><a href="#Tab2">Toinen välilehti</a></li>
</ul>
</div>
<div class="Tabs">
<div class="Tab Current" id="Tab1">
<h2>Ensimmäisen välilehden sisältö</h2>
</div>
<div class="Tab" id="Tab2">
<h2>Toisen välilehden sisältö</h2>
</div>
</div>
Välilehtien otsikot määritellään <ul>
-elementissä .TabsNavigation
-osiossa. Jokainen välilehti on .Tab
-elementti .Tabs
-osiossa. Välilehtien otsikot kohdistetaan sisältöihin otsikoiden linkkien ja sisältöjen id-attribuuttien perusteella.
Luokkanimellä Current asetetaan oletusarvoisesti aktiivinen välilehti. Huomaa että luokkanimi pitää antaa sekä välilehden otsikkona toimivalle <li>
-elementille että välilehden sisällölle (.Tab
).