Está claro que tutoriales hay muchos, pero no todos son iguales, ni están enfocados para un mismo público. En este caso, yo creo que se trata de tutoriales sencillos pensados para empezar de cero, para quien no tenga ningún conocimiento de Javascript, incluso dirÃa que para quienes el HTML es solo una forma de mostrar texto.
Empieza por lo más básico, luego nos introduce los objetos, funciones, tipos básicos, arrays, formularios y validaciones, trabajar con frames. Lo dicho, para empezar creo que es muy adecuado. JavaScript Cake: Tutorials and Scripts
VÃa / dzone
Supongo que lo de “encajar capas HTML” no es algo que se entienda muy bien, pero realmente se trata de eso. Este plugin de jQuery coloca las capas HTHL de tal forma que no queden espacios en blanco entre ellas (algo normal cuando se usa el css float).
Hay que tener cuidado, porque aunque nos devuelve un layout sin espacios en blanco, también nos lo da con un orden no muy usable, por lo que es importante no usar este plugin cuando el orden de colocación importa. jQuery Masonry
Vía / WebAppers
Nunca se para de aprender, y de John Resig menos. DocumentFragments son contenedores ligeros que pueden almacenar objetos DOM de Javascript. Yo ni había oído hablar de ellos y la verdad es que su uso es sencillo y mucho más potente que trabajar con el DOM normalmente (de 2 a 3 veces más rápido).
El ejemplo que muestra John lo dice todo y muy fácil. Primero creamos unos elementos para luego insertarlos (de forma normal y con DocumentFragments):
var div = document.getElementsByTagName("div");
for ( var i = 0; i < div.length; i++ ) {
for ( var e = 0; e < elems.length; e++ ) {
div[i].appendChild( elems[e].cloneNode(true) );
}
}
Y por último el nuevo método:
var div = document.getElementsByTagName("div");
var fragment = document.createDocumentFragment();
for ( var e = 0; e < elems.length; e++ ) {
fragment.appendChild( elems[e] );
}
for ( var i = 0; i < div.length; i++ ) {
div[i].appendChild( fragment.cloneNode(true) );
}
Resumiendo, mucho más eficiente y sencillo de usar. Seguro que para la próxima versión de jQuery nos ofrece esta implementación.
Hace unos días hablábamos de cómo comparar imágenes mediante PHP, y hoy, debido a una pregunta de un lector de Sentido Web, vamos a explicar cómo comparar un texto mediante Javascript.
Leyendo una entrada de Korsarios.net sobre la lista de países en SQL, recordé que no hace mucho yo también me tuve que crear una lista parecida, pero esta vez de idiomas. Por eso hemos pensado que no estaría mal ofrecer una serie de recursos sobre idiomas y países, que podamos usar en nuestras páginas web.
Suele ser muy útil cuando queremos mostrar un desplegable con los todos los países que existen. Existe el estándar ISO 3166 para definir los países y sus subdivisiones, codificados mediante dos letras, tres letras o de forma numérica.
También puede ser necesario disponer la lista de países en la base de datos, para eso nada mejor que lo que nos ofrece Korsarios.net, las sentencias sql para la lista de países en español y en inglés.
En otras ocasiones puede que necesitemos ir a distintas páginas según el idioma o país desde dónde se visite la página. El idioma se puede detectar mediante PHP o Javascript. Aunque el idioma no siempre es siempre lo más característico, porque puede tratarse de algo específico del país y no del idioma (por ejemplo, una tienda). Para ello lo mejor es detectar el país según la IP, habiendo dos formas, mediante acceso a BD o sin acceso a BD.
En el caso de que querer la lista de idiomas, tendremos que tener en cuenta el ISO 639, codificado con dos letras y tres letras. Como no, siempre es bueno también tener todos los datos de los idiomas en la BD, en este caso somos nosotros quienes os ponemos en disposición el sql necesario: Idiomas sql
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()));
});
