Alejandro Arco Alejandro Arco

Evento onclick accesible: OnClick JS

javascript 2 Comentarios »

El proyecto OnClick JS es un script realizado en javascript para poder realizar el desarrollo de aplicaciones web más accesibles y cumplir las pautas de accesibilidad web relacionadas con los manejadores de eventos dependientes del dispositivo (Prioridad 2).

Características OnClick JS

  • OnClick JS ha sido desarrollado en JavaScript.
  • El tamaño de OnClick JS es de 827 bytes (versión compactada).
  • Compatible con la etiqueta <a> de HTML para todos aquellos eventos onclick.
  • OnClick JS ejecuta cualquiera de tus funciones en javascript.
  • No hay una cantidad máxima de parámetros en la función a ejecutar.
  • No hace uso de Frameworks JS.
  • No es necesario usar manejadores de eventos redundantes:
    onclick / onkeypress.

Descargar OnClick JS

OnClick JS v1.01 (fichero comprimido en .zip - 606 bytes)

Instalación OnClick JS

Para poder unsar OnClick JS debemos añadir los ficheros necesarios entre nuestra etiqueta <head></head>.

<script src="/js/onclick/onclick.js" type="text/javascript"></script>

Configuración OnClick JS

Podremos agregar la función a ejecutar por OnClick JS pasándole los parámetros que esta requiera.

rel=”onclick[NombreFuncion(, Parametro1, Parametro2..ParametroN)]“

  • NombreFuncion - Nombre de la función en JavaScript que queremos ejecutar.
  • Parametro1..N - Parámetros de la función separados por comas.

Ejemplos OnClick JS

Descarga los ejemplos OnClick JS.

Recuerda que el siguiente código  debe añadirse entre la etiqueta <head>..</head>.

<script src="http://www.alejandroarco.es/wp-includes/js/onclick/onclick.js" type="text/javascript"></script>
<script type="text/javascript">
function HolaMundo() { alert('¡Hola Mundo!'); }
function Suma(n,m) { alert(n+' + '+m+' = ' + (n+m)); }
function CargarURL(url) { var m='¿Cargar Url\nmediante JavaScript?'; if(confirm(m)) { location.href=url; } }
</script>

El siguiente código debe añadirse entre la etiqueta <body>..</body>.


<h1>Ejemplos de OnClick JS</h1>
<ul>
<li><a title="Ejemplo uso Oclick JS - Hola Mundo" rel="onclick[HolaMundo]" href="#hola-mundo">Ejemplo uso Oclick JS - Hola Mundo (sin parámetros)</a></li>
<li><a title="Ejemplo uso Oclick JS - Suma 3+6" rel="onclick[Suma,3,6]" href="#suma">Ejemplo uso Oclick JS - Suma 3+6 (con parámetros)</a></li>
<li><a title="Ejemplo uso Oclick JS - Cargar URL" rel="onclick[CargarURL,'http://www.alejandroarco.es']" href="http://www.alejandroarco.es">Ejemplo uso Oclick JS - Cargar URL (accesible con JS deshabilitado)</a></li>
</ul>
<div><a title="administracion de sistemas y desarrollo de aplicaciones informaticas" href="http://www.alejandroarco.es">Alejandro Arco</a></div>

Compatibilidad OnClick JS

OnClick JS es compatible y se ha testeado con los siguientes navegadores (browsers): Internet Explorer 6+, Opera 9, Firefox 1.5+ y Safari 2+, con javascript habilitado.

Registro de cambios OnClick JS

  • OnClick JS 1.01 (29/10/2008) - Publicación inicial

Fancy Upload, upload múltiple de ficheros pesados con AJAX y MooTools

ajax, open source 52 Comentarios »

fancy-upload - Fancy Upload, upload múltiple de ficheros pesados con AJAX y MooToolsFancy Upload es un conjunto de librerías que nos permiten realizar uploads múltiples de ficheros pesados con una interfaz totalmente personalizable mediante CSS y XHTML. Este conjunto de librerías hacen uso de AJAX y del Framework Mootools para JavaScript.

Algunas de las características de Fancy Upload más reseñables son: upload múltiple de ficheros, barra de progresión, subida de ficheros en pleno proceso de ejecución y cancelación de la subida de ficheros en cualquier momento.

Os muestro a la izquierda una interfaz modificada de Fancy Upload que desarrolle para un proyecto web, podemos personalizarla mediante hojas de estilo sin problemas.
[ Documentación ] [ Demo]

Requerimientos mínimos para hacer funcionar Fancy Upload

Espero que este artículo sobre el upload de ficheros múltiples os sea de utilidad, si tienen alguna duda sobre la instalación de Fancy Upload no dudeis en dejarme un comentario al respecto y la intentaré solucionar en la mayor brevedad de tiempo posible.

Fuente: Alejandro Arco

Publicado por Alejandro Arco.Gracias WordPress & N.Design Studio.