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

Introducción

Siguiendo con la serie de post sobre como darle un toque Metro a nuestras aplicaciones ASP.NET (Aquí el primero de la saga si te lo perdiste), en este post vamos a ver otro plugin de jQuery – jqMetro para simular un Pivot como el de Windows Phone 7.

Aunque en este caso, no tendremos el problema del ancho de pantalla.

Lo primero como viene siendo habitual, es descargar los archivos necesarios para hacer funcionar todo esto en nuestra aplicación ASP.NET MVC:

Una vez descargados, tenemos que añadirlos a sus correspondientes carpetas dentro de nuestra aplicación.

El fichero jquery.metro.css lo ponemos dentro en la carpeta Content

image

Y el fichero jquery.metro.js dentro de la carpeta Scripts

image

Lo siguiente, será referenciar estos archivos en la página maestra que está ubicada en la carpeta Views/Shared/_Layout.cshtml

image

Añadimos las líneas resaltadas en amarillo:

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link type="text/css" rel="Stylesheet" href="@Url.Content("~/Content/jquery.metro.css")" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.metro.js")"></script>
</head>

Nota: Todo esto se puede hacer de manera más elegante y reutilizable con un Helper de MVC. Puedes mirar este otro artículo que escribí en su día Creando HTML Helpers personalizados en ASP.NET MVC 3 donde hice algo parecido con una librería de script.

A continuación vamos a la página Views/Home/Index.cshtml (Nuestra Home) para añadir nuestro pivot. Para añadir un pivot a nuestra página necesitamos el siguiente fragmento de código HTML

<div class='metro-pivot'>
    
</div>

Que no es ni más ni menos que un tag div con la clase metro-pivot.

Una vez que tenemos el pivot, vamos a añadir un pivot item. Para añadir un pivot item necesitamos este  fragmento código HTML:

<div class='metro-pivot'>
    <div class='pivot-item'>
        <h3>new</h3>
    </div>
</div>

Al igual que el pivot, el pivot item es un tag div pero con la clase pivot-item.

En el ejemplo que os quiero mostrar a continuación, he querido simular una página con incidencias que serán filtradas por estado. Cada estado está representado con un pivot item:

<div class='metro-pivot'>
    <div class='pivot-item'>
        <h3>new</h3>
    </div>
    <div class='pivot-item'>
        <h3>open</h3> 
    </div>
    <div class='pivot-item'>
        <h3>closed</h3> 
    </div>
    <div class='pivot-item' id='all'>
        <h3>all</h3>
    </div>
</div>

Por último, nos falta la magia, la llamada a la función jQuery para convertir este código HTML en el elemento pivot de Windows Phone 7. Para ello añadimos el siguiente fragmento de javascript antes del elemento body de la página:

<script type="text/javascript">
    $("div.metro-pivot").metroPivot();
</script>

Ejecutamos nuestra aplicación y voilá, ya tenemos nuestro pivot funcionando!!!

image

Si vamos pinchando en los pivot items, veremos como simula el funcionamiento del pivot de WP7:

image

Hasta aquí cubriríamos la parte básica de este control. En el próximo post veremos algunos aspectos avanzados que nos ayudarán a darle más riqueza a nuestra aplicación y como cargar contenido dinámico dependiendo del pivot item que seleccionemos.

Hasta la próxima!

Código fuente

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

  1. @Santi Muchisímas gracias, se agradecen este tipo de comentarios y sobre todo saber que es útil la información.

    @Carlos Muy buen enlace, me lo apunto. Gracias

Deja un comentario

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