Mostrando entradas con la etiqueta CSS. Mostrar todas las entradas
Mostrando entradas con la etiqueta CSS. Mostrar todas las entradas

lunes, 19 de julio de 2010

Mayúsculas en el formulario (UpperCase).

Primero señalar mi aversión a JavaScript. Que no es razonables, pero no puedo evitarlo. Siempre que tengo que hacer cosas en JS me encuentro con problemas que me hacen perder demasiado tiempo.

Planteado el problema de que en la aplicación actual TODAS las entradas han de ser en mayúsculas, cómo resolverlo sin mucho lio:

1. Poner todo en mayúsculas pero solamente visualmente. Por medio de CSS en la clase de estilo que utilizo para los textbox.

.input
{
font-family: 'Lucida Sans';
font-size: 12px;
text-transform: uppercase;
}

2. Poner todo realmente en mayúsculas en el cliente, para descargar el servidor y acelerar el temilla. Lo he puesto en una función de una librería .js para poder modificar el comportamiento en un solo punto.


function toUpper(control) {

if (/[a-z]/.test(control.value)) {
control.value = control.value.toUpperCase();
}
}

Esto requiere una pequeñísima explicación. Le tengo que meter el condicional que solamente me ponga en mayúsculas las letras en minúscula ya que, de no hacerlo así, se inutilizan las teclas de flechas y más cosas malas.


3. Por último, en los controles que quiero este comportamiento le añado el evento:


<asp:TextBox ID="TexBo0x1" runat="server" CssClass="input" onKeyUp="toUpper(this)"></asp:TextBox>

Aquí lo único a reseñar es la necesidad de enviarle el propio control a la librería js para que actualice el valor a la letra en Mayúscula.


Funciona hasta  con acentos… :)

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.