jQuery: come costruire un’estensione Plugin

Martedì 23 Settembre, 2008

Come tutte le librerie di questo tipo anche jQuery permette di estendere le sue funzionalità base tramite dei veri e propri plugin. Rispettando le regole del suo funzionamento, cioè restituiendo sempre un puntatore all'elemento selezionato o a jQuery stessa, è possibile scrivere un plugin con poche righe di codice. Prendiamo come esempio il codice proposto in jQuery contro tutti: un benchmark con 5 browser che era (dopo la correzione segnalata da Luca):

PLAIN TEXT
JavaScript:
  1. $('h2.dropdown').css('cursor','pointer').click(
  2.     function() {
  3.         if( $(this).next().is(':hidden') ) $(this).next().slideDown(); else $(this).next().slideUp();
  4.     }
  5. );

Continua a leggere... »

Post correlati

Tags: , , , , , ,
Pubblicato in Internet, Javascript, Sviluppo, Tutorials, jQuery | 3 commenti »

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 »

Tecniche di Text Replacement in Flash

Mercoledì 25 Giugno, 2008

La tecnica di Text Replacement che presento oggi è, per certi aspetti, davvero interessante. A differenza della classica sostituizione per immagine tramite CSS, questa tecnica usa un filmato Flash per sovrascrivere i titoli del nostro sito. Nonostante sia un pochino più articolata, in quanto richiede la creazione di un filmato Flash e l'uso di Javascript, permette di ottenere una serie di vantaggi non indifferenti:

  • Mantiene l'accessibilità del sito sfruttando un True-Unobtrusive-Javascript in modo che crawler e spider continuino a vedere la pagina come semplice e corretto HTML
  • Non richiede la creazione di n immagini per n titoli. Basta un solo filmato per sostituire tutti i titoli del nostro sito, con un notevole risparmio in termini di Download
  • Permette di creare anche titoli semplici ma con Font normalmente non utilizzati sul Web
  • Il testo può essere reso in HTML, grazie alle caratteristiche di Flash
  • Il testo è selezionabile
  • Essendo un filmato Flash si può inserire interattività e animazioni di qualsiasi sorta

Noterete, anche, che in questa procedura i CSS non sono praticamente presi in considerazione!

Continua a leggere... »

Post correlati

Tags: , , , , , , , , , , , ,
Pubblicato in ActionScript, Actionscript 3.0, Ajax, Flash, Flash CS3, Grafica & Design, Internet, Javascript, Sviluppo, Tecnologia, Tutorials | Nessun 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 »

Shadowbox assetURL: impostare il percorso delle immagini

Sabato 12 Aprile, 2008

Quando Shadowbox apre la sua finestra per mostrare un contenuto (immagine, iframe, Movie, ecc...), visualizza, nell'attesa, un gif animato che viene fornito nel pacchetto. Se la pagina che sta utilizzando Shadowbox si trova allo stesso livello della cartella images, tutto funziona bene. Per default, infatti, Shadowbox cerca la gif animata sotto images/loading.gif - o images/loading-light.gif se avete scelto gli stili light (shadowbox-light.css). Altrimenti, e spesso c'è il rischio anche di non accorgesene, se ci troviamo in una diversa alberatura, viene generato un bel codice 404 - di pagina non travata; nel nostro caso di file non trovato!

Per risolvere il problema basta inizializzare Shadowbox con un parametro opportuno che indica proprio il percorso assoluto della cartella images: su undolog.com, ad esempio, ho posizionato la gif animata del loading direttamente nella cartella images presente in root (come circa un miliardo di altri siti :). Per rendere accessibile questa cartella a Shadowbox, a prescindere dal percorso, ho inserito semplicemenete:

PLAIN TEXT
JavaScript:
  1. // init shadowbox with assetURL parameter
  2. Shadowbox.init( {assetURL: 'http://www.undolog.com/' } );

Post correlati

Tags: , , , , , , , , , , , , ,
Pubblicato in CSS, Grafica & Design, Internet, Javascript, Sviluppo | 2 commenti »

Tutti i cloni di Lightbox in una matrice dinamica

Venerdì 11 Aprile, 2008

Planetozh ha realizzato uno splendito strumento dinamico in grado di elencare tutte le librerie Javascript simili a Lightbox.

