Una de las características más interesantes de HTML5 es el browser storage, el cual nos permite almacenar datos en el navegador del cliente.
A parte de su uso básico:
localStorage.setItem('name', 'arman');
var value = localStorage.getItem('name');
localStorage.removeItem('name');
Me gustaría destacar dos puntos importantes: detectar si el navegador lo soporta y añadir eventos:
var webStorageSupported = ('localStorage' in window) && window['localStorage'] !== null;
if (window.addEventListener) {
window.addEventListener("storage", handleStorageChange, false);
} else {
window.attachEvent("onstorage", handleStorageChange);
}
function handleStorageChange(event) {
alert("Algo esta cambiando en el almacenamiento");
}
En algunas ocasiones es necesario añadir contenido al calendario que te ofrecer el datepicker de jQuery UI, por ejemplo añadir un combo que indice “horario mañanas/tarde”. Para conseguirlo será necesario ‘toquetear’ un poco el objeto jQuery.datepicker.
Tendremos que hacer dos cosas: primero deberemos evitar que cuando se selecciona un día se cierre automáticamente el popup con el calendario y después tendremos que modificar el HTML que devuelve la clase.
Para evitar el auto-cierre tenemos que añadir la opción showButtonPanel ya que nos ofrecerá el botón “Close” que nos permitirá cerrar el popup cuando hayamos indicado todos los campos necesarios. También es necesario modificar la función jQuery.datepicker._selectDate tal y como lo indican en StackOverflow:
// Añadimos datepicker al input que queremos
jQuery('.fecha')
.datepicker({
showButtonPanel: true,
dateFormat: "DD, d MM, yy"
});
// Modificamos la funcion _selectDate
jQuery.datepicker._selectDateOverload = jQuery.datepicker._selectDate;
jQuery.datepicker._selectDate = function(id, dateStr) {
var target = jQuery(id);
var inst = this._getInst(target[0]);
inst.inline = true;
jQuery.datepicker._selectDateOverload(id, dateStr);
inst.inline = false;
this._updateDatepicker(inst);
// Usar el .html() para luego usar el .text() es porque si usas el regional de datepicker, te salen entidades html en vez de letras acentuadas
// Se le añade el valor del nuevo campo select que hemos incluido
target.val(jQuery('').html(dateStr).text()+' @ '+jQuery('#horario').val());
}
Bien, ya tenemos el evento onSelect modificado, ahora nos falta cambiar el HTML que se dibuja, para ello modificaremos la función jQuery.datepicker._generateHTML:
jQuery.datepicker._generateHTMLExtended = jQuery.datepicker._generateHTML;
jQuery.datepicker._generateHTML = function(inst) {
var html = jQuery.datepicker._generateHTMLExtended(inst);
var div = jQuery('').html(html);
div.find('table:first').after('
Horario:
');
return div.html();
}
// Incluimos tambien un evento para que cuando se seleccione el horario, se modifique el campo input
jQuery('#horario').live('change', function() {
var $obj = jQuery('.fecha');
$obj.val($obj.val().replace(/@.*/, '@ '+jQuery(this).val()));
});
Normalmente el uso que hacemos de las funciones en javascript es bastante sencillo, pero en algún otro momento puede que necesitemos un uso más avanzado.
El tutorial que os paso explica detalladamente todos los usos que podemos realizar de funciones. Lo que yo desconocía era el uso de callee, que tiene un puntero a la función que se está ejecutando en ese instante, fundamental para la recursividad:
Completísimo tutorial que nos explica cómo realizar un lector de feeds usando jQuery Mobile (que actualmente está en versión alpha). Cuyas características son las siguientes:
Mostrar lista de feeds con sus logos
Mostrar el feed cuando se hace click
Crear los estilos para los artículos
Crear un icono Apple-touch para que el usuario pueda añadir la aplicación a su teléfono
Cada dÃa son más los scripts que se realizan con frameworks de Javascript, estos, al estar ayudados por las funcionalidades del framework, son más sencillos de desarrollar, lo que aporta más riqueza a la web2.0. En este caso se trata de un selector de horas, que mediante un reloj se puede seleccionar la hora, moviendo las manillas o indicando si queremos AM o PM.
El script es sencillo de usar e implementar, controla independientemente las manillas de las horas y los minutos, permite mover las manillas para indicar la hora y usa CSS sprits para mejorar la velocidad de carga. NoGray Time Picker
VÃa / WebAppers
AnythingSlider es un plugin jQuery que permite crear slides con cualquier elemento HTML. Permite ir hacia adelante y hacia atrás, enlaces a posiciones en concreto, autoplay, vueltas infinatas, … AnythingSlider jQuery Plugin
Muy interesante, seguramente habrá maneras de recuperar luego esa información, para no perderla en el limbo, o para tener copias, o quizás sincronizarla con algún servicio web…
Josepzin, mientras tanto, yo no pondrÃa información relevante allà por si el usuario la pierde/borra
Saludos
Entonces es lo mismo que una cookie… :/
No necesariamente, ya que, entre otras cosas, las cookies tienen poca capacidad (creo que 4kb o asÃ)
Muy interesante, seguramente habrá maneras de recuperar luego esa información, para no perderla en el limbo, o para tener copias, o quizás sincronizarla con algún servicio web…
Josepzin, mientras tanto, yo no pondrÃa información relevante allà por si el usuario la pierde/borra
Saludos
Entonces es lo mismo que una cookie… :/
No necesariamente, ya que, entre otras cosas, las cookies tienen poca capacidad (creo que 4kb o asÃ)