Modulo personalizzato con effetto accordion per Joomla

Quello di cui si ha bisogno per raggiungere il risultato finale è:

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

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati