Tässä artikkelissa ohjeistetaan Barebones-teeman työkalut joiden avulla voit järjestää sisältöä verkkokaupassa välilehtien alle.

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:

Oletusteemassa esimerkiksi Klarna-kassan maksutavan valintaosuus on toteutettu tabs.js-pluginin avulla.

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).