Archivo para la categoría ‘Mootools’

History Manager para AJAX, solución al botón back

Sábado, 5 de Julio, 2008

Asistentes Virtuales - e24Presenter

Una de las mayores críticas a las aplicaciones web en AJAX es acerca de sus limitaciones de accesibilidad y usabilidad. Los usuarios tienen ya vicios y costumbres y no entiende de AJAX, ello solo quieren que si le dan al botón back funcione como siempre y valla a la página anterior, y que si marcan una página en sus favoritos que luego cuando vuelva valla a la pantalla que el marcó y no a la página principal que es lo que suele suceder con las páginas web en AJAX.

Digitarald.de ha desarrollado una solución HistoryManager - The Ajax Back-Button (v1.0) para aquellos que usan Mootools   Pueden probar sus ejemplos, y por mi parte yo lo he implementado en www.equipo24.com

Como también suelo desarrollar con Prototype he reescrito el código para que sea compatible con dicha librería, la forma de uso es muy similar al original. Espero que os sea útil.

Descargar prototype.historyManager.js

Validar atributo target XHTML Strict o HTML 4.0 Strict

Sábado, 17 de Mayo, 2008

Asistentes Virtuales - e24Presenter

Para los amantes de los estándares de la web os propongo un truco para simular el comportamiento del atributo “target” de la etiqueta <a>, sin dejar de cumplir el estándar HTML 4.0 Strict o XHTML 1.0 Strict.

Para ello utilizaremos el atributo rel=”external” que no incumple con los estándares. Utilizaremos un script que revisará todos los enlaces (etiquetas <a>) cuyo atributo “rel” tenga valor “external” y le asignará un evento “onclick” que cancelará el evento por defecto y abrirá la URL de “href” en una nueva ventana.

<a href="http://www.equipo24.com" rel="external">Sitio desarrollado con mootools</a>

A continuación os dejo los códigos javascript para Mootools y una solución general sin necesidad de bibiliotecas externas.

Mootools

function fix_external_links() {
	$ES('a').each(function(el) {
		if (el.getProperty('rel') == 'external') {
			el.addEvent('click', function(e) {
				e = new Event(e);
				e.stop();	
				window.open(this.getProperty('href'));
			}.bind(el));
		}	
	});
}

window.addEvent('domready', function() { 
	fix_external_links();
});

Sin bibliotecas externas

function fix_external_links() {
	if (!document.getElementsByTagName) return;
	var anchors = document.getElementsByTagName("a");
	for (var i = 0; i < anchors.length; i++) {
		var anchor = anchors[i];
		if (anchor.getAttribute("rel") && anchor.getAttribute("rel") == "external") {
			anchor.target = "_blank";
		} 
	}
}
window.onload = fix_external_links;

function fix_external_links() {
	if (!document.getElementsByTagName) return;
	var anchors = document.getElementsByTagName("a");
	for (var i = 0; i < anchors.length; i++) {
		var anchor = anchors[i];
		if (anchor.getAttribute("rel") && anchor.getAttribute("rel") == "external") {
			anchor.target = "_blank";
		} 
	}
}
window.onload = fix_external_links;