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 

Comments

6 Responses to “Prototype plugin: Scroller”

  1. eddie
    on March 21st, 2008 18:00

    Sweet! Great work, felicitari! :-)

  2. mucenica.bogdan
    on March 24th, 2008 20:25

    frumos.

    sugestie:
    ar merege la mousedown pus un sa returneze fals(sa anuleze evenimentul), pentru ca acum daca vreau sa derulez mai repede tinand click, cand misc… ma apuc de selectat elemnte din jur => arata urat :D

  3. Victor Stanciu
    on March 24th, 2008 20:34

    Salut Bogdan,

    Daca as opri respectivul event intreaga actiune s-ar opri (mousedown-ul anulandu-se), deci nu ar mai functiona accelerarea.

    Voi investiga totusi o solutie de combatere a acestui efect. Multumesc pentru observatie :)

  4. weasel
    on March 26th, 2008 19:32

    Foarte fain, dar fa ceva la sagetile alea ca atunci cand ai ajuns la marginea imaginii si nu mai poti sa faci scroll, sa se coloreze in rosu sau ceva de genul, ca sa isi dea omul seama ca degeaba incerce sa scrolleze…

  5. Victor Stanciu
    on March 26th, 2008 19:36

    Versiunea initiala pe care o facusem prevedea si dezactivarea triggerelor atunci cand se ating marginile, dar datorita unor mici probleme l-am lasat fara.
    Ma voi ocupa de un update care sa cuprinda si facilitatea asta.
    Multumesc :)

  6. NoNo
    on May 5th, 2008 09:48

    Hi, really nice work on this script :)

    I would like to add an ‘auto’ button, to switch between manual and auto slide but i don’t manage until now… how would you do that please :)

    in the onClick event of a “AUTO” link i’m trying to call $(‘scroller’).start(); or $(‘scroller’).stop(); but it does not work

    Regards

Leave a Reply