Caputo's blog

Informatica, tecnologia, programmazione, fai da te, papercraft e papertoy

Importare un file css o js all’interno del body

gennaio 11th, 2009 by Giovanni Caputo

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 src="http://fritzzz.altervista.org/bloggerContent/mootools/mootools-1.2.1-core-nc.js" type="text/javascript"></script> <script src="http://fritzzz.altervista.org/bloggerContent/mootools/mootools-1.2-more.js" type="text/javascript"></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.

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.

Fonte:  http://franziale.blogspot.com

Questo post è stato postato domenica, gennaio 11th, 2009 at 10:42 nella categoria Siti Web, Tecnologia, tutorial. Tags:, , , , , .
Puoi seguire tutti i commenti di questo articolo attraverso RSS 2.0 feed. Puoi lasciare un commento, o trackback dal nostro sito.

1 response about “Importare un file css o js all’interno del body”

  1. Importare un file css o js all’interno del body - Caputo’s blog … said:

    […] completo fonte:  Importare un file css o js all’interno del body – Caputo’s blog … Author: […]

Lascia un commento

You must be loggati to post a comment.