El creador de Javascript habla del futuro que tendrá, al menos ECMA. Una de las opciones que indica es la posibilidad de añadir propiedades a objetos e indicar setters y getters (indicar y recuperar el valor).
Object.defineProperty(obj, "length", {
get: function() {
return this.computeLength();
},
set: function(value) {
this.changeLength(value);
}
}); En Dynamic Drive nos ofrecen una buena utilidad y un magnÃfico ejemplo de uso de DHTML accesible. Se trata de un sencillo sistema que permite previsualizar o ampliar imágenes desde un enlace poniendo “thumbnail” como valor del atributo rel del enlace. Además el contenido atributo title será mostrado junto a la imagen.
Lo mejor es que está hecho de forma no obstructiva, es decir, dado que enlace apunta a la imagen, si el usuario no tiene habilitado el javascript al pulsar en enlace le llevará a la misma. En caso contrario mostrará una capa con ésta.
VÃa / Ajaxian
Interesante script que realiza el efecto de escala de grises en cualquier imagen o elementos HTML. Funciona para navegadores que permiten canvas, IE ya tiene un filtro que lo realiza.
Su uso es muy sencillo, tan sólo importar la librería y ejecutar el siguiente código:
grayscale( document.getElementsByTagName('div') );“Grayscaling” in non-IE browser
Vía / Script & Style
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()));
});Hoy he visto en varios sitios cómo poner en los enlaces un icono del tipo de archivo al que se hace referencia. Algo parecido contamos hace ya tiempo, y al igual que en el ejemplo actual, no funciona para IE6, y aunque nos pese, aún hay muchas personas que siguen usando este navegador.
Una solución es realizarlo mediante Javascript, para lo cual tan solo deberemos incluir un pequeño script en nuestras páginas. El script tiene un array con expresiones regulares que detectan determinadas href y la url del icono para incluirlo en el estilo del enlace. Además existe una función que añade al evento onload del window una función que selecciona todos los enlaces, comprueba por cada enlace si cumple alguna de las expresiones regulares y si es asà modifica el estilo con el icono correspondiente.
var listaiconos = new Array();
listaiconos[listaiconos.length] = new Array(/youtube\.com\/watch\?/, "icons/icon_film.gif");
listaiconos[listaiconos.length] = new Array(/sevenload\.com\/videos\//, "icons/icon_film.gif");
...
window.onload = function() {
var enlaces = document.getElementsByTagName("A");
for (var i=0; i<enlaces.length; i++) {
var ok = false;
for (var j=0; j<listaiconos.length && !ok; j++) {
if (enlaces[i].href.match(listaiconos[j][0])) {
enlaces[i].style.paddingRight = "20px";
enlaces[i].style.backgroundImage = "url("+listaiconos[j][1]+")";
enlaces[i].style.backgroundColor = "transparent";
enlaces[i].style.backgroundRepeat = "no-repeat";
enlaces[i].style.backgroundPosition = "right center";
ok = true;
}
}
}
}VÃa / Intenta
Impresionante librería para incluir elementos UI en nuestras aplicaciones javascript. Contiene los siguientes elementos:
Webkit está implementando en la última versión la carga de scripts de forma asíncrona, para ello hace uso de los atributos async y defer. Esta carga de scripts se realiza sin detener el renderizado del HTML y añade el evento onLoad para ejecutar un método cuando acabe de cargarse:
La diferencia entre async y defer es que async se ejecuta a la primera oportunidad después de que finalice la carga y antes de que se ejecute el evento load del objeto window, por lo que con bastante posibilidad el script se ejecute asíncronamente y no en el orden en el que se muestra en al página. Los scripts defer se ejecutarán en el orden en el que se indica en la página, pero empezará despues del parseo completo pero antes de que ocurra el evento DOMContentLoaded del objeto document.
Vía / CSS-Tricks