Joomla a Mootools framework

Úvodní strana \ Joomla \ Joomla \ Joomla a Mootools framework

Neděle, 04 Duben 2010 11:20

joomlalogo Dneska si řekneme něco o Javascriptovém frameworku Mootools, k čemu slouží, o čem to vlastně je a jak to funguje ve spojení s Joomlou. Ukážeme si také nějaké tipy jak ho v Joomle využít.

Mootools je, jak již bylo řečeno, javascriptový framework. Zjednodušeně řečeno je to knihovna funkcí která usnadňuje práci s javascriptem. Stejně jako je tomu například v php u frameworku Zend, nebo Sympfony. Pokud se chcete podívat na Mootools více doporučuji oficiální stránky. Když jsme u Mootools nemůžu nezmínit jeho největšího konkurenta JQuery. Já osobně ho používám raději, ale Joomla ho defaultně nepodporuje, pokud s ním tedy chcete praovat je nutné stáhnout balík, nahodit na FTP a do šablony vložit link na balík. U mootools je to snažší tak tedy pojďmě na to.

Celý balík s Mootools je uložen na FTP v adresáři /joomla/media/system/js/. Než začnete Mootools používat, měli by jste si nejprve ověřit, zda-li je v šabloně vložen link na daný balík. To uděláte snadno: zobrazíte si zdrojový kód stránky a v hlavičce budete hledat následující kód:

<script type="text/javascript" src="/joomla/media/system/js/mootools.js"></script>

Pokud v hlavičce tento kód nenajdete, je nutné upravit šablonu. Otevřete si soubor templates/vase_sablona/index.php a někam do tagu <head> vložte tento kód:

<?php JHTML::_('behavior.mootools'); ?>

Naopak, pokud například nechcete aby se Mootools načítal do stránky, jelikož ho nevyužíváte a ušetříte tím uživatelům stahování pár kB dat navíc, pak tento kód v hlavičce najděte a odstraňte. Buďte však obezřetní a nejdříve si zjistěte, jestli náhodou Mootools nevyužívá některý skript v šabloně. Můžete tím zapříčinit zneaktivnění některé funkce v šabloně.

Důrazně bych chtěl upozornit také na mazání balíku Mootols z FTP, popř. jeho přepisováním novější, či starší verzí. Knihovnu totiž využívá i administrační rozhranní. Po smazání Vám tedy nemusí fungovat některé funkce v administraci. Vlastně hodně z nich. Joomla vývojáři se snaží přicházet s novějšími verzemi postupně ruku v ruce s novějšími verzemi Joomly. Je tedy lepší si počkat.

Nyní je čas si říci k čemu vlastně Mootools můžeme v Joomle využít. Je toho hodně. Od zeefektivnení menu, přechodů obrázků, kontrole formulářových polí, zobrzení různých popup oken až k ajaxovým funkcím, které jsou o mnoho jednušší, než kdyby jsme chtěli ajaxové události ovládat čistě přes javascript.

Nyní si ukážeme na příkladech k čemu je možné framework využít.

1) Zobrazení nápovědy u některého slova v článku - pokud chceme aby se u některého slova zobrazovala nápověda nebo nějaký tip po najetí na dané slovo. Vložíme do hlavičky šablony tento kód:

<script>
window.addEvent("domready",function(){

var abbrTools=new Tips($$('abbr'));
});
</script>

Když poté chcete takto některé slovo zvýraznit. V editoru článku klikněte na ikonu HTML neboli editaci zdrojového kódu. A danné slovo uzavřete do tagu <abbr> a text který chcete zobrazit jako nápovědu vložte do atributu title. Například takto

<abbr title="Javascriptový framework">Mootools</abbr>

Výsledný efekt pak bude vypadat nějak takto:

jooomla_mootools

2) Použití ajaxu

Použití ajaxu vyžaduje už větší zkušenosti. Může sloužit například pro odesílání formulářu anket apod. Pěkný návod je v oficiální dokumentaci Joomly

3) Accordion efekt - efekt harmoniky

Efekt harmoniky je vlastně to samé jako je postranní menu na této stránce. Vždy je Nadpis a pod ním nějaké text. Po kliknutí na Nadpis se všechny ostatní texty skryjý, kdežto text pod nadpisem na který bylo kliknuto se zobrazí.

Použití je velmí jednoduché. Pokud si například vzhled modulů navolíme takto:

<h3 class="title">Modul1</h3>
<div class="moduletext">Nejaky text modulu</div>
<h3 class="title">Modul2</h3>
<div class="moduletext">Nejaky text modulu</div>

A do hlavičky vložíme tento javascript:

window.addEvent("domready",function(){
 var navAcc=new Fx.Accordion($$('h3.title'),$$('.moduletext'));
});

Měl by se postupně odkrývat text jednotlivých modulů po kliknutí na jejich nadpis. Funkce Accordion má více parametrů. Pro více info si projděte oficiální dukumentaci. O tom jak vytvořit vlastní vzhled modulů již byl napsán článek.