image

image Tramite un pannello (vedi  immagine qui a sinistra) con una serie di "spunte" (checkbox), che indicano le varie caratteristiche delle librerie, è possibile eseguire un filtro ottenendo così la lista di una o più librerie che fanno al caso nostro. Speriamo che l'autore mantenga aggiornata questa fantastica pagina, utilissima nel districarsi tra le numerose e sempre più potenti librerie di questo tipo.

Post correlati

Tags: , , , , , , , , , , , , , , , , , , , , ,
Pubblicato in CSS, Grafica & Design, Internet, Javascript, Sviluppo | 7 commenti »

Unobtrusive SWFObject 2.0

Martedì 25 Marzo, 2008

swfobject SWFObject è uno script Javascript utilizzato per inserire contenuti Flash all'interno delle pagine Web. La sua principale funzione è quella di eliminare la richiesta di attivazione del controllo da parte di Microsoft Internet Explorer (che, comunque sia, è in fase di dismissione - vedi qui) e, più interessante, la capacità di verificare ed installare automaticamente il Flash Player ove richiesto. SWFObject può considerarsi un'ottima alternativa al kit di install/detect fornito dalla stessa Adobe e generabile all'interno dell'IDE Flash (in tutte le sue versioni). Con la versione 2.0, SWFObject migliora le sue performance e il suo utilizzo. Come indicato sulla documentazione ufficiale, spostata su Google Code, le novità di questa release sono talmente tante da renderlo NON compatibile con le precedenti versioni. Questo si traduce di fatto in una revisione completa del codice per chi decidesse di aggiornare una precedente versione SWFObject alla 2.0.

Lo script è ora allineato agli ultimi standard, sia dal punto di vista sintattico che da quello "non intrusivo". Supporta tutte le precedenti features, come l'installazione rapida del Flash Player, con un codice più chiaro e facile da usare. Il passaggio dei parametri, ad esempio, da Javascript al Player Flash (e quindi al nostro filmato) è ora assai più chiaro e versatile. Inoltre sono stati introdotti due principali modi di funzionamento: statico e dinamico, in base al tipo di pagina e processo di design che stiamo effettuando.

Utile e davvero bon fatto è il tool online che genera il codice SWFObject per noi.

LINK:

Post correlati

Tags: , , , , , , , , , , , , ,
Pubblicato in Flash, Internet, Javascript, Sviluppo | 2 commenti »

Scriptaculous Effect.Tween: come funziona

Giovedì 20 Marzo, 2008

Fra tutte le librerie "web 2.0" disponibili, scriptaculous è sicuramente quella più mal documentata! Sul sito ufficiale, spesso lento, la documentazione è parziale, mal fatta e di difficile consultazione. Con gli ultimi rilasci, poi, alcune nuove funzionalità sono completamente mancanti, proprio come il nuovo core effect Tween (Effect.Tween). Quest'ultimo, in modo simile al Tween di Flash, permette di manipolare transizioni personalizzate. La sua SYNOPSIS base è la seguente: Continua a leggere... »

Post correlati

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

Light gallery: Lightview 2.0.0_rc1

Martedì 19 Febbraio, 2008

Lightview Appena rilasciata ecco l'ennesima libreria Unobtrusive Javascript per gallerie di immagini e non solo. Lightview, nella release 2.0.0_rc1, aggiunge anch'essa le funzioni per "aprire" delle Window con contenuti che vanno oltre la semplice immagine: filmati Flash, QuickTime, Form e IFRAME! Rispetto alla precedente versione (la 1.1.0 - che gestisce solo immagini), quindi, questa release candidate si arricchisce delle funzionalità presenti anche in altre librerie. Gli strumenti richiesti da Lighview per funzionare sono gli arcinoti Prototype 1.6.0.2 e Scriptaculous 1.8.1. Gliattributi usati per gestire la libreria sono class e rel.

Un'aspetto interessante di questa libreria è l'estrema cura della grafica con cui si presenta.

Voto: 9 - Home page di Lightview

Post correlati

Tags: , , , , , , , , , , , , , , , , , , , , ,
Pubblicato in Ajax, CSS, Grafica & Design, Internet, Javascript, Sviluppo | 1 commento »