Voit näyttää Barebones-teeman työkalujen avulla latausanimaatioita, jotka ovat erityisen hyödyllisiä AJAX-toimintojen suorittamisen aikana. Tässä artikkelissa ohjeistetaan latausanimaatioiden käyttäminen.

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.

Latausanimaatioiden esittämiseen käytetään oletusteeman loaders.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/loaders.js.

Loaderien ulkoasu määritellään tiedostossa /styles/scss/modules/_loaders.scss ja niiden HTML-merkkaus pluginin JavaScript-tiedostossa.

Loader lisää tarvittavan elementin päälle overlay-elementin. Kun haluttu toiminto on suoritettu, overlay voidaan poistaa elementin päältä.

Esimerkiksi kun muutat ostoskorin sisältöä cart.js-pluginin avulla, on usein hyödyllistä käyttää AJAX-kutsujen aikana latausanimaatiota:

MCF.Cart.init({
	beforeAddProduct: function ($buyForm) {
		MCF.Loaders.show($(".MiniCart"));
	},
	afterAddProduct: function ($buyForm) {
		MCF.Cart.updateCart($(".MiniCart"));
		MCF.Loaders.hide($(".MiniCart"));
	}
});

Esimerkissä sijoitetaan ennen pluginin show()-funktion avulla overlay ostoskorin esikatselun päälle, ennen kuin tuote lisätään ostoskoriin. Kun tuote on lisätty, päivitetään ostoskorin sisältö ja poistetaan overlay sen päältä hide()-funktion avulla.