dilluns, 8 d’octubre del 2007

Scroll de capa con Javascript (Scroll de capa amb Javascript)

Aprovechando la herramienta Prototype (framework basado en Javascript) podemos construir una barra de scroll vertical o horizontal para una capa.

Primero de todo debemos descargar las librerías Javascript que utilizaremos. Nos las podemos bajar desde la siguiente dirección: http://script.aculo.us

El código mostrado a continuación es un ejemplo a modo de plantilla en el cual hay una capa con un scroll. Como veis, tenemos que incluir las librerías que hemos descargado anteriormente. Referente al código entre las etiquetas "body" se divide en las siguientes partes:

- La capa "exterior" contiene las demás capas.
- "contenido" es la capa que nos servirá de marco para la capa "contenido2" que es donde hay el contenido de la capa a scrollar.
- Finalmente está el código Javascript con las funciones correspondientes. Es importante colocar este código al final de la página, justo antes de cerrar el body, ya que sino no funcionaría. El único parámetro que hay que cambiar en ésta función (dependiento del alto que le queramos dar a la capa) es el 125 que aparece restado al offsetHeight de "contenido2".


Aprofitant l'eina Prototype (framework basat en Javascript) podem construir una barra de scroll vertical o horitzontal per a una capa.

Primer de tot ens hem de descarregar les llibreries Javascript que utilitzarem. Ens les podem baixar des de la següent direcció: http://script.aculo.us

El codi mostrat a continuació és un exemple a mode de plantilla en el qual hi ha una capa amb un scroll. Com veieu, hem de incloure les llibreries que ens hem descarregat anteriorment. Pel que fa al codi de dins de les etiquetes "body" es divideix en les següents parts:

- La capa "exterior" conté totes les demés capes.
- "contenido" és la capa que ens servirà de marc per la capa "contenido2" que és on hi ha el contingut de la capa a scrollar.
- Finalment hi ha el codi Javascript amb les funcions corresponents. És important col·locar aquest codi al final de la pàgina, just abans de tancar el body, ja que sino no funcionaria. L'únic parametre que s'ha de canviar en aquesta funció (depenen de l'alçada que li volguem donar a la capa) és el 125 que apareix restat al offsetHeight de "contenido2".



Código (Codi)
<html>
<head>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
</head>
<body>
    <div id="exterior" style="height:125px;">
        <div id="contenido" style="width:225; height:125px; overflow:hidden;">
            <div id="contenido2" style="float:left; left:0px; top:0px; width:225px; overflow:hidden;">
                1<br />2<br />3<br />4<br />
                5<br />6<br />7<br />8<br />9<br />
                10<br />11<br />12<br />13<br />14<br />15
            </div>
        </div>
        <div id="pista" style="width:15px;background-color:#000000;height:125px; position:relative; left:225px; top:-125px;">
            <div id="deslizador" style="width:15px;height:15px;background-color:#999999; cursor:pointer;">
            </div>
        </div>
    </div>

    <script type="text/javascript" language="javascript">
        divh = (parseInt($('contenido2').offsetHeight) - 125);
        new Control.Slider('deslizador','pista',{axis: "vertical", range:$R(2,100),
            values: [0
            <?php for($i=1;$i<=100;$i++){
                echo ",".$i;
            } ?>
            ],
            onSlide:function(v){
                $('contenido').scrollTop = (v/100)*divh;
            }
        });
    </script>
</body>
</html>



Publicat per a
Etiquetes de comentaris:
Subscriure's a: Comentaris del missatge (Atom)