Etiqueta: css

Menú desplegable con jQuery

en por Donnie Rocken Informática, Javascript/jquery4 comentarios

Write less, es la idea de jQuery. Usando este framework para Javascript puedes lograr resultados vistosos y mejorar la usabilidad de tu web. En este caso vamos a hacer un menú desplegable usando jQuery, que se abra cuando lo «sobrevolemos» con el ratón. Mi primera experiencia con menús desplegables fue en una empresa (no diré cual, no queda bien hablar mal de los jefes) que querían un menú desplegable en la página (era un menú de sólo dos opciones, por lo que no le veía mucho sentido a hacerlo así, pero eran paranoias del jefe).

Lo primero es descargar jQuery desde su página oficial e incluirlo en la cabecera de la página. Luego insertar el marcado html del menú tal que así: 

        <ul class="dropdown">  
            <li class="active">Listado: <span>Ejemplos</span></li>  
            <li class="first"><a href="#">Ej 1</a></li>  
            <li><a href="#">Ej 2</a></li>  
            <li><a href="#">Ej 3</a></li>  
            <li class="last"><a href="#">Ej...</a></li>  
        </ul>

En fin, lo siguiente son los estilos del menú, el css. En el marcado ya dimos a la lista la clase dropdown, lo que nos simplificará mucho ahora el aplicar estilos en el css.

  
ul.dropdown{  
    width: 250px;  
    border: 1px double #000;  
    border-radius: 5px;  
    -moz-border-radius: 5px;  
    -webkit-border-radius: 5px;  
    background: #1a1a1a;  
    margin-top: 2em;  
}  
ul.dropdown li{  
    display: none;  
    font-size: 12px;  
}  
ul.dropdown li.active{  
    display: block;  
    color: #8c8c8c;  
    font-size: 14px;  
    padding: 12px;  
    color: #555;  
    border-top: 1px solid #313131;  
    border-radius: 4px;  
    -moz-border-radius: 4px;  
    -webkit-border-radius: 4px;  
}  
ul.dropdown li.active span{  
    padding-right: 24px;  
    color: #8c8c8c;  
}  
ul.dropdown li a{  
    display: block;  
    text-decoration: none;  
    padding: 8px 8px 8px 10px;  
    background: #1e1e1e;  
    border-bottom: 1px solid #171717;  
}  
ul.dropdown li.last a{  
    border:0;  
}  
ul.dropdown li.first a{  
    border-top: 3px solid #131313;  
}  
ul.dropdown li a:hover{  
    background: #232323;  
    color: #fff;  
    padding-left: 11px;  
}

Marcado listo, estilos listos. Falta sólo la funcionalidad, el código javascript que haga furrular todo esto. De momento toda la lista está oculta menos el elemento de la clase active, por lo que tenemos que hacer que se muestre el resto cuando pasemos el ratón por encima, desaparezca cuando lo saquemos y además sea un código reutilizable. Aquí tenemos el procedimiento: 


//variable global para almacenar el menú 
var menu = $("ul.dropdown");  
  
//captura de eventos  
$(this.document).ready(function(){  
    menu.mouseover(function(){  
        mostrar($(this).find("li"));  
    });  
    menu.mouseout(function(){  
        ocultar($(this));  
    });  
})  
  
//función que muestra los elementos del menú  
function mostrar(e){  
    e.show();  
}  
//función que los oculta
function ocultar(e){  
    e.find("li").hide();  
    e.find("li.active").show();  
}

Y con esto ya tienes un menú desplegable chulo chulo que poner en tu web.

Validación nativa de formularios en HTML5

en por Donnie Rocken HTML5, InformáticaDeja un comentario

Seguimos con las virtudes de HTML5, y el como en principio este nuevo standar nos facilitará la vida a los programadores web. Porque una de las evoluciones más potentes que incorpora es la validación de formularios de forma nativa, sin necesidad de Javascript (da la impresión de que a largo plazo la idea es cargarse este lenguaje cliente).

Como ya sabéis, tenéis varios tipos de input, que paso a listar debajo:

  • search: Para cajas de búsqueda
  • number: Para añadir o restar números mediante botones.
  • range: Para seleccionar valores dentor de un rango.
  • color: Para seleccionar un color.
  • tel: Para números de teléfono.
  • url: Para direcciones web.
  • email: Para direcciones de correo electrónico.
  • month: Para meses.
  • date: Para fechas.
  • week: Para semanas.
  • time: Para horas.
  • datetime: Para una fecha exacta, absoluta y con hora
  • datetime-local: Para fechas locales y frecuencia

Al definir el tipo de campo la validación de formato ya se realiza de forma nativa sin necesidad de tener que recurrir a una expresión regular. Pero si queréis una validación más compleja (por ejemplo, que el teléfono sólo pueda empezar por 6, 9 u 8, que son las tres posibilidades en España) podéis recurrir al atributo pattern, que nos permite insertar un patrón, con el estilo de una expresión regular, para validar el contenido. Y eso no es todo, si queréis que el campo sea obligatorio basta con añadir el atributo required, y ya de forma nativa se comprueba que haya datos. Con el atributo title podéis introducir el texto que queréis que se muestre en el tool tip que saldrá para informaros del error. Podéis ver varios ejemplos:

<input type="email" title="Use el siguiente formato: direccion@mail.com" required/><!--Esto validaría un correo electrónico de forma nativa-->
<input class="hiddenSpellError" type="text" />type="text" pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" name="email" required/> <!-- Esto validaría un correo electrónico con una expresión regular -->
<input class="hiddenSpellError" type="text" />type="date" /> <!--Esto nos sacaría un "datepicker" para seleccionar una fecha (varía según navegador)-->

Ya lo veis, la validación es fácil. Pero además, resaltar los campos erróneos se facilita también con CSS3, ya que aparece una nueva pseudo-clase: invalid. Esto nos ahorra tener que andar jugando con javascript para marcarlos. Con la pseudoclase, basta con una sencilla regla CSS para conseguirlo, sin tener que capturar ningún evento:

input:invalid{
  border: 1px solid red;
  color: red;
}

Sólo con ese código los campos inválidos ya se pondrán automáticamente en rojo, quedando resaltados.

De momento no todos los navegadores dan soporte a la validación nativa en HTML5, pero es evidente el potencial de esta característica, que proveerá de gran productividad y comodidad al programador.