jQuery restyling

Domenica 31 Agosto, 2008

Proprio in questi giorni (sotto consiglio…) stavo dando un’occhiata a jQuery, un’ottima libreria sullo stile di prototype.js, scriptaculous.js, mooTools, per intenderci… ed ecco che oggi tutto il sito è stato completamente ridisegnato:

image

Ottimo inizio per allargare i miei orizzonti su questo tipo di librerie! Prossimamente pubblicherò qualche articolo interessante, soprattutto sulle differenze tra jQuery e le altre librerie “simili”.

Post correlati

Tags: , , , , , , ,
Pubblicato in Eventi & Iniziative, Javascript, Sviluppo, jQuery | Nessun commento »

Simple Accordion con la classe USimpleTabStrip

Mercoledì 20 Agosto, 2008

La classe USimpleTabStrip, presentata in Unobtrusive Simple TabStrip, può essere utilizzata anche per realizzare un semplice menu Accordion.
Utilizzando gli effetti di BlindUp() e BlindDown() offerti da Scriptaculous:

PLAIN TEXT
JavaScript:
  1. function init(){
  2.     uts = new USimpleTabStrip();
  3.     uts.Init();
  4.     uts.onShow = function(e) {
  5.         new Effect.BlindDown(e);
  6.     }           
  7.     uts.onHide = function(e) {
  8.         new Effect.BlindUp(e);
  9.     }           
  10. }

E riposizionando gli elementi HTML (sorgente HTML):

PLAIN TEXT
HTML:
  1. <div class="accordion">
  2.     <a href="#acc1">Accordion 1</a>
  3.     <a name="acc1"></a>
  4.     <div>
  5.         <h1>Content #1</h1>
  6.          <p>Bla bla bla....</p>
  7.     </div>
  8.  
  9.     <a href="#acc2">Accordion 2</a>
  10.     <a name="acc2"></a>
  11.     <div>
  12.         <h1>Content #2</h1>
  13.          <p>Bla bla bla....</p>
  14.     </div>
  15.  
  16.     <a href="#acc3">Accordion 3</a>
  17.     <a name="acc3"></a>
  18.     <div>
  19.         <h1>Content #3</h1>
  20.          <p>Bla bla bla....</p>
  21.     </div>
  22.  
  23. </div>

Si ottiene un semplice menu Accordion che può essere utilizzato in modo estremamente rapido.

Post correlati

Tags: , , , , , , , ,
Pubblicato in Internet, Javascript, Sviluppo, Tutorials | Nessun commento »

Unobtrusive Simple TabStrip

Giovedì 14 Agosto, 2008

USimpleTabStrip è un Unobtrusive Javascript in grado di migliorare i classici link anchor (ancora) all'interno di una pagina HTML. Questo sorgente è un miglioramento della funzione presentata in Unobtrusive Tabstrip. In questa versione oltre ad allineare il codice alle release 1.6 di prototype.js è stata creata una vera e propria classe per gestire i TabStrip. La release qui presentata è molto semplice e lineare. Il suo principale lavoro risiede nell'aggiungere un evento click ai normali link anchor. Non sono inoltre presentati stili CSS, proprio per lasciare la massima libertà d'azione; tuttavia è possibile ottenere un efficace TabStrip con poche righe di codice CSS aggiuntivo; vedi Aggiungere degli stili CSS più sotto.

Codice HTML

La classe USimpleTabStrip lavora su un HTML molto semplice, sftuttando gli anchor (<a name></a>):

PLAIN TEXT
HTML:
  1. <!-- Semplice lista di link all'interno della pagina -->
  3.     <li><a href="#tbs1">Link 1</a></li>
  4.     <li><a href="#tbs2">Link 2</a></li>
  5.     <li><a href="#tbs3">Link 3</a></li>
  6. </ul>
  7.  
  8. <!-- Blocchi/tabs -->
  9.  
  10. <a name="tbs1"></a>
  11.     <div>
  12.         <h1>Scheda #1</h1>
  13.         <p>Bla bla bla....</p>
  14.     </div>
  15.  
  16. <a name="tbs2"></a>
  17.     <div>
  18.         <h1>Scheda #2</h1>
  19.         <p>Bla bla bla....</p>
  20.     </div>
  21.  
  22. <a name="tbs3"></a>
  23.     <div>
  24.         <h1>Scheda #3</h1>
  25.         <p>Bla bla bla....</p>
  26.     </div>

Il tag div subito sotto l'anchor a funziona da contenitore.

Continua a leggere... »

Post correlati

Tags: , , , , , , ,
Pubblicato in Internet, Javascript, Sviluppo, Tutorials | 1 commento »

Unobtrusive Javascript: un po’ di chiarezza e occhio agli impostori

Domenica 13 Aprile, 2008

Alcuni script, ed alcuni Web, usano alcune funzioni Javascript spacciandole per non-intrusive (Unobtrusive), anche quando non lo sono affatto. Cosa rende uno script (solitamente Javascript) non intrusivo? In  linea di principio uno script Javascript è non-intrusivo quando si può far a meno di esso! Detto molto semplicemente! Nello sviluppo di un sito Web l'usabilità dello stesso non deve dipendere da nessun tipo di script. Solo in questo caso abbiamo un genuino script Unobtrusive. Continua a leggere... »

Post correlati

Tags: , , , , , , , ,
Pubblicato in Internet, Javascript, Sviluppo | 1 commento »