Código de JQuery - Ejemplo barra de progreso con jquery-ui

Imágen de perfil

Ejemplo barra de progreso con jquery-uigráfica de visualizaciones


JQuery

estrellaestrellaestrellaestrellaestrella(2)
Publicado el 16 de Julio del 2013 por Xavi
14.882 visualizaciones desde el 16 de Julio del 2013. Una media de 91 por semana
Ejemplo de la utilización de progressbar de jquery-ui para mostrar el funcionamiento de la barra de progreso.

Versión 1
estrellaestrellaestrellaestrellaestrella(2)

Publicado el 16 de Julio del 2013gráfica de visualizaciones de la versión: Versión 1
14.883 visualizaciones desde el 16 de Julio del 2013. Una media de 91 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Puedes ver un ejemplo aquí
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8" />
    <title>Ejemplo barra de progresso con jquery-ui</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
 
    <script>
        var valor=0;
        var int=0;
        $(function() {
            // definimos los parametros de la barra de progresso
            $("#progressbar").progressbar({
                max:100,        // definimos el valor maximo
                value:valor,    // definimos el valor actual
                complete:function(){
                    // en el momento que se llene, detenemos el setInterval
                    clearInterval(int);
                    $(".button").button({disabled:false});
                }
            });
 
            // definimos los parametros del boton
            $(".button").button({
                disabled:true,
                label:"reiniciar"
            });
 
            // evento que se ejecuta al pulsar el boton
            $(".button").click(function(){
                valor=0;
                $(".button").button({disabled:true});
                // iniciamos el proceso nuevamente
                var int=setInterval(aumentar,50);
            });
 
            /**
             * Funcion que se ejecuta cada 50 milisegundos para aumentar
             * la barra de progresso.
             */
            function aumentar()
            {
                valor++;
                // Modificamos el valor de la variable value del progressbar
                $("#progressbar").progressbar("value",valor);
            }
 
            // indicamos que cada 50 milisegundos ejecute la funcion aumentar
            var int=setInterval(aumentar,50);
        });
    </script>
 
    <style>
        #progressbar    {width:200px;float:left}
        .button         {float:left;margin:0px 10px;}
        nav             {clear:both;padding-top:30px;}
    </style>
</head>
<body>
 
<div id="progressbar"></div>
<div class="button">Reiniciar</div>
 
<nav>
    <a href="http://api.jqueryui.com/progressbar/" target="_blank">http://api.jqueryui.com/progressbar/</a>
    <br><a href="http://www.lawebdelprogramador.com/" target="_blank">http://www.lawebdelprogramador.com/</a>
</nav>
 
</body>
</html>



Comentarios sobre la versión: Versión 1 (2)

pepe pecas
22 de Febrero del 2016
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
cvbvcbvc
27 de Mayo del 2016
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2429