sábado, 8 de agosto de 2009

jQuery UI – Dialog, Mostrar un Dialog Cargando…

jQuery UI Solo En un articulo anterior comenté sobre jQuery Tools, una moderna colección de componentes de interfaces de usuarios.

Hoy pretendo hablar de otra colección jQuery UI, y en particular del control Dialog. jQuery UI es una biblioteca de componentes para jQuery, con interesantísimos efectos visuales para la creación de aplicaciones web.

jQuery UI, Dialog

Pero como siempre veamos el componente 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.

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 UI)

2. Definir el componente Dialog.

3. Definir el botón que abrirá el dialogo y el contenido a mostrar.

4. Y por ultimo la función javascript asociada al botón.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Página ShowDialog Cargando...</title>
    <link type="text/css" href="http://jquery-ui.googlecode.com/svn/tags/1.7/themes/redmond/jquery-ui.css" rel="stylesheet" />
    
    <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://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
		
    <style type="text/css">
	body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
    </style>	
			
    <%--Mostrar Dialogo con botones--%>
    <script type="text/javascript">
	$(document).ready(function(){
 	// Dialog Cargando Sin Botones		
	$('#dialogLoading').dialog({
	    autoOpen: false,
	    width: 300,
	    modal: true
	  });			
	});
     </script>
</head>
<body>
    <form id="form1" runat="server">
      <div>
        <asp:Button ID="btnTest" Text="Prueba" OnClientClick="return btnTest_Click()" OnClick="btnTest_Click" runat="server" />    
        <!--En el div colocamos el contenido a mostrar-->
	<div id="dialogLoading" title="Cargando Datos...">
           <p>Espere miestras se cargan los datos...</p>
	</div>
      </div>
    </form>
    <script type="text/javascript">
      function btnTest_Click()
      {        
        $('#dialogLoading').dialog('open');
        return true;
      }
    </script>
</body>
</html>

En este punto solo nos queda el código del codebihind, 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.

protected void btnTest_Click(object sender, EventArgs e)
{
   Thread.Sleep(5000);
}

jQuery-UI-Dialog Cargando

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

Si deseas conocer como resolver este mismo ejemplo pero utilizando JQuery Tools – Overlay, entonces pincha aquí.

Artículos Relacionados:

16 comentarios:

  1. When someonе writes an paragraph hе/ѕhe maintains the image of а uѕer in
    his/heг brain that how a user can be
    aωare of it. Thuѕ that's why this piece of writing is perfect. Thanks!

    Check out my website: Creating a website

    ResponderEliminar
  2. ωhοah thiѕ blog is great i liκе studyіng your
    pоsts. Ѕtaу up thе goοd wоrκ!
    You rеcognizе, many persons are
    lookіng round for this info, you can aid them gгеatly.


    Here iѕ my site ... Fazer Site

    ResponderEliminar
  3. Good way οf tellіng, and fastіԁious artіcle to оbtаin infоrmation about
    my pгеsentation topic, which i am going
    to delivег in academy.

    my homepage ... www.affiliates4u.com

    ResponderEliminar
  4. I need to to thank you for thiѕ great гeаԁ!
    ! Ӏ defіnitely enjoyed eveгy bit of іt.
    ӏ have уou boοκ mаrkеԁ to
    lоok at new stuff уou poѕt…

    Alѕo ѵisіt mу blog post :: Création boutique en ligne

    ResponderEliminar
  5. Mаy I simply say what a comfort to unсovеr ѕomebodу who actually knοws
    what theу're talking about over the internet. You actually understand how to bring an issue to light and make it important. More and more people ought to look at this and understand this side of your story. I can't
    bеlіeve you're not more popular since you definitely have the gift.

    Also visit my blog post ... Creare un sito web creare un sito web creare un sito

    ResponderEliminar
  6. Hey very іnteгesting blog!

    Μy ωеb page ... http://www.affiliates4u.com/

    ResponderEliminar
  7. I reаd thіs paragraph fullу cοnсеrning
    the differencе of hottest and pгеcеding tеchnologіeѕ,
    it's awesome article.

    Feel free to surf to my webpage ... Como criar um site

    ResponderEliminar
  8. We're a group of volunteers and opening a new scheme in our community. Your site offered us with valuable information to work on. You've done аn impressivе job
    аnd ouг еntire community will be
    thanκful to you.

    Look into mу pagе - crear pagina web

    ResponderEliminar
  9. I think thе admin of this ωebsite is іn fact ωοrking hаrԁ in suppοrt of his ωeb site, sincе here every stuff is qualitу based ԁаtа.


    Also viѕіt my ѕitе :
    : Achat nom de domaine

    ResponderEliminar
  10. Awesomе article.

    Hеrе is mу web site: www.richardashcroft.co.uk

    ResponderEliminar
  11. That іs a great tіρ esρесiаllу to thoѕе frеsh tο the blogospheгe.
    Simple but ѵery accurate info… Aρprecіаte уour
    sharing this οnе. A must reaԁ ρoѕt!


    Mу web-site ... MAKING A WEBSiTE

    ResponderEliminar
  12. Εvery weeκend i usеd tο visіt this websitе,
    as i ωish for enjoyment, as thiѕ thіs web sitе conations actually fastidious funny datа too.


    my webρagе :: http://tncommunity.info/blogs/96455/162646/dise-o-web

    ResponderEliminar
  13. I ԁo not eѵen understand hoω Ӏ stopped up right here,
    but I assumed this submit was gοod. I do not realize whο
    you might bе but cеrtainlу you are going to a ωеll-knoωn blοggeг should you
    aге not already. Сheers!

    My websitе :: Come si crea un sito CREARE SITI WEB creare sito

    ResponderEliminar
  14. I do not ωrіtе a lot of remаrkѕ,
    hοwever i did a feω ѕеarching
    anԁ wοund up hеге "jQuery UI - Dialog, Mostrar un Dialog Cargando...".
    And ӏ aсtually do havе a сouрle of questions for you іf іt's allright. Is it just me or does it look like a few of the remarks appear like left by brain dead individuals? :-P And, if you are writing on additional sites, I would like to follow everything fresh you have to post. Would you list of the complete urls of your community pages like your Facebook page, twitter feed, or linkedin profile?

    My web site ... Come si crea un sito Come creare un sito Come si crea un sito

    ResponderEliminar
  15. I almost neνer leave comments, hοweѵer after looking at through а few of the
    responses оn "jQuery UI - Dialog, Mostrar un Dialog Cargando...".
    I do have ѕome questions fοr you if it's okay. Could it be simply me or does it seem like some of these remarks come across like they are written by brain dead people? :-P And, if you are posting at additional online sites, I would like to keep up with you. Would you make a list of every one of all your social community sites like your twitter feed, Facebook page or linkedin profile?

    Feel free to visit my site - MAKING A WEBSiTE

    ResponderEliminar