Prototype plugin: Scroller

Va ofer un nou plugin pentru Prototype, numit simplu Scroller. Ca de obicei, inainte de detaliile tehnice, testati exemplul urmator:

Scroller – exemplu

1. Cerinte

Plugin-ul necesita Prototype 1.6 pentru a functiona.

1
2

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scroller.js"></script>

2. Markup

Cu toate ca existenta urmatoarelor elemente este obligatorie, pozitia si stilizarea lor este in mare parte la discretia voastra:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="wrapper">
    <a href="#" class="scroll vertical" id="scroll-up" rel="up">&nbsp;</a>
    <a href="#" class="scroll vertical" id="scroll-down" rel="down">&nbsp;</a>
    <a href="#" class="scroll horizontal" id="scroll-left" rel="left">&nbsp;</a>
    <a href="#" class="scroll horizontal" id="scroll-right" rel="right">&nbsp;</a>
 
    <a href="#" class="scroll diagonal" id="scroll-nw" rel="nw">&nbsp;</a>
    <a href="#" class="scroll diagonal" id="scroll-ne" rel="ne">&nbsp;</a>
    <a href="#" class="scroll diagonal" id="scroll-se" rel="se">&nbsp;</a>
    <a href="#" class="scroll diagonal" id="scroll-sw" rel="sw">&nbsp;</a>
 
    <div id="scroller">
        <div id="inner"></div>
    </div>
</div>

Elementele cu clasa scroll vor fi cele care vor declansa miscarea (interactiunea cu ele se face prin hover si click), directia acesteia fiind data de atributul rel al fiecarui declansator.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

/* ---------------------------------------- CONTAINERS */
#wrapper {
    position: relative;
    width: 500px;
    height: 500px;
    margin: 10px auto 0 auto;
    padding: 50px;
    }
#scroller {
    width: 500px;
    height: 500px;
    overflow: hidden;
    }
#inner {
    width: 5000px;
    height: 5000px;
    }
.scroll {
    position: absolute;
    }
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

/* ----------------------------------- SCROLL CONTROLS */
.horizontal {
    width: 40px;
    height: 500px;
    top: 50px;
    bottom: 0;
    }
.vertical {
    width: 500px;
    height: 40px;
    left: 50px;
    right: 50px;
    }
.diagonal {
    width: 40px;
    height: 40px;
    }
#scroll-left {
    left: 0;
    }
#scroll-right {
    right: 0;
    }
#scroll-up {
    top: 0;
    }
#scroll-down {
    bottom: 0;
    }
#scroll-nw {
    top: 0;
    left: 0;
    }
#scroll-ne {
    top: 0;
    right: 0;
    }
#scroll-se {
    bottom: 0;
    right: 0;
    }
#scroll-sw {
    bottom: 0;
    left: 0;
    }

Acest markup asigura minimul necesar pentru pozitionare si dimensionare. Pentru o configurare mai detaliata cercetati codul din exemplul de la inceput.

3. Initializare si optiuni suplimentare

Initializarea plugin-ului se face prin urmatoarea constructie JS:

1

var scroller = new Scroller($('scroller'), $$('.scroll'), {optiune:valoare, optiune:valoare, etc});

Optiunile disponibile sunt:

4. Download

Puteti descarca atat fisierul scroller.js, cat si exemplul:

Download scroller.js
Download exemplu

Ca de obicei, completarile si adaugirile sunt binevenite.

March 21, 2008 | Filed Under JavaScript | 6 Comments 

Wurbe #7

Pe data de 17 martie, ora 18:00, la sediul Adobe Romania, are loc Wurbe #7. Tema acestei “editii” este “web standards & stuff”, si pot spune ca sunt foarte entuziasmat si voi participa cu placere.

Ne vedem acolo!

March 5, 2008 | Filed Under Personal | 1 Comment 

  • Arhiva