Soy nuevo en el Dojo, así que necesito un poco de ayuda.

Algunos de mis enlaces toma un tiempo (cuando el usuario hace clic, tarda varios segundos antes de que la página se inicia con la carga), y me gustaría añadir una «carga»-mensaje.

Puedo hacerlo de la «antigua usanza», pero quiero aprender el nuevo, más fácil, más inteligente Dojo -.

Exactamente cómo funciona no es importante ahora, pero me imagino algo como esto:

Aparece un rectángulo en el medio del explorador de windows. (No a la mitad del documento.) Tiene un gif animado, y un mensaje de «espere por Favor…».

Todos los demás elementos son discapacitados, tal vez «se desvaneció» un poco. Tal vez un gran blanco 50% rectángulo transparente, que se encuentra entre la «carga»de mensaje y el resto del documento.

OriginalEl autor myplacedk | 2009-01-28

5 Comentarios

  1. 8

    Lo que usted está describiendo, se supone que el dojo en sí ya ha sido cargado por el tiempo que el modal dijit.Dialog aparece con el mensaje de carga.

    Ahora, normalmente, dojo comienza a ejecutar una vez que su página se ha cargado completamente, y normalmente se pone su dojo de código dentro de una función anónima que se pasa como parámetro de dojo.addOnLoad().

    Que implica que la parte restante de la página (lo que llaman «enlaces») tendrá que ser cargado mediante ajax (usando, por ejemplo, dijit.layout.ContentPane). De esa manera, dojo puede ejecutar antes de que el contenido es descargado, y su mensaje de «espera» puede aparecer antes.

    Podría tener este aspecto:

    <html>
    
    <head>
    <link rel="stylesheet" href="/dojo/dijit/themes/tundra/tundra.css" type="text/css" media="screen" />
    <script type="text/javascript" src="/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
    /* make sure that you shrinksafe together your libraries and dojo's for faster loading... */
    <script type="text/javascript" src="/dojo/yourOwnDojoCompressedScripts.js"></script>
    <script type="text/javascript">
       var dialog;
       dojo.addOnLoad(function(){
          dojo.require("dijit.layout.ContentPane");
          dojo.require("dijit.Dialog");
          dialog = new dijit.Dialog();
          dialog.setContent("<p>This page will be available in a tick!</p>");
          dialog.show();
       });
    </script>
    </head>
    
    <body class="tundra">
       <div id="delayedContent" 
            dojoType="dijit.layout.ContentPane" 
            href="/myContentUrl"
            onLoad="dialog.hide()">
       </div>
    </body>
    
    </html>

    El único defecto que plan es el dojo de sí mismo: esperar que su shrinksafed biblioteca pesar más de 90K (posiblemente hasta 300K, dependiendo de la cantidad de cosas que poner ahí). En una conexión lenta, que todavía tiene una notable cantidad de tiempo para descargar. Dicho esto, estamos hablando de un estática 90K — el mismo usuario lo descarga sólo una vez por sesión, e incluso con menos frecuencia que si se toma el tiempo para establecer una caché/expiran los encabezados cuando los archivos estáticos se sirven.

    Que mal entendido un poco. De no ser por la espera, mientras que la corriente de carga de la página. Se toma un tiempo antes de la siguiente página se inicia la carga, debido a un servlet debe hacer algunas cosas que tomar un tiempo. Pero dijit.Diálogo se ve bien. Voy a echarle un vistazo…
    Bien, usted podría adaptar mi solución y cargar todo el contenido del enlace mediante la sustitución de los actuales contenidos de la ContentPane, a la vez que mostrar el Diálogo de Carga. Pero eso es muy involucrados para implementar a través de un sitio completo, en cuyo caso GWT sería una mejor opción que el dojo.

    OriginalEl autor pierdeux

  2. 7

    Dojo tiene una componente ya: Dojox Ocupado Botón. Usted podría estar interesado en los siguientes artículos de Sitepen: Dojo: Bloques de Construcción de la Web (lo demuestra el bloqueo de los contenidos de la página) y La implementación de una Aplicación Web de Precarga de Superposición.

    El ocupado botones se ve interesante para otros usos. Pero para que esta no es lo suficientemente visible (si se envía un formulario sin utilizar el botón, usted probablemente no se note), y no el usuario a partir de trabajar en una página que va a desaparecer en cualquier momento. Pero gracias por los enlaces, voy a leer más tarde.

    OriginalEl autor Maine

  3. 5

    estoy usando dojox.widget.Espera para este propósito:
    http://dojotoolkit.org/reference-guide/dojox/widget/Standby.html

    dojo.require("dojox.widget.Standby");
    
    var standby = new dojox.widget.Standby({
                                     target: "target-id-toStandby",
                                     color: "white",
                                     image: "/images/loading-ajax.gif"
                                 });
                                 document.body.appendChild(standby.domNode);
                                 standby.startup();
                                 standby.show();

    cuando su contenido es de uso listo…

    standby.hide();

    «meta-id-toStandby» es el id del div que usted quiera «congelar»

    OriginalEl autor jipipayo

  4. 4

    He implementado una cosa de esta manera:

    Primero, en cada página, agregar un controlador de eventos para cualquier href con clase ‘lento’ que se adjunta:

     dojo.addOnLoad(function() { 
    dojo.query('un.slow').onclick(function() {carga(); return true;}); 
    }); 
    

    La función de carga se parece a esto:

     función de la carga() { 
    var arpillera = new dijit.DialogUnderlay({'class': 'cargando'}); 
    arpillera.show(); 
    } 
    

    El CSS de la «carga» de la clase se parece a esto:

    div.la carga { 
    background-image: url(/images/loading.gif); 
    background-repeat: no-repeat; 
    background-position: center; 
    } 
    

    Donde loading.gif es un bonito GIF animado.

    OriginalEl autor Chris KL

  5. 2

    pierdeux me puso en la pista con este. Este es mi código:

    dojo.require("dijit.form.Button");
    dojo.require("dijit.Dialog");
    
    function displayWait(txtContent) {
        if (!txtContent) {
            txtContent = "Please wait...";
        }
        txtContent = "<img src=\"loading.gif\" alt=\"\" /> " + txtContent;
        var thisdialog = new dijit.Dialog({ title: "", content: txtContent });
        dojo.body().appendChild(thisdialog.domNode);
        //thisdialog.closeButtonNode.style.display='none';
        thisdialog.titleBar.style.display='none';
        thisdialog.startup();
        thisdialog.show();
    }

    Este es un referente del cuadro de mensaje que no puede ser cerrado, por lo que el usuario no puede utilizar otros elementos en la página. Esto es exactamente lo que pedí, así que voy a aceptar pierdeux la respuesta.

    OriginalEl autor myplacedk

Dejar respuesta

Please enter your comment!
Please enter your name here