10 gennaio 2009

Importare dinamicamente un file css o js all'interno del body

Una limitazione nell'inclusione dei fogli di stile css mediante l'utilizzo del tag html <link> consiste nel fatto che lo stesso debba essere incluso all'interno del tag <head> affinchè gli stili inclusi possano essere utilizzati dal browser.
Nel caso in cui si voglia includere un file css in un qualsiasi punto della pagina, ad esempio nel <body>, magari associando l'inclusione ad un determinato evento o ad una determinata condizione risulterebbe impossibile se non ci venisse in contro il framework Javascript : MooTools.

E' possibile mediante questa classe includere anche file javascript a runtime, così come per i file css.
E' necessario importare all'interno della pagina 2 file javascript:
- Il core dei mootools
- il more dei mootools contenente il plugin Asset
I 2 files sono disponibili qui (core) e qui (more).
<script type="text/javascript" language="JavaScript" src="http://www.franziale.netsons.org/src/js/mootools/mootools-1.2.1-core-nc.js"></script>
<script type="text/javascript" language="JavaScript" src="http://www.franziale.netsons.org/src/js/mootools/mootools-1.2-more.js"></script>

Il passo successivo è quello di utilizzare all'interno della pagina il seguente codice:
// include un file css a runtime
var myCSS = new Asset.css("style.css");
// include un file javascript a runtime
var myJS = new Asset.javascript("jsdefinition.js");

Di seguito è presente il codice per poter gestire la stampa del javascript per la chiamata ai metodi dei mootools mediante una classe PHP.
/**
* Classe Boundary per la gestione della stampa
* @author a.franzi
*/
class MooTools{

/**
* Metodo per recuperare la chiamata al metodo della classe Asset dei mootools per
* importare un file css a runtime (quindi non necessariamente nell'head della pagina)
*
* @param $cssFile : path al file css
* @return : stringa javaScritpt contenente la chiamata al metodo della clase
* Asset dei mootools
*/
public static function getAssetCss($cssFile){
// nel caso in cui non si voglia usare un nome univoco , è possibile decommentare questa riga
// ed eliminare la seguente
//return "var myCss = new Asset.css('".$cssFile."');";
return "var myCss".Random::string()." = new Asset.css('".$cssFile."');";
}
/**
* Metodo per stampare la chiamata al metodo della classe Asset dei mootools per
* importare un file css a runtime (quindi non necessariamente nell'head della pagina)
*
* @param $cssFile : path al file css
*/
public static function printAssetCss($cssFile){
echo self::getAssetCss($cssFile);
}
/**
* Metodo per recuperare la chiamata al metodo della classe Asset dei mootools per
* importare un file js a runtime
*
* @param $cssFile : path al file js
* @return : stringa javaScritpt contenente la chiamata al metodo della clase
* Asset dei mootools
*/
public static function getAssetJs($jsFile){
// nel caso in cui non si voglia usare un nome univoco , è possibile decommentare questa riga
// ed eliminare la seguente
//return "var myJs = new Asset.javascript('".$jsFile."')";
return "var myJs".Random::string()." = new Asset.javascript('".$jsFile."')";
}
/**
* Metodo per stampare la chiamata al metodo della classe Asset dei mootools per
* importare un file js a runtime
*
* @param $cssFile : path al file js
* @return : stringa javaScritpt contenente la chiamata al metodo della clase
* Asset dei mootools
*/
public static function printAssetJs($jsFile){
echo self::getAssetJs($jsFile);
}
}

Attenzione : nel codice si fà riferimento alla classe Random la cui implementazione è possibile recuperarla sul post Generazione valori random in php.
Sicuramente questo post sarà utile a coloro, come nel mio caso utilizzino un controller per la gestione centralizzata dell'inclusione di file js e file css.

Nessun commento: