Chalalo Land

Tecnologías ASP.NET y un poco Más

Contacto


 Si quierer cooperar, yo feliz, muy agradecido :)

De donde me Visitan?

Locations of visitors to this page

Generic Content

Si te gustaron los articulos, y te animas te estaría muy agradecido!


Recent Posts

Tags

Community

Blogs de MVP

Amigos Geeks

Blogs Imperdibles

GODS

Archives

Email Notifications

Modernizr–Ejemplo práctico 2 : Utilizando Border Radius, elemento date y atributo required

Hola que tal, este vez revisaremos tres ejemplos prácticos en donde podemos utilizar modernizer para detectar características del browser y decidir según la disponibilidad de ellas que hacer, como por ejemplo, incluir librerías o polyfills para mitigar el problema. Puedes ver mi articulo anterior en donde iniciamos esta serie de ejemplos prácticos.

Vamos dos problemáticas , la de la archi nombrada característica de HTML5 de bordes redondeados,también el nuevo elemento date formulario y por ultimo la propiedad “required” de los elementos del formulario.

Ejemplo:

Veamos que cuenta con las siguientes características HTML5:

  1. Bordes Redondeados
  2. Campo Date en el formulario
  3. Campo Date es obligatorio

<!DOCTYPE html>
<html lang="en">
    <head>

        <meta charset="utf-8" />

        <title>Demo</title>

        <style type="text/css">

            form{

                 background-color:#9fbfa3;

                 width:300px;

                 padding:15px;

                 border-radius:10px;

                }

           

        </style>

    </head>

    <body>

        <form id="formulario" action="#">

           <label for="TxFecha">Seleccione Fecha</label>

           <input type="date" name="TxFecha" id="TxFecha" required>

           <input type="submit" id="btEnviar" value="Enviar">

        </form>

    </body>

</html>

El resultado en un IE9 es:

image

Si bien existen el soporte a bordes redondeados, no se soporta el campo email ni el atributo “required”

IE7 (Probando con IE9 En modo explorador IE7), no existe soporte para ninguna funcionalidad.

image

En Chrome (16.0.912.77 m), si bien se soporta además el atributo required, no se soporta el campo date:

image

Veamos ahora en Firefox 9.0.1, al igual que Chrome, no se soporta el campo date.

image

El turno de Safari, no soporta required y si bien soporta el campo fecha, lo hace de una manera deficiente a mi parecer, pero al fin y al cabo, lo soporta.

image

Opera, al menos para nuestro ejemplo, lleva la delantera soportando todas las funcionalidades.

image

Ahora vemos como arreglar el código para que exista soporte para bordes redondeados para todos los navegadores:

Primero vamos a ver como solucionar el tema del Borde Redondeado.

Los pasos a seguir serán:

  • Agregar librería Modernizr y jQuery (estoy utilizando versiones de desarrollo)
  • Agregar, solo para asegurarnos de compatibilidad hacia atrás, las propiedades CSS para border radius propietarias.
  • Agregar y ejecutar la librería jquery.corner en el caso de que el browser no soporte nativamente la característica de bordes redondeados, de manera que este script proporcione la funcionalidad, notar que es lazy download, es decir solo se va cargar esta librería cuando se necesite.

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8" />

        <title>Demo</title>

       <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>

        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js"></script>

        <style type="text/css">

            form{

                 background-color:#9fbfa3;

                 width:300px;

                 padding:15px;

                 -moz-border-radius: 10px;

                 -webkit-border-radius:10px;

                 border-radius: 10px;

                }

           

        </style>

    </head>

    <body>

        <form id="formulario" action="#">

           <label for="TxFecha">Seleccione Fecha</label>

           <input type="date" name="TxFecha" id="TxFecha" required="true">

           <input type="submit" id="btEnviar" value="Enviar">

        </form>

    </body>

 

</html>

<script type="text/javascript">

        if (!Modernizr.borderradius) {

            $.getScript("js/jquery.corner.js", function () {

                $("form").corner();

            });

        }

</script>

Si ejecutamos esta página en IE7 veremos:

image

Es decir, ya no hay problema de los bordes redondeados, ahora continuemos con el calendario, para esto vamos a utilizar JqueryUI, el script de calendario, para ello seguiremos los siguientes pasos:

  • Determinar si el navegador soporta el tag input type=”date” mediante modernizer
  • En caso que el browser no cuente con esta característica, cargar el script de jQueryUI y asignárselo al campo fecha, además de cargar dinámicamente el CSS asociado.

if (!Modernizr.inputtypes.date) {

$.getScript("http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/jquery-ui.min.js", 
function ()
{
 

  var css = jQuery("<link>");

  css.attr({ rel:  "stylesheet",

         type: "text/css",

         href: "http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/themes/ui-lightness/jquery-ui.css"

                           });

       $("head").append(css);

       $("#TxFecha").datepicker();

    });

}

Ahora ejecutamos en IE y veremos

image

Tenemos bordes redondeados y calendario, pero falta el validador, esta vez no usé jQuery-Validator, ya que lo consideré mucho para un solo campo, pero obviamente consideraría JV para la próxima, en este caso, yo mismo hice una validación de requerido, obviamente es solo a modo de ejemplo, le queda mucho ser algo para producción.

if (!Modernizr.input.required){

               $("#formulario").submit(function(){

                  if ($("#TxFecha").val().length==0){

                    return fallo();

                   }else{

                    return normal();

                   }

 

               });

 

               $("#TxFecha").focus(normal);

        }

               function normal(){

                     $("#TxFecha").css("background","white");

                     $("#TxFecha").css("color","black");

                     $("#TxFecha").val("");

                     return true;

               }

 

               function fallo(){

                       $("#TxFecha").css("background","red");

                       $("#TxFecha").css("color","white");

                       $("#TxFecha").val("Este campo es necesario");

                       return false;

                  

                   }

Luego al probarlo, tenemos lo siguiente:

image

Si bien no es lo mismo, podemos lograr un efecto más deseado con distintos plugins.

Para terminar veamos las cargas de archivos con los dos navegadores (obviamente todos van a cargar jQuery y Modernizr)

IE7 (todos los polyfills)

image

IE9(Solo jQueryUI, ya que soporta bordes redondeados)

image

Firefox(Solo jQueryUI, ya que soporta bordes redondeados)

image

Chrome(Solo jQueryUI, ya que soporta bordes redondeados)

image

Opera (No necesita cargar pollyfills)

image

Como puedes ver, solo se cargan los scripts cuando se les necesita, aumentando el rendimiento.

Espero que les sirva!
Saludos,

Posted: 25/1/2012 5:12 por Gonzalo Perez | con 4 comment(s)
Archivado en: ,,
Comparte este post:

Comentarios

Chalalo Land ha opinado:

Este post viene a modificar el ejemplo anterior , es uno en donde ocupamos elementos HTML5 y Modernizr

# January 25, 2012 11:18 PM

Chalalo Land ha opinado:

Hola!, les dejo el material que utilicé con para el WebCast sobre htm5 de ayer, si bien estuvo

# February 16, 2012 11:13 PM

Hernan.NET ha opinado:

Estimado:

Es posible descargar el código de ejemplo?

saludos,

Hernán

# June 21, 2012 7:10 PM

Gonzalo Perez ha opinado:

Claro que si, enviame un correo para enviartelo.

Saludos,

# June 26, 2012 3:32 PM