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

Versión 1
estrellaestrellaestrellaestrellaestrella(2)

Publicado el 16 de Julio del 2013gráfica de visualizaciones de la versión: Versión 1
22.105 visualizaciones desde el 16 de Julio del 2013
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...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2429