Javascript no intrusivo
- Ene
- 20
4 comentarios! 354 palabras - 1 hits
Behaviour, es una imprescindible libreria que nos permite programar con javascript de manera mas sencilla
Una de las premisas mas importantes planteadas al diseñar mediante el uso de estándares es la separación de capas lógicas, es decir, por un lado tenemos el maquetado, que se representa mediante lenguaje (x)html, por otra parte esta el diseño visual, que normalmente se adjunta mediantes hojas de estilo (css) hasta aquí todo esta muy claro.
Pero que ocurre con el comportamiento que se le quiera asignar a algunos objetos del documento, aquí es donde entra en juego el lenguaje JavaScript.
Imaginemos por ejemplo que tenemos un enlace al que le queremos dar una funcionalidad un poco diferente al resto, abrirlo en una ventana nueva por ejemplo, a la mayoría lo primero que nos viene en mente es hacer algo mas o menos similar a lo siguiente:
- <a href="popup.html" onclick="window.open('popup.html', 'width=400,height=450,resizable=yes')">Abrir popup</a>
Lamentablemente esta linea acaba con toda nuestra teoría de separación de capas, por fortuna, existen maneras alternativas para asignar eventos usando JavaScript, en el caso concreto de este ejemplo una manera mas limpia de realizar lo mismo necesitaba algo mas de código para poder llevarse a cabo.
Primero tendremos que asignar una identidad única al enlace, y luego mediante el DOM asignaremos el evento a dicha id, algo mas o menos tal que así.
- <a href="popup.html" id="mypopup">Abrir popup</a>
- <script type="text/javascript">
- var x = getElementByID('mypopup');
- x.onclick = function() {
- window.open('popup.html', 'width=400,height=450,resizable=yes')
- }
- </script>
Sencillo, ¿no? bueno, quizás no resulte tan sencillo, pero gracias a mentes inquietas como la de Ben Nolan, disponemos de algunas herramientas que si que hacen que resulte una tarea sencilla.
Me refiero a behaviour, una librería JavaScript basada en la función document.getElementsBySelector escrita por Simon Willison. Este fantástico “trozo de código” nos permite olvidarnos de programar complejas funciones que asignen eventos según clase, id o selector.
Continuando con el ejemplo anterior, si incluimos esta librería podemos conseguir el mismo efecto asignando la función directamente al id seleccionado,
- <script type="text/javascript">
- var myrules = {
- '#mypopup' : function(element){
- element.onclick = function(){
- window.open('popup.html', 'width=400,height=450,resizable=yes')
- }
- }
- };
- Behaviour.register(myrules);
- </script>
Personalmente creo que resulta una librería de inmensa utilidad, ahora solo falta ver como poder sacarle partido de manera óptima.
Salu2 y buen fin de semana
1 enlace
4 comentarios
# Escrito por Enrique hace 4 años, 1 mes
Genial Alex… como siempre ;-)
Salu2.
# Escrito por obokaman hace 3 años, 7 meses
Buen artículo. En efecto, en la actualidad hay bastantes librerías que pueden facilitarnos mucho la vida a la hora de implementar soluciones accesibles y de mantener el código lo más limpio posible.
Te recomiendo que le eches un vistazo si es que aún no la conoces a la librería JQuery ( http://www.jquery.com ). Es realmente pequeña ( unos 10k ) y es un pequeño compendio de funciones para facilitar el acceso y modificacion del DOM, animaciones y funciones AJAX, all-in-one.
Un saludo.
# Escrito por JAQ hace 3 años, 3 meses
yo quiero abrir un popup desde un xml y he seguido las instrucciones y no me sale con las medidas que quiero. Si podeis ayudarme, os lo agradecería de véras. Este es mi código:
menu A HREF*=”Mbse_Hombres.html” target=”window.open(‘Mbse_Hombres.html’, ‘width=850,height=500,top=150,left=100,resizable=yes’)”>Camisetas y Camisas
(he quitado algunas corcheas para que veias bien el código)
# Escrito por pablo hace 2 años, 9 meses
estan alreves los botones de next prev, muy bueno el ejemplo , aunque me quedo con Rounded Corners de jquery, solo porque trae mas opciones , como Beveled Corners,Notched Corners, Dog-ear Corners, Bite Corners, et..etc..
http://methvin.com/jquery/jq-corner.html
linda pagina ! salud!