JQuery, parte 10: UI

Ferchu Javascript, Jquery

Los UI (User interface o Interfaces de usuario) permiten extender funcionalidades en nuestros proyectos web en cuanto al aspecto visual, consiguiendo de esta forma crear aplicaciones más ricas.

Existen muchos UI para realizar distintas cosas en nuestro proyectos, algunos fueron creados por Jquery y otros por la comunidad de usuarios que utiliza este framework. Basta con abrir google, buscar cómo hacer tal cosa con Jquery y seguro lo encontramos.

A continuación mostraré algunos ejemplos que pueden servirles. Aclaro que al ser extensiones de Jquery los mismos deberán cargar librerías externas (archivos .js y .css). Ustedes pueden descargar esas librerías para no tener que apuntar a url de otras páginas.

.sortable()

Éste tal vez no sea una de los más utilizadas, pero es uno de mis preferidas. Nos permite ordenar una lista:

Ver ejemplo

<!DOCTYPE html>
<html>
 <head>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script type="text/javascript">
       $(document).ready(function(){
          $("#lista").sortable();
       });
    </script>
    <style type="text/css">
       #lista li {color: #fff; background-color: #000; list-style: none; width: 200px; height: 20px; border: solid 1px #000; font-size: 16px; margin-bottom: 10px; padding: 2px; cursor: move;}
    </style>
 </head>
 <body>
    <ul id="lista">
       <li> Item 1 </li>
       <li> Item 2 </li>
       <li> Item 3 </li>
       <li> Item 4 </li>
       <li> Item 5 </li>
    </ul>
 </body>
</html>

.dialog()

Tiene una suerte de alert() sólo que con un aspecto más moderno y no tan web de la década de los 90.

Ver ejemplo

<!DOCTYPE html>
<html>
 <head>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript">
       $(document).ready(function() {
          $("#dialog").dialog();
       });
    </script>
 </head>
 <body>
    <div id="dialog" style="display: none;" title="T&iacute;tulo"> Hola mundo </div>
 </body>
</html>

.draggable()

Este método al aplicarse a un elemento permite que ese elemento se pueda mover con el mouse.

Ver ejemplo

<!DOCTYPE html>
<html>
 <head>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
       #draggable { width: 100px; height: 70px; background: silver; cursor: move;}
    </style>
    <script type="text/javascript">
       $(document).ready(function() {
          $("#draggable").draggable();
       });
    </script>
 </head>
 <body>
    <div id="draggable"> Moveme </div>
 </body>
</html>

.tabs()

Permite crear contenido con solapas.

Ver ejemplo

<!DOCTYPE html>
<html>
    <head>
       <script type="text/javascript" src="js/jquery.js"></script>
       <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
       <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
       <script type="text/javascript">
          $(document).ready(function() {
             $("#tabs").tabs();
          });
       </script>
 </head>
 <body>
    <div id="tabs">
       <ul>
          <li><a href="#fragment-1"><span>Html</span></a></li>
          <li><a href="#fragment-2"><span>Css</span></a></li>
          <li><a href="#fragment-3"><span>Javascript</span></a></li>
       </ul>
       <div id="fragment-1">
          <p> HTML, siglas de HyperText Markup Language («lenguaje de marcado de hipertexto»), hace referencia al lenguaje de marcado predominante para la elaboraci&oacute;n de p&aacute;ginas web que se utiliza para describir y traducir la estructura y la informaci&oacute;n en forma de texto, as&iacute; como para complementar el texto con objetos tales como im&aacute;genes. El HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>). HTML tambi&eacute;n puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo, JavaScript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.1 </p>
          <p> Fuente: <a href="https://es.wikipedia.org/wiki/Html"> Wikipedia </a> </p>
       </div>
       <div id="fragment-2">
          <p> La idea que se encuentra detr&aacute;s del desarrollo de CSS es separar la estructura de un documento de su presentaci&oacute;n. </p>
          <p> La informaci&oacute;n de estilo puede ser adjuntada como un documento separado o en el mismo documento HTML. En este &aacute;ltimo caso podr&iacute;an definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "style". </p>
          <p> Fuente: <a href="https://es.wikipedia.org/wiki/Css"> Wikipedia </a> </p>
       </div>
       <div id="fragment-3">
          <p> JavaScript es un lenguaje de programaci&oacute;n interpretado, dialecto del est&aacute;ndar ECMAScript. Se define como orientado a objetos,3 basado en prototipos, imperativo, d&eacute;bilmente tipado y din&aacute;mico. </p>
          <p> Fuente: <a href="https://es.wikipedia.org/wiki/Javascript"> Wikipedia </a> </p>
       </div>
    </div>
 </body>
