Articoli con Tag ‘Scriptaculous.js’

jQuery restyling

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”.

Continua...

Simple Accordion con la classe USimpleTabStrip

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:

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

E riposizionando gli elementi HTML (sorgente HTML):

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

    <a href="#acc2">Accordion 2</a>
    <a name="acc2"></a>
    <div>
        <h1>Content #2</h1>
       <p>Bla bla bla....</p>
    </div>

    <a href="#acc3">Accordion 3</a>
    <a name="acc3"></a>
    <div>
        <h1>Content #3</h1>
       <p>Bla bla bla....</p>
    </div>

</div>

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

Continua...

Unobtrusive Simple TabStrip

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 (&lt;a name&gt;&lt;/a&gt;):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!-- Semplice lista di link all'interno della pagina -->
<ul>
    <li><a href="#tbs1">Link 1</a></li>
    <li><a href="#tbs2">Link 2</a></li>
    <li><a href="#tbs3">Link 3</a></li>
</ul>

<!-- Blocchi/tabs -->

<a name="tbs1"></a>
    <div>
        <h1>Scheda #1</h1>
        <p>Bla bla bla....</p>
    </div>

<a name="tbs2"></a>
    <div>
        <h1>Scheda #2</h1>
        <p>Bla bla bla....</p>
    </div>

<a name="tbs3"></a>
    <div>
        <h1>Scheda #3</h1>
        <p>Bla bla bla....</p>
    </div>

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

Continua...

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

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...


Stop SOPA