Realizzare un modulo personalizzato con effetto accordion per Joomla! 1.5
Quello di cui si ha bisogno per raggiungere il risultato finale è:
- inserimento di codice nella index.php del template in uso;
- override del file modules.php nella cartella del template;
- un file javascript contenente la funzione per l'effetto accordion;
- un file params.ini
Andiamo con ordine e si cominci dall' inizio.
Inserire il codice nel file index.php
<?php if($this->params->get('show_effects')) : ?>
<?php if( $this->params->get( 'modules_start') == 'closed' ) :?>
<script type="text/javascript" src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/site.js"></script>
<?php endif; ?>
<?php endif; ?>
Il codice appena scritto va inserito tra i tag <head> e </head> del file index.php.
Da notare quanto scritto al secondo rigo del codice:
if( $this->params->get( 'modules_start') == 'closed' )
modules_start è un parametro che viene richiamato dal file params.ini, che verrà visto di seguito, il quale fa apparire il modulo chiuso, quando si richiama una pagina. Ricapitolando:
se esiste il parametro appena descritto, verrà richiamato il file "site.js", contenente la funzione che attiene all' apertura e chiusura del modulo. Fatta tale aggiunta, salvare il file index.php ed uplodarlo sul server remoto, via FTP.
Override del file modules.php
Si crei un file denominato "modules.php" e lo si posizioni nella cartella html del template attivo, in maniera tale da trovarlo al seguente percorso:
/Root Principale/templates/Cartella Template Attivo/html/modules.php
Il codice da scrivere in tale file è il seguente:
<?php
defined('_JEXEC') or die('Restricted access');
function modChrome_fx( $module, &$params, &$attribs )
{
if( !empty( $module->content) ) : ?>
<div class="moduletable<?php echo $params->get('moduleclass_sfx');?>">
<div class="tog">
<?php if( $module->showtitle != 0 ) : ?>
<h3><?php echo $module->title; ?></h3>
<?php endif; ?>
</div>
<div class="cont">
<?php echo $module->content; ?>
</div>
</div>
<?php endif;
}
?>
L'override appena riportato non va ad intaccare minimamente gli stili di default dei moduli standard di Joomla! bensì ne aggiunge uno nuovo, che prende il nome di fx, e cioè la possibilità di espandere lo stesso modulo quando si cliccherà sul suo titolo.
Il codice da scrivere nel file index.php per la posizione modulo con effetto accordion è il seguente:
<jdoc:include type="modules" name="Nome_Posizione_Modulo" style="fx" />
Per una maggiore comprensione del Module Chrome, si faccia riferimento all'articolo sulla personalizzazione del module chrome di Joomla!
Funzione JavaScript per l'effetto accordion
Arrivati a questo punto, si deve scrivere il codice JavaScript per far funzionare il modulo. Ad onor del vero lo spunto è venuto guardando gli effetti accordion con Mootools ed è stata implementata una funzione per avere lo stesso effetto. Di seguito il codice:
var Site = {
start: function(){
Site.Modules();
},
Modules: function(){
var modules = $$('.cont');
var toggles = $$('.tog');
modules.each( function(mod, index){
var Slide = new Fx.Slide( mod, { duration:800, wait:false, transition:Fx.Transitions.Quart.easeOut });
var fx = new Fx.Style( mod, 'opacity', { duration:800, wait:false });
toggles[index].addEvent('click', function(e){
e = new Event(e).stop();
Slide.toggle();
if( Slide.wrapper.offsetHeight == 0 ){
fx.start(0, 1);
}
else{
fx.start(0, 1);
}
});
});
}
}
window.addEvent('domready', Site.start );
Salvare il file in oggetto e nominarlo site.js (oppure un altro nome a piacere). Se lo si nomina in maniera diversa da site.js, ricordarsi di cambiare anche il nome nel file index.php, come descritto al primo passaggio.
Dove posizionare il file site.js: nella cartella del template attivo, la quale ne conterrà una al suo interno dal nome "js". Il percorso completo è:
/Root Principale/templates/Cartella Template Attivo/js/site.js
File params.ini
L'ultimo passaggio prevede, come scritto nel titolo, la scrittura del file params.ini. Esso conterrà una sola riga di codice che è la seguente:
modules_start=closed
Il percorso del file params.ini è:
/Root Principale/templates/Cartella Template Attivo/params.ini
Conclusioni
Se tutti i passaggi sono stati effettuati come descritti nell'articolo, si dovrebbe avere il modulo con l'effetto accordion, non provocando nessun conflitto con quelli standard di Joomla!.
| < Prec. | Succ. > |
|---|
