Leo en aNieto2K que ha salido a la luz la versión 1.3 de jQuery. Entre las novedades nos encontramos con un nuevo selector de elementos (Sizzle), delegación de eventos, el elemento Event, inyección HTML reescrita.
Andrés lo cuenta muy bien en su blog.
jQuery 1.3
Vía / aNieto2k
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()));
});HTML5 a parte de añadir nuevas etiquetas, también incluye otras posibilidades javascript, como los Web Workers, los cuales permiten ejecutar scripts en paralelo (background). Por ejemplo, tenemos un proceso costoso en recursos que no es interrumpible, podemos utilizar un Worker y evitar que el navegador se nos colapse.
Su uso es bastante sencillo, se instancia un Worker que estará en un fichero javascript independiente, se indica qué hacer cuando se reciba un mensaje y ya solo queda que el javascript y el Worker se comuniquen mandándose mensajes.
El script que instancia el Worker sería así:
// Crea el Web Worker
var worker = new Worker("worker.js");
// Envía un mensaje al worker
worker.postMessage(0);
// Recibe los mensajes del Worker
worker.onmessage = function (evt) {
// evt.data es el valor devuelto por el Worker
alert(evt.data);
}
// Trata los errores
worker.onerror = function (evt) {
alert(evt.data);
}Y el worker.js sería el siguiente:
// Ejemplo de Worker
onmessage = function (evt) {
// evt.data es el valor enviado desde el javascript
for (var i=evt.data, il=1000001; iLos Workers también admiten el evento onconnect, aunque tan sólo he visto que funcione en Webkit:
onconnect = function(evt) {
postMessage('Hola, acabas de conectarte al Worker');
}Using HTML5 Web Workers to have background computational power
Interesante librería que nos permite trabajar con DOMDocument de una forma sencilla, permite xpath y namespaces. La librería me recuerda a QueryPath, la cual realiza funciones similares.
echo FluentDOM($xml)
->node(
FluentDOM($samples)
->find('//b[@id = "first"]')
->removeAttr('id')
->addClass('imported')
)
->replaceAll('//p');Boomerang es una librería desarrollada por Yahoo que permite medir diferentes aspectos de rendimiento de nuestra web desde la perspectiva del usuario final. Añadiendo un script y distintas funciones, podemos comprobar diversos aspectos de nuestra web como:
BOOMR.init({
user_ip: "",
beacon_url: "http://yoursite.com/path/to/beacon.php",
BW: {
base_url: 'http://yoursite.com/path/to/bandwidth/images/"
}
}); Además permite etiquetar páginas para realizar distintos tests y poder compararlos, realizar tests a usuarios aleatorios y evitar abusos de uso
Vía / WebAppers
Curioso y sencillo plugin de jQuery que permite crear previews de imágenes enlazadas en etiquetas <a> tanto directamente en el atributo href como en el rel. Permite añadir estilos, un contenedor e incluso eventos (onload, onhide, onshow).
$('ul#fourth a').imgPreview({
containerID: 'imgPreviewWithStyles',
imgCSS: {
// Limit preview size:
height: 200
},
// When container is shown:
onShow: function(link){
$('' + $(link).text() + '').appendTo(this);
},
// When container hides:
onHide: function(link){
$('span', this).remove();
}
});Algo que considero necesario a la hora de programar en Javascript es conocer el DOM. Aunque hay gente que prefiere la creación de objetos mediante innerHTML, incluso hay estudios sobre cual es más eficiente, siempre viene bien saber utilizar el DOM para poder manejar elementos HTML.
Si no controlas el uso del DOM, aquà os dejo un tutorial bastante claro que os ayudará a meteros de lleno. De todas formas, tambien recomendaros una página XULPlanet, la cual es una de mis favoritas para buscar documentación sobre los objetos HTML.
W3C DOM
VÃa / dzone