Programando con Rupert

Cuando la programación es una forma vida...

Tag: JQuery UI

JQuery UI: Datepicker con idioma personalizado

En el artículo de Introducción a JQuery UI que escribí, vimos cómo aplicar un selector de fecha a un input de tipo texto. Pero en el bundle de JQuery UI no viene incorporado el idioma español. Así que si queremos utilizar el datepicker con un idioma en concreto, deberemos tener un código javascript por cada uno que necesitemos.

En este artículo voy a configurarlo para que aparezca según el idioma español. Para eso, voy a crear un fichero llamado datepicker-es.js, que tendrá el siguiente código:

Si no queréis que sea el idioma por defecto, sólo tenéis que eliminar/comentar la instrucción .setDefaults() .

De tal manera que si ahora referenciamos desde nuestra página a este fichero datepicker-es.js, y tenemos el siguiente código HTML…

Al ejecutar mostrará un selector parecido a este:

Con esto ya hemos visto cómo podemos aplicar un idioma personalizado a nuestro datepicker.

¡Hasta la próxima!

Rupert.

JQuery UI: Cuadro de Diálogo

En el artículo anterior escribí sobre algunos de los controles que nos aporta JQuery UI. En este artículo voy a escribir sobre una funcionalidad que, en mi opinión, es de las más importantes a la hora de trabajar con formularios: El cuadro de diálogo.

Mediante este cuadro de diáologo, no sólo podremos mostrar mensajes simples o preguntas de confirmación, si no que además podremos establecer formularios completos, con la ventaja que eso supone de cara al dinamismo de nuestra página.

Lo que voy a hacer en este tutorial es, basándome en el tutorial de Introducción a JQuery UI, añadir un mensaje de confirmación al botón de Insertar.

El código, tal y como había quedado en el tutorial anterior es el siguiente:

Teniendo en cuenta el código, comenzamos a trabajar con el cuadro de diálogo. La primera parte es diseñar el cuadro de diálogo en un div oculto, sin los botones del cuadro diálogo. En este ejemplo preguntaremos “¿Está seguro de que desea registrar el candidato?” Y un mensaje más pequeño. Los botones serán “” y “No“, aunque en esta primera parte no se incluyen.

Una vez tengamos el HTML, sólo queda el código JQuery. En una función Registrar, que se llama desde el evento “onclick” del botón, crearemos el cuadro de diálogo mediante el método .dialog().

Las opciones que hemos utilizado son las siguientes:

  • modal: Indica al cuadro de diálogo si tiene que bloquear la página para que no se pueda utilizar mientras el diálogo está abierto
  • title: Título de la ventana de diálogo
  • width: Anchura de la ventana de diálogo
  • resizable: Indica si el tamaño del cuadro de diálogo es alterable
  • show: Permite establecer un efecto y una duración a la hora de mostrar el cuadro de diálogo
  • hide: Permite establecer un efecto y una duración a la hora de mostrar el cuadro de diálogo
  • buttons: Establece una colección de botones indicando el texto y la función que ejecutarán.

Una vez que se han establecido esas opciones, si se ha de cerrar y abrir el diálogo de nuevo, se puede hacer mediante .dialog(“close”) y .dialog(“open”).

Con esto ya hemos visto la funcionalidad del cuadro de diálogo y el nivel de comunicación con el usuario que esto aporta a nuestras páginas.

¡Hasta la próxima!

Rupert.

Introducción a JQuery UI

Ya hemos visto algunas de las funcionalidades más importantes JQuery. En este artículo voy a exponer algunas de las peculiaridades del proyecto JQuery UI (User Interface). Para lo cual necesitaremos, además de la librería JQuery, un archivo .css con los estilos y la propia librería de JQueryUI.

Podemos descargar la librería JQueryUI de jqueryui.com

De tal manera que las cabeceras quedarían de esta manera:

JQuery UI

