Archivo de la etiqueta: javascript

Javascript no obtrusivo (II)

Hoy en día se está poniendo muy de moda en el mundo de desarrollo web este término, tal y como comentabamos hace unos dias en la entrada Javascript no obstrusivo.

Parece que se está confundiendo Javascript no obstrusivo con el uso de Frameworks de Javascript, como por ejemplo JQuery y Prototype. Y no hay inconveniente ninguno en hacer un código HTML o XHTML sin programar eventos Javascript en dicho código y no usar algún Framework de Javascript.

Es tan sencillo como este código:


document.getElementById("div_click").onclick = function(){
   HolaMundo();
};

Viene a decir: “Cuando se haga click en el elemento que tenga por ID “div_click” se ejecutará la función HolaMundo.”

Aquí tenéis el código completo del ejemplo:

ejemplo.html:


<html>

   <body>
<div id="div_click">Click aquí</div>
<script type="text/javascript" src="ejemplo.js"></script>

   </body>
</html>

ejemplo.js:


//funciones

function HolaMundo(){
   alert("HolaMundo");
}

//lanzadores de eventos
document.getElementById("div_click").onclick = function(){
   HolaMundo();
};

Quien dice “.onclick” puede decir “.onfocus”, “.ondblclick”, o cualquier otro evento.

Si lo que queremos es programar el evento onload del body, haremos esto:


window.onload = function(){

   HolaMundo();

}

Anuncios

Testeador de expresiones regulares para JavaScript

En más de una ocasión nos vemos obligados a comprobar si nuestras expresiones regulares son correctas.

Para este trabajo nos puede ayudar la web Regex Tester, la cual permite insertar una expresión regular para JavaScript, y verificarla con los valores que queramos.

jQuery quicksearch Plugin

Una vez más me he visto gratamente sorprendido por otro plugin para el framework jQuery. Y es que si tenemos en nuestro sitio web algún tipo de listado (tablas, párrafos, listas,…) y deseamos establecer un filtro que en tiempo real vaya actualizando dicho listado con los registros que se ajusten a la búsqueda, sin duda alguna, necesitamos el plug-in quicksearch.

Puedes descargárte su última versión y ver distintos ejemplos de uso en su web oficial.

jQuery Quicksearch

jmaps – jQuery Google Maps Plugin

Google nos anuncia un nuevo plugin para jQuery llamado jmaps. Este plugin nos facilita la gestión de mapas Google en nuestras páginas. Con jmaps podemos realizar operaciones como:

  • Usar geocodificación de Google Maps (normal e inversa).
  • Realizar búsquedas de direcciones.
  • Añadir puntos.
  • Añadir polígonos
  • Obtener información del mapa como tamaño, centro…

Sirva como ejemplo la creación de un mapa y su centrado en un punto:

jQuery('#map1').jmap('init', {
    'mapType':'hybrid',
    'mapCenter':[37.4419, -122.1419]
});

Documentación jmaps

ShadowBox – Algo mas que lightBox

En el post anterior hablamos de jQuery lightBox, un plugin que nos permite desarrollar atractivas galerias de fotos sin ninguna dificultad con javascript no obtrusivo. Pues bien, ¿que opinarías si pudieras hacer galerias con la misma facilidad pero con cualquier tipo de contenido? Si, si, imágenes, videos, películas flash, html, googlemaps, youtube… espera, espera, que encima funciona por si misma o la puedes acoplar a jQuery, Prototype, Mootolls, Ext, Dojo… y obviamente configurable en comportamiento y diseño (CSS). Pues esa librería existe y se llama ShadowBox.js.

ShadowBox

ShadowBox

ShadowBox es descargable y usable bajo licencia Creative Commons Attribution-Noncommercial-Share Alike. Si queremos usarla en algún proyecto comercial, debemos comprar una licencia por unos ridículos 20$ (¿acaso no lo merece?).

jQuery LightBox – Galeria de Fotos

¿Necesitas una galería de fotos? ¿Que tenga algún efecto original pero que no tengamos que usar flash? Seguramente conozcas lightBox, pues has de saber que disponemos de un plugin lightbox para jQuery. Sencillo de usar, personalizable y funcional.

jQuery lightBox para galerias de fotos

jQuery lightBox para galerías de fotos

Cualquier duda, no dudes en comentarla.

jQuery lightBox

Resaltar filas de una tabla con jQuery

Un efecto que suelo emplear en las tablas que utilizo en cualquier aplicación web es la de resaltar la fila por la que sitúo el cursor. Con jQuery podemos hacerlo de una manera muy fácil y evitando añadir javascript obtrusivo a nuestro sitio.

Partimos de la tabla:

<table id="table_customer">
  <thead>
    <tr>
      <th>Name</th>
      <th>Surname</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Luis</td>
      <td>López</td>
    </tr>
    <tr>
      <td>Pedro</td>
      <td>Fernández</td>
    <tr>
  </tbody> (obviaremos el tfoot para el ejemplo)
</table>

y tenemos la siguiente clase CSS:

.tr_hover {background-color: #ffccee}

nos quedaría definir el comportamiento usando jQuery:

// para cada fila del body de la tabla table_customer
// defino el comporatamiento que tendrá cuando el ratón
// pase por encima
$("#table_customer tbody tr").mouseover(function() {
     // a la fila sobre la que esté el ratón (this)
     // le añado la clase que la resaltará
     $(this).addClass("tr_hover");
});

// para cada fila del body de la tabla table_customer
// defino el comporatamiento que tendrá cuando el ratón
// deje de estar encima
$("#table_customer tbody tr").mouseout(function() {
     // a la fila sobre la que esté el ratón (this)
     // le quito la clase que hace que resalte
     $(this).removeClass("tr_hover");
});

y listos, esto tendrás que implementarlo el ready() o bien en la funcion de tipo Ajax response que implementes a una llamada Ajax que genere la tabla con los datos.

Página oficial de jQuery.