Barra de Progreso JQuery

3 03 2010

Estaba investigando JQuery, buscando ejemplos para compartir y encontré esta barra de progreso animada realizada en JQuery, no contiene imágenes, solamente código Javascript, HTML y CSS.

Explico un poco:

var bar1 = new ProgressBar("id-div-contenedor", 10, "progressTable", "cell1", "size");
bar1.Start();

id-div-contenedor: es el ID que contiene a la barra que armaremos.

10: es el número de celdas que va a tener nuestra barra. Cuantas más celdas tenga más larga va a ser.

progressTable: se refiere a la clase CSS para darle estilo exterior a la barra.

cell1: es el estilo de cada celda

size: el tamaño de cada celda

_______________________

El código Completo:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Barra de progreso animada con jQuery</title>

    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>

    <style media="screen" type="text/css">
	/*border de la barra de progreso*/
        .progressTable
        {
            border: solid 1px #e1e1e1;
        }

	/*tamaño de la celda ancho-alto*/
        .size, .cell1
        {
            width: 15px;
            height: 15px;
        }
	/*color de la celda*/
        .cell1
        {
            background-color: #22dd22;
            display: none;
        }

    </style>

	<script language="javascript">
    <!--
    $(document).ready(function()
    {
        var bar1 = new ProgressBar("contenedorBarra1", 15,
          "progressTable", "cell1", "size");
        bar1.Start();

    });

    var ProgressBar = function(divId, cellCount, tableCss, cellCss, sizeCss)
    {
        var index = -1;
        var timerObj = new Timer();

        this.Init = function()
        {
            var str = "<table class='" + tableCss + "' cellpadding='0' cellspacing='1'><tr>";
            for(var cnt=0; cnt<cellCount; cnt++)
            {
                str += "<td class='" + sizeCss + "'><div class='"
                  + cellCss + " " + cellCss + cnt + "'></div></td>";
            }
            str += "</tr></table>";
            $("#" + divId).append(str);

            timerObj.Interval = 100;
            timerObj.Tick = timer_tick;
        }

        this.Start = function()
        {
            this.Init();
            timerObj.Start();
        }

        function timer_tick()
        {
            //debugger;
            index = index + 1;
            index = index % cellCount;

            $("#" + divId + " ." + cellCss + index).fadeIn(10);
            $("#" + divId + " ." + cellCss + index).fadeOut(500);
        }
    }

    // Declaring class "Timer"
    var Timer = function()
    {
        // Property: Frequency of elapse event of the timer in millisecond
        this.Interval = 1000;

        // Property: Whether the timer is enable or not
        this.Enable = new Boolean(false);

        // Event: Timer tick
        this.Tick;

        // Member variable: Hold interval id of the timer
        var timerId = 0;

        // Member variable: Hold instance of this class
        var thisObject;

        // Function: Start the timer
        this.Start = function()
        {
            this.Enable = new Boolean(true);

            thisObject = this;
            if (thisObject.Enable)
            {
                thisObject.timerId = setInterval(
                function()
                {
                    thisObject.Tick();
                }, thisObject.Interval);
            }
        };

        // Function: Stops the timer
        this.Stop = function()
        {
            thisObject.Enable = new Boolean(false);
            clearInterval(thisObject.timerId);
        };

    };

    //-->
    </script>

</head>
<body>
    <div id="contenedorBarra1"></div>
    <br />
</body>
</html>

Espero que les salga!

Leer entrada original

About these ads

Acciones

Información

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s




Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

%d personas les gusta esto: