[ASP.NET] Dale un toque Metro a tus aplicaciones ASP.NET con jQuery (I)

Ahora que está tanto de moda el tema Metro, tanto por la llegada de Windows Phone 7, como por la salida de la nueva versión de Windows 8 Consumer Preview, los desarrolladores que trabajamos con ASP.NET podemos dar un toque Metro a nuestras aplicaciones.

Voy a empezar por jQUIT Builder, que es una herramienta que nos permite crear temas (Entre ellos Metro, Mango y Windows 8) para jQuery UI

image

Por ejemplo, podemos ver en la siguiente imagen como quedaría un acordeón o las pestañasde jQuery UI:

image

Vamos a ver como añadimos estos estilos a una aplicación ASP.NET MVC. Lo primero es descargar el tema que queremos. Yo voy a descargar el tema Metro:

image

Guardamos el zip y extraemos su contenido:

image

Como se observa en la imagen, tenemos 2 carpetas:

  • css: Contiene los estilos y las imagenes que darán el aspecto Metro a los controles de jQuery UI.
  • js: Contiene los archivos javascripts de jQuery y jQuery UI

Si abrís las página index.html, tenéis un ejemplo de como quedan algunos controles de jQuery UI una vez que aplicamos los estilos Metro:

image

Una vez visto esto, vamos a ver como añadir estos estilos a nuestra aplicación ASP.NET MVC. Para ello vamos a crear una aplicación de ejemplo:

image

En mi caso voy a usar la plantilla Internet Application y el motor de vistas Razor:

image

Una vez creada la aplicación, expandimos la carpeta Content tal cual vemos en la imagen:

image

Como podemos observar en la imagen, tenemos una carpeta themes, que a su vez tiene dentro otra carpeta que se llama base. Dentro de esta carpeta base, están los css de jQuery UI y una carpeta con las imagenes. Del zip que descargamos, vamos a añadir los siguientes archivos a esta carpeta tal cual se muestra en la siguiente imagen:

image

Al directorio images añadimos las 4 imagenes de nuestro jMetro:

image

y al directorio base le añadimos el css cpn las customizaciones Metro:

image

Ya tenemos los css y las imagenes necesarias en nuestra aplicación. A continuación vamos a añadir este css y una referencia a los javascripts de jQuery y jQuery UI a nuestra página maestra (_Layout.cshtml) tal cual os muestro a continuación:

<head>

    <title>@ViewBag.Title</title>

    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

    <link href="@Url.Content("~/Content/themes/base/jquery-ui-1.8.16.custom.css")" rel="stylesheet" type="text/css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> 

    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>

</head>

En este caso he optado por usar CDN para incluir la última versión de los js.

Ahora, vamos añadir el siguiente código a nuestra página Index.cshtml para crear el acordeón:

@{

    ViewBag.Title = "Home Page";

}

 

<script type="text/javascript">

    $(document).ready(function () {

        $("#accordion").accordion({ header: "h3" });

    });

</script>

 

<div id="wrapper">

    <h2 class="header">Real Madrid</h2>

    <div id="accordion">

        <div>

            <h3><a href="#">El Real Madrid vuelve al trabajo</a></h3>

            <div>La plantilla se ejercitará este viernes, tras disfrutar de un día...</div>

        </div>

        <div>

            <h3><a href="#">Khedira firmó ante el CSKA el mejor comienzo de un jugador del Madrid en la Copa de Europa</a></h3>

            <div>El alemán encadena 13 encuentros sin conocer la derrota y ya es el que más...</div>

        </div>

        <div>

            <h3><a href="#">El Real Madrid conocerá este viernes a su rival en los cuartos de la Champions</a></h3>

            <div>Los blancos pueden medirse a Milan, Chelsea, Benfica, Barcelona, Apoel...</div>

        </div>

    </div>

</div>

Salvamos nuestro proyecto y ejecutamos para ver el resultado:

image

Ya tenemos nuestra aplicación ASP.NET MVC con un toque Metro. En la siguiente entrega veremos otro plugin de jQuery para hacer Pivot

Os dejo el código fuente para que podáis echarle un vistazo. He modificado algunos estilos de la hoja que viene por defecto Site.css para que se vean algunos cosas que no se veían y además he cambiado la fuente a Segoe UI

Buen fin de semana a todos!!!

2 comentarios en “[ASP.NET] Dale un toque Metro a tus aplicaciones ASP.NET con jQuery (I)”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *