18 de noviembre de 2009

jQuery Tools – Overlay, Mostrar un dialogo Cargando…

jQuery Tools Overlay

Implementando un cuadro de dialogo modal, usando jQuery Tools Overlay.

jQuery Tools es una moderna colección de componentes de interfaces de usuarios. Hoy comentaremos uno de los componentes de esta colección, me refiero al control Overlay.

 

jQuery Tools, Overlay

Pero como siempre veamos el control jQuery Tools Overlay a través de un ejemplo. Imaginemos que estamos desarrollando una pagina web en la cual después de captar una ciudad de origen,  destino y una fecha, buscaremos los vuelos disponibles.

Es de suponer que el proceso de búsqueda de vuelos, tarde un poco, y por ende seria interesante mostrar una ventana modal de cargando datos…, que además de no impacientar al usuario, también nos asegura que este no haga clic más de una vez en el botón de búsqueda.

El resultado de la ventana modal con jQuery Tools Overlay sería algo así:

jQuery Tools Overlay Cargando

En el código de solución que está mas abajo veremos lo siguiente:

1. Lo primero será hacer referencia a la hoja de estilo css y a los js (jQuery y jQuery Tools)

2. Definir el componente Overlay de jQuery Tools.

3. Definir el botón que abrirá la ventana de dialogo modal y el contenido a mostrar.

 

 

 

 

jQuery Tools Overlay, ASPX

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShowOverlayCargando.aspx.cs" Inherits="jQueryUI_ShowDialog" %>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Página Ejemplo Overlay Cargando...</title>
    <link rel="stylesheet" type="text/css"  
          href="http://static.flowplayer.org/tools/css/overlay-minimal.css"/>
    <script type="text/javascript"
          src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript"
          src="http://cdn.jquerytools.org/1.0.2/jquery.tools.min.js"></script>             
    <script type="text/javascript">
        $(document).ready(function(){
          $("#btnTest").overlay({
            expose: '#6096D4',
            closeOnClick: false,
            onLoad: function() {
                window.location = 'ShowOverlayCargando.aspx?Time=5000';
            },
            onBeforeClose: function() { return false }          
        });
      });
    </script>
</head>
<body>
    <form id="form1" runat="server">
      <div>
        <asp:Button ID="btnTest" rel="#overlay" Text="Buscar Vuelos"
             runat="server" />               

        <div class="overlay" style="height:200px; width:450px;" id="overlay">
            <h2 style="margin:10px 0">Cargando Datos</h2>
            <p style="float: left; margin:0px 20px 0 0;">
                <img alt="" src="http://static.flowplayer.org/img/title/eye192.png" />
            </p>
            <p>Cargando los datos, por favor espere...</p>
        </div>       
      </div>
    </form>
</body>
</html>

Debemos tener en cuenta que en el evento onLoad del componente Overlay, lo que hacemos es recargar la página pasándole como parámetro (en este ejemplo Time=5000, 5 segundos) en un caso real deberíamos pasarle las ciudades y fechas para la búsqueda de los vuelos.

 

jQuery Tools Overlay, C#


En este punto solo nos queda el código del codebehind, que es donde deberíamos hacer la búsqueda de los vuelos, en nuestro caso solo haremos una espera de 5 segundos para simular la demora.

public partial class jQueryUI_ShowDialog : Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            if (Request["Time"] != null)
                BuscarVuelos(Convert.ToInt32(Request["Time"].ToString()));
        }
    }
 
    private void BuscarVuelos(int timeOut)
    {
        Thread.Sleep(timeOut);
    }
}

Hasta aquí el ejemplo de uso de jQuery Tools Overlay. Espero te halla servido para iniciarte en esta interesante biblioteca de componentes.

Puedes ver además como resolver un ejemplo similar utilizando JQuery UI – Dialog, Mostrar un dialogo modal.

 

Artículos Relacionados:

No hay comentarios:

Publicar un comentario