All Around the e-World: Mootools

Visualizzazione post con etichetta Mootools. Mostra tutti i post

10 maggio 2010

Browser.Engine : distinguere i Browser con mootools

I mootools tra la miriade di funzionalità, ci permette di individuare la versione del browser mediante la classe Browser.

Un classico esempio di distinzione tra i browser possiamo vederla nel seguente esempio.


var BE = Browser.Engine;  
if (!this.BE.webkit && !this.BE.gecko && !this.BE.trident){
  // firefox 3.6 bug
  BE = Browser.Engines;
}
if (BE.webkit) {
   alert ("webkit : Safari, Google Chrome, Konqueror";
}
if (BE.gecko) {
   alert ("gecko : Firefox, or any Mozilla Browser";
}
if (BE.trident) {
   alert ("trident : Internet Explorer";
}

Come potete vedere nell'esempio nel caso in cui si tratti di firefox 3.6, visto che l'oggetto Broser.Engine.gecko non è definito (undefined), è stato fixato con un workaround, utilizzando l'oggetto Browser.Engines.gecko per intercettare il browser.

08 aprile 2009

Scrolling fluido sugli anchor usando i Mootools

Una delle funzionalità implementate dai more dei mootools-more è quella legata al modulo SmoothScroll.
I mootools infatti hanno prestato parecchia attenzione allo sviluppo delle funzionalità legata al “Fx” all'interno del proprio framework.

Gli ancoraggi all'interno delle pagine HTML sono molto importanti, permettono infatti di poter accedere in maniera istantanea a determinati contenuti sommersi della marea di informazioni contenute nella pagina.

Un altro esempio di ancoraggio è quello che permette di poter accedere al "top" della pagina senza dover forzare l'utente a dover scrollare per tutta la lunghezza della stessa. Il problema è che in maniera nativa questa funzionalità è troppo istantanea, infatti la pagina esegue un salto immediato che trasmette all'utente una sorta di risveglio immediato da quello che può essere il relax trasmesso della pagina.

Per questo in questo post si vuole suggerire un modo mediante cui eseguire uno scrolling fluido e graduale della pagina quando si clicca sugli ancoraggi.

La potenza stà nel fatto che l'html da inserire nella pagina è lo stesso che inseriremmo in una normale situazione di utilizzo degli ancoraggi.
Esempio;

<a href="#top" >Top</a>

Questo è il codice da inserire nella vostra pagina per ottenere l'effetto desiderato su tutti gli ancoraggi.

window.addEvent('load', function() { new SmoothScroll({ duration: 1800 }); });

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>

E' possibile trovare un esempio di questa funizionalità a questo link Ancoraggi fluidi

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.