</html>

.datepicker()

Este tal vez sea el UI más popular de Jquery y si no lo es uno de los más populares. Se trata de un calendario que se puede aplicar a los text «input» para de esta manera hacer más amigable las entradas de fechas a los campos de formulario.

Ver ejemplo

<!DOCTYPE html>
<html>
 <head>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript">
       $(document).ready(function() {
          $("#calendario").datepicker();
       });
    </script>
 </head>
 <body>
    <form>
       <input type="text" id="calendario" />
    </form>
 </body>
</html>

.tablesorter()

Es uno de los más usados y útiles que se han creado hasta la fecha en Jquery. Permite la posibilidad de ordenar una tabla por sus columnas, algo bastante útil para los usuarios en tablas con mucha información.

Ver ejemplo

<!DOCTYPE html>
<html>
 <head>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script src="https://tablesorter.com/__jquery.tablesorter.min.js"></script>
    <script type="text/javascript">
       $(document).ready(function() {
          $("#tabla_sur_america").tablesorter();
       });
    </script>
    <style type="text/css">
       #tabla_sur_america th, #tabla_sur_america td {border: solid 1px #000; width: 200px; text-align: center;}
       #tabla_sur_america th {background-color: #999; color: #fff; cursor: pointer;}
    </style>
 </head>
 <body>
    <table id="tabla_sur_america">
       <thead> 
          <tr> 
             <th> Nombre </th>
             <th> Capital </th>
             <th> Cantidad de habitantes </th>
          </tr>
       </thead> 
       <tbody> 
          <tr> 
             <td> Argentina </td>
             <td> Buenos Aires </td>
             <td> 40117096 </td>
          </tr>
          <tr> 
             <td> Bolivia </td>
             <td> La Paz </td>
             <td> 10389913 </td>
          </tr> 
          <tr> 
             <td> Brasil </td>
             <td> Brasilia </td>
             <td> 193946886 </td>
          </tr>
          <tr> 
             <td> Chile </td>
             <td> Santiago </td>
             <td> 16572475 </td>
          </tr>
          <tr> 
             <td> Colombia </td>
             <td> Bogot&aacute; </td>
             <td> 46871321 </td>
          </tr> 
          <tr> 
             <td> Ecuador </td>
             <td> Quito </td>
             <td> 14483499 </td>
          </tr>
          <tr> 
             <td> Paraguay </td>
             <td> Asunci&oacute;n </td>
             <td> 6672631 </td>
          </tr>
          <tr> 
             <td> Per&uacute; </td>
             <td> Lima </td>
             <td> 30475144 </td>
          </tr>
          <tr> 
             <td> Uruguay </td>
             <td> Montevideo </td>
             <td> 3286314 </td>
          </tr>
          <tr> 
             <td> Venezuela </td>
             <td> Caracas </td>
             <td> 28946101 </td>
          </tr>
       </tbody> 
    </table> 
 </body>
</html>

Descargar ejemplos

Anterior: JQuery, parte 9: Animaciones

Siguiente: JQuery, parte 11: Ajax

2 Replies to “JQuery, parte 10: UI”

  1. Nuevamente para felicitarte y agradecerte por los tutoriales que tienes en tu pagina web. YA venia yo practicando varias cosas de programacion pero con tus manuales se ha reafirmado el conocimiento ya que los explicas muy bien, por lo menos asi lo veo yo que soy novato en esto de la programacion. Excelente material y gracias Fernando.

Comments are closed.