JQueryUI es un proyecto de JQuery cuyo objetivo es factilitarnos la vida a la hora de tener que trabajar con la interfaz de usuario. Como he dicho en algún artículo, uno de los problemas principales del Modelo Web “Clásico” es la poca comunicación con el usuario. Por lo tanto JQuery nos va a permitir crear cuadros de diálogo, barras de progreso, selectores de fecha…

Añadiendo JQuery UI a un formulario

Para este ejemplo vamos a tomar este formulario como base y lo vamos a ir modificando. Vamos a suponer un formulario en el cual podemos registrar un candidato para un puesto de trabajo.

Vamos a modificar lo siguiente en este formulario:

  • Añadiremos un tooltip al campo “Fecha de Nacimiento” para especificar el formato que queremos.
  • Añadiremos un selector de fecha al campo “Fecha de Nacimiento
  • Añadiremos un autocompletado al campo “Lenguajes
  • Añadiremos un slider al rango de “Sueldo solicitado

JQuery UI: Tooltip

El tooltip permite explicar el significado de un elemento cuando el usuario se sitúe en dicho elemento. Lo que vamos a hacer ahora es especificar un tooltip al campo “Fecha de Nacimiento“.

Para ello, es necesario especificar qué parte del documento HTML puede funcionar con tooltips:

$(document).tooltip();

A partir de aquí sólo es necesario establecer el atributo “title” en los elementos en los que queramos que aparezca el tooltip:

<input type=”text” name=”fnacimiento” id=”fnacimiento” title=”El formado de la fecha ha ser dd/MM/yy”>

El resultado sería, al pasar el ratón por encima del campo, algo parecido a esto:

JQuery UI: Datepicker

El datepicker permite establecer un selector de fecha en un campo de texto. En nuestro caso vamos a establecer un datepicker al campo “Fecha de Nacimiento“, indicándole el formato de la fecha que buscamos.

$(“#fnacimiento”).datepicker({
dateFormat: ‘dd/mm/yy’
});

Al situar el foco en el campo, aparecerá un selector de fecha:

JQuery UI: Autocomplete

El autocomplete permite que un campo sugiera opciones a la hora de escribir sobre él. El autocomplete admite una opción llamada “source” que recibe una colección de elementos en JSON. En este caso crearemos las opciones a mano, pero se podrían recuperar mediante AJAX.

var lenguajes=[
“Java”,
“PHP”,
“C# .NET”,
“C++”,
“Visual Basic”
];
$(“#lenguajes”).autocomplete({
source: lenguajes
});

Al empezar a escribir sobre el campo “lenguajes“, debería empezar a sugerirnos los Lenguajes que contengan el texto escrito

JQuery UI: Slider

Con el Slider podemos establecer valores numéricos mediante una barra. Puede tener un único valor o gestionar un rango. En nuestro caso vamos a gestionar un rango, el de los campos de Sueldo. Para ello, lo primero que hemos de hacer es crear un <div> en el lugar donde esté ubicado el slider.

<p>
<label>Sueldo Solicitado:</label>
Min:
<input type=”text” name=”sueldoMin” id=”sueldoMin”>
&nbsp;&nbsp;Max:
<input type=”text” name=”sueldoMax” id=”sueldoMax”>
<div id=”rango”></div>
</p>

Una vez tengamos el div correspondiente, se ha de establecer que será un rango y qué se debe hacer cuando se modifiquen los valores. En nuestro caso, cambiarán los valores de “sueldoMin” y “sueldoMax

$(“#rango”).slider({
range: true,
min:600,
max:3000,
values: [800,1200],
slide: function(event,ui){
$(“#sueldoMin”).val(ui.values[0]);
$(“#sueldoMax”).val(ui.values[1]);
}
});

Con esto ya hemos visto para qué nos puede servir JQuery UI. Como habéis podido comprobar, se trata de un proyecto orientado a la interfaz de usuario. El código completo sería este:

En la propia documentación de JQuery UI podréis ampliar lo que hemos visto aquí y ver más opciones de uso.

¡Hasta la próxima!

Rupert.

© 2019 Programando con Rupert

Sé cambiar el Footer, pero me apetece decir que este tema es de Anders NorenParriba' ↑