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.
Latausanimaatioiden esittämiseen käytetään oletusteeman loaders.js-pluginia. Plugin on erityisen hyödyllinen AJAX-toimintojen yhteydessä, jolloin voit näyttää latausanimaation, kun AJAX-pyyntöä suoritetaan.
Plugin vaatii jQueryn toimiakseen. Voit lisätä jQueryn sivulle käyttämällä {SupportScripts}-tagia.
Oletusteemaan 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.