viernes, 11 de junio de 2010

Un cargando general en Ajax.net y CSS

Mi compañero de equipo (Borja) me pasó un código que con JavaScript y código .net me ponía una capa de cargando en toda la aplicación… pero que al tener JS no me gustaba un pelo. Si, tengo la deformación de huir del Javascript como del agua caliente.
Por lo cual le estuve dando vueltas y al final con una masterpage y una hoja de estilos (.css) obtuve el mismo resultado para todos los updatespanel de la aplicación.
Primer paso: crear el estilo que va a definir la capa, de cargando, en el fichero estilo.css.
/* Panel de Cargando */
.CargandoModalBackground
{
    background-color: #FFFFFF;
    filter: alpha(opacity=70);
    opacity: 0.2;
    position: absolute;
    top: 0px;
    left: 0px;
    text-align: center;
    vertical-align: middle;
    padding-top: 20%;
    padding-bottom: 36%;
    padding-left: 45%;
    padding-right: 51%;
}
De aquí señalar que no se consideran estándar las claves filter y opacity, pero que en IE8/7 lo visualiza sin problemas.
A continuación, en la MasterPage linkamos el documento de estilo.
<head runat="server">
    <
title></title>
    <
link href="estilos.css"rel="stylesheet"type="text/css" />
</
head>

A continuación del ContentPlaceHolder, para que se visualice por encima del contenido, definimos un UpdateProgress con la capa de cargando en su interior.
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
    <
ProgressTemplate>
        <
div class="CargandoModalBackground">
            <
img src="imagenes/ajax-loader.gif" alt="Cargando..." />
           
Cargando...
        </div>
    </
ProgressTemplate>
</
asp:UpdateProgress>

Y ya ta!.
Cada vez que un UpdatePanel se lance para ser actualizado, invocará al UpdateProgress y nuestra capa de cargando ocupará toda la pantalla, con el icono más o menos en el medio.
Si acaso lo que tengo que señalar es que consigo que la capa utilice toda la pantalla, a pesar de que la imagen es muy pequeña, manipulando las propiedades de padding.
Espero sea útil.

4 comentarios:

Anónimo dijo...

Buenísimo, muchas gracias.

myriam dijo...

GENIAL!!!

Anónimo dijo...

a mí no me funciona :( no sé si se necesite el archivo funcionesGenerales.js Saludos

Juan Quijano dijo...

Nop, ciertamente no necesitas la libreria.js.

La quito del código para que no moleste.