Programando con Rupert

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

Tag: CSS

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.

Animaciones en JQuery

En el artículo anterior expuse un listado de los diferentes selectores que podemos utilizar para trabajar con JQuery. En este artículo veremos algunas de las funciones que nos aporta JQuery para crear ciertas animaciones en nuestro HTML.

Como suele ocurrir con la mayoría de estos frameworks, vamos a tener animaciones integradas en JQuery y podremos crear las nuestras.

Animaciones integradas

Estas funciones permiten mostrar y ocultar un elemento alterando su valor de opacidad. Se les indica el tiempo que tarda en realizar la transición en milisegundos, o bien un string (‘slow‘ o ‘fast‘).

Algunas de las animaciones integradas son:

  • .fadeIn() – El elemento va apareciendo lentamente
  • .fadeOut() – El elemento va desapareciendo lentamente
  • .hide() – Oculta el elemento
  • .show() – Muestra el elemento
  • .slideDown() – El elemento se va desplegando de manera vertical

Animaciones Personalizadas

Para crear animaciones personalizadas, tenemos el método .animate(), que lo que hace es crear una transición entre los atributos css iniciales del elemento y los nuevos atributos css que se establezcan como opciones del método.

Orden de Animaciones

De manera predeterminada JQuery empieza a ejecutar las animaciones a la vez, ya que lo considera una tarea asíncrona. Por lo tanto, a no ser que se ejecuten dos animaciones sobre el mismo elemento (que en ese caso encolará las animaciones sobre el mismo elemento), siempre se ejecutarán a la vez las diferentes animaciones.

Así que si queremos encadenar animaciones entre diferentes elementos, deberemos utilizar los callbacks. Todos los métodos de animación (incluido el .animate()), tienen un parámetro que hace referencia al callback, es decir, la función que se ejecutará cuando la animación termine.

Teniendo esto en cuenta, vamos a modificar el primer ejemplo haciendo que el contenido2 se muestre sólo cuando se oculte el contenido1.

Con esto hemos visto algunas de las animaciones básicas y cómo podemos crear nuestras animaciones.

¡Hasta la próxima!

Rupert.

Selectores CSS – JQuery

En el artículo anterior, escribí acerca de las funciones básicas de JQuery con respecto al documento HTML. Todas ellas se aplican sobre elementos HTML. Lo que voy a escribir en este artículo, es precisamente una recopilación de selectores que podemos utilizar para recuperar elementos del documento HTML.

Mientras que Javascript tiene cuatro selectores:

  • getElementById(id) – Recupera un elemento por su id
  • getElementsByName(name) – Recupera un array de elementos por su nombre
  • getElementsByTagName(tagname) – Recupera un array de elementos por su etiqueta
  • getElementsByClassName(classname) – Recupera un array de elementos por su clase css

JQuery utiliza el amplio abanico de selectores de CSS. De tal manera que si necesitamos aplicar un color de fondo azul a todas las etiquetas <li> dentro de un elemento con el id “listaProductos“, sólo tendríamos que aplicar esta instrucción:

$(“#listaProductos li”).css(“background-color”,”blue”);

A continuación muestro un listado de los selectores CSS más importantes, basándome en la tabla creada en W3Schools (http://www.w3schools.com/cssref/css_selectors.asp), así que si queréis más información podéis acceder al enlace:

Selector
Ejemplo
Descripción del Ejemplo
.intro
Selecciona elementos de la clase “intro”
#firstname
Selecciona elementos con el id=”firstname”
*
*
Selecciona todos los elementos
p
Selecciona los elementos <p>
div,p
Selecciona los elementos <p> y los elementos <div>
div p
Selecciona los elementos <p> dentro de las etiquetas <div>
div>p
Selecciona los elementos <p> cuya etiqueta padre es un <div>
div+p
Selecciona los elementos <p> que se encuentren directamente después de un <div>
p~ul
Selecciona todos los <ul> que van precedidos de un <p>
[target]
Selecciona todos los elementos con el atributo “target”
[target=_blank]
Selecciona todos los elementos con el atributo target=”_blank”
[title~=flower]
Selecciona todos los elementos cuyo title contenga la palabra “flower”
[lang|=en]
Selecciona todos los elementos cuyo atributo lang comience por “en”
a[src^="https"]
Selecciona todos los <a> cuyo src comienza por “https”
a[src$=".pdf"]
Selecciona todos los <a> cuyo src termina con “.pdf”
a[src*="w3schools"]
Selecciona todos los <a> cuyo src contiene “w3schools”
a:active
Selecciona los enlaces activos
input:checked
Selecciona los input checked
input:disabled
Selecciona los input deshabilitados
p:empty
Selecciona los <p> vacíos
input:enabled
Selecciona los input habilitados
p:first-child
Selecciona los <p> que son el primer hijo del padre
p::first-letter
Selecciona la primera letra de los <p>
p::first-line
Selecciona la primera línea de los <p>
input:focus
Selecciona los input que tienen el foco
a:hover
Selects links on mouse over

Esta tabla os puede servir de referencia al crear vuestros selectores, ya que si se trabaja correctamente con ellos nos pueden ahorrar muchísimo código.

Aunque también es posible que obtengamos elementos de HTML por medio de Javascript básico. Por ejemplo, si queremos crear un elemento mediante Javascript y tratarlo después con JQuery.

Con esto ya hemos visto lo básico para poder comenzar a utilizar selectores en nuestras páginas.

¡Hasta la próxima!

Rupert.

© 2019 Programando con Rupert

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