lunes, 1 de julio de 2013

Jquery metro UI, Añadiendo interfaz estilo metro a tus aplicaciones web

En la mayoría de ocasiones cuando desarrollamos un sitio web, queremos que tenga una interfaz gráfica muy amigable y atractiva para el usuario y también nos preocupamos por que dicha interfaz sea liviana y no afecte el desempeño de nuestra aplicación, con la ultima tendencia de interfaz estilo metro vemos que los sitios web son muy atractivos visualmente y que además dicha interfaz es bastante liviana y permite una ágil navegación a través del sitio, por esto considero que es una gran alternativa a la hora de diseñar nuestro sitio web.

En este artículo vamos a ver como incorporar de una forma muy sencilla, interfaz estilo metro a nuestras aplicaciones web, utilizando librerías de Jquery para lograrlo.

comencemos por referenciar las librerías y estilos básicos de Jquery:

<link href="Styles/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script>

Ahora debemos descargar el tema que nos permitirá que se aplique el estilo metro a todos los widgest de Jquery que tengamos en nuestra página, en la siguiente url podemos generar nuestro tema http://jquit.com/builder, personalizando colores y demás y posteriormente descargar el archivo jquery-ui-1.8.16.custom.min.js que se encargará de aplicar el estilo metro a los widgest y una vez tengamos este archivo lo referenciamos en nuestra página:

<script type="text/javascript" src="Scripts/jquery-ui-1.8.16.custom.min.js"></script>

Con esto logramos que widgest como Accordion, Button, DatePicker, Dialog, Tabs y demás que estemos usando se vean automáticamente con la interfaz metro que queremos, veamos visualmente algunos ejemplos:

Para terminar nuestro ejemplo vamos a ver como crear un menú estilo metro de una manera muy sencilla, en la siguiente url encontramos el API que usaremos: http://jqmetro.codeplex.com/, describe como podemos implementar rápidamente un menú similar o mucho mejor que este:


Solo tenemos que referenciar los siguientes estilos y librería de jquery:

<link href="Styles/jq-metro.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Scripts/jquery.metro-btn.js"></script>

Agregamos un div

<div id="metrobuttons" class="metro-panel">
</div>

Y agregamos botones con la siguiente instrucción:

$("#metrobuttons").AddMetroSimpleButton('bt1''metro-verde''Styles/Images/Acuerdos.png''Acuerdos''#');


Con esto damos por terminado nuestro artículo de como incorporar interfaz estilo metro a nuestras aplicaciones web, espero les sea de gran utilidad, a continuación el link de descarga delos materiales de ejemplo.

https://www.dropbox.com/s/gqjvg767v8i4ybz/JqueyMetroUI.rar

Y también les comparto una buena herramienta muy útil para diseñar iconos con estilo metro:
http://www.syncfusion.com/downloads/metrostudio

Saludos.

3 comentarios:

  1. Tengo una duda. En el ejemplo de la pantalla de confirmación, cómo haces para detonar un procedimiento en el code behind?

    ResponderEliminar
    Respuestas
    1. Hola Luis, hay varias formas de hacerlo, se puede hacer desencadenando el llamado desde el cliente a través de un CallBack o un llamado AJAX, o si no quieres hacerlo con código del lado del cliente puedes incluir en el div que usas para el confirm botones asp.net button que desencadenen un PostBack, y para lograr que haga postback debes declarar el modal de la siguiente forma:

      $(function () {
      $("#dialog-confirm").dialog({
      resizable: false,
      height: 230,
      width: 400,
      modal: true,
      autoOpen: false
      });
      $("#dialog-confirm").parent().appendTo(jQuery("form:first"));
      });
      La linea del form:first es la que permite esto para que lo tengas en cuenta.

      Saludos y buena suerte!!

      Eliminar
  2. Este comentario ha sido eliminado por el autor.

    ResponderEliminar