javascript - Dojo "cargando"-mensaje
ajax modal-dialog (5)
Soy nuevo en Dojo, así que necesito un poco de ayuda.
Algunos de mis enlaces tardan un tiempo (cuando el usuario hace clic, transcurren varios segundos antes de que la página comience a cargarse), y me gustaría agregar un mensaje de "carga".
Puedo hacerlo a la "manera de la vieja usanza", pero quiero aprender el Dojo-way nuevo, más fácil y más inteligente.
Exactamente cómo funciona no es importante en este momento, pero me imagino algo como esto:
Aparece un rectángulo en el medio de las ventanas del navegador. (No en el medio del documento). Tiene un gif animado y un mensaje como "Espere ...".
Todos los demás elementos están desactivados, tal vez "desvanecidos" un poco. Tal vez un gran rectángulo blanco transparente al 50%, que se encuentra entre el mensaje de "carga" y el resto del documento.
Lo que está describiendo supone que dojo ya se ha cargado antes de que aparezca el dijit.Dialog modal con el mensaje de carga.
Ahora, normalmente, dojo comienza a ejecutarse una vez que su página está completamente cargada, y usted normalmente pondría su código dojo dentro de una función anónima pasada como parámetro de dojo.addOnLoad() .
Eso implica que la parte restante de su página (lo que usted llama sus "enlaces") tendrá que cargarse a través de ajax (usando, por ejemplo, dijit.layout.ContentPane ). De esta forma, dojo puede ejecutar antes de que se descargue el contenido, y su mensaje de "espera" puede aparecer antes.
Puede verse así:
<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 en ese plan es el dojo en sí: espere que su biblioteca de shrinksafed pese más de 90 K (posiblemente hasta 300 K, dependiendo de la cantidad de cosas que ponga allí). En una conexión lenta, aún tarda una cantidad notable de tiempo para descargar. Dicho esto, estamos hablando de un 90K estático --- el mismo usuario lo descargará solo una vez por sesión, y aún menos que eso si se toma el tiempo para establecer los encabezados de caché / expire apropiados cuando se sirven esos archivos estáticos.
Dojo ya tiene uno de esos componentes: el botón de Dojox ocupado . Es posible que también le interesen los siguientes artículos de Sitepen: Dojo: Building Blocks of the Web (demuestra el bloqueo del contenido de la página) e Implementación de una superposición de precarga de aplicaciones web .
He implementado tal cosa de esta manera:
Primero, en cada página, agregue un controlador de eventos a cualquier href con clase ''lenta'' adjunta:
dojo.addOnLoad(function() { dojo.query(''a.slow'').onclick(function() {loading(); return true;}); });
La función de carga se ve así:
function loading() { var underlay = new dijit.DialogUnderlay({''class'': ''loading''}); underlay.show(); }
El CSS para la clase ''carga'' se ve así:
div.loading { background-image: url(/images/loading.gif); background-repeat: no-repeat; background-position: center; }
Donde loading.gif es un buen GIF animado.
pierdeux me puso en camino con este. Este es mi código hasta ahora:
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 cuadro de mensaje modal que no se puede cerrar, por lo que el usuario no puede usar otros elementos en la página. Esto es exactamente lo que pedí, así que aceptaré la respuesta de pierdeux.
Estoy usando dojox.widget.Standby 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 tu contenido esté listo usa ...
standby.hide();
"target-id-toStandby" es la identificación del div que deseas "congelar"