JavaScript  »  Articoli  »  Effetti e controlli Javascript 

Utilizzo delle API: lo script in azione

Le API di Cufon mettono a disposizione quattro metodi, ognuno delegato allo svolgimento di una diversa funzionalità:

• Cufon.replace(selector[, options])
• Cufon.refresh([selector, ..])
• Cufon.set(option, value)
• il già menzionato Cufon.now()

Il metodo principale è Cufon.replace(), che come è facile capire, è la funzione delegata a rimpiazzare l'originario testo HTML con l'immagine generata con VML o Canvas.

Questo metodo accetta due parametri: il primo (obbligatorio) è selector, e serve a identificare il testo da rimpiazzare: può essere un elemento HTML o il metodo del DOM document.getElementsByTagName(). In realtà nei browser più moderni è possibile utilizzare con grande comodità anche i selettori CSS (compresi i selettori CSS 2 e CSS 3). Internet Explorer purtroppo non dispone nativamente di un selector engine, tuttavia l'inconveniente è facilmente ovviabile utilizzando Cufon in combinazione al nostro framework Javascript preferito (JQuery, Prototype, Mootools...), con l'accortezza di includerlo prima di Cufon. Gli esempi di questo articolo sono stati realizzati con Sizzle, un selector engine particolarmente leggero e veloce non dipendente da librerie.

Vediamo subito dal primo esempio alcune delle possibili combinazioni con cui è possibile accedere agli elementi da rimpiazzare:

<script type="text/javascript">
	Cufon.replace('h1'); 
  	Cufon.replace('h2');
    
    Cufon.DOM.ready(function() {
  		Cufon.replace(document.getElementsByTagName('h4'));
  	});

   
	// da quì è richiesto un selector engine o un framework: Sizzle, Jquery, Prototype, Mootols
    
    Cufon.replace('#message');
  	Cufon.replace('ul.list li');
    
  	// rimpiazza tutti i tag <h3> meno quelli con classe "noreplace"
  	Cufon.replace('h3:not([class=noreplace])');
	
	// una variante compatta delle chiamate precedenti... 
  	// Cufon.replace('h3:not([class=noreplace])')('h1')('h2')('#message')('ul.list li'); 
</script>

Il secondo parametro del metodo Cufon.replace (options) è facoltativo ed è costuito da un hash di varie proprietà che ci permettono di "customizzare" l'applicazione dello script. Per cominciare è bene precisare prima le proprietà tipografiche dell'aspetto del testo che se utilizzate vanno specificate direttamente nel CSS del documento: color, font-size, font-style, font-weight, letter-spacing, line-height, text-transform. Per le proprietà che è invece possibile inserire nell'oggetto options ecco una breve descrizione delle più utili:

• fontFamily: consente di specificare il nome del carattere che si desidera utilizzare: se la proprietà viene omessa è utilizzato l'ultimo font incluso nel tag <script>. Ecco un esempio con l'applicazione di due diversi font.
• hover: se true abilita l'effetto hover del mouse sull'elemento (disabilitato per impostazione predefinita). In questo caso ho predisposto un esempio con l'utilizzo su un menu orizzontale.
• separate: serve a specificare come separare le parti di testo. I valori possibili sono ‘none’, ‘characters’ e ‘words’, che è quello predefinito, con la migliore resa in presenza di un testo multi-riga.
• textShadow: rende il testo ombreggiato, e il risultato è l'equivalente cross-browser dell'omonima proprietà CSS 3.

Altri articoli

Altre guide

Altre newsletter