Extendiendo Elementos DOM con Prototype

Sin duda el Prototype es uno de los más ocupado, y cabe reiterar que es mi favorito. En si es uno de los framework’s mas robustos y “fieles” al momento de crear nuestras aplicaciones y ocupar javascript.

Con esta librería, a parte de ayudarnos un montón en el uso de elementos DOM, AJAX, Eventos, etc., es muy fácil de extender y modificar o compatibilizar, más aun, este framework a nuestros desarrollos, por ejemplo extendiendo elementos DOM.

Para aclarar un poco mas la idea, veamos ejemplos prácticos de uso. Digamos que queremos insertar código en un div vía DOM, lo normal y cotidiano seria innerHTML pero con prototype lo podemos hacer mas fácil aun.

$('iddiv').update("hola mundo");

Ahora creemos los nuestros, imaginemos que queremos continuar el texto, seria algo así, primero creamos la extensión y después la ocupamos las veces que queramos.

//extendiendo el elemento

Element.addMethods({

   updateplus: function(element, content) {

      content = typeof content == 'undefined' ? '' : content.toString();

      $(element).innerHTML += content;

      return element;

   }

});//ahora lo probamos

$('iddiv').updateplus(', como les va?');

Esto haría que el contenido del div (id=iddvi) tenga como contenido “hola mundo, como les va?”. Fácil no?, podemos hacer quizá un mensaje de advertencia utilizando la librería Effects de scriptaculous, por ejemplo:

Element.addMethods({

  flash: function(element, content) {

     content = typeof content == 'undefined' ? '' : content.toString();

     $(element).update(content);

      new Effect.Highlight(element);

      return element;

   }

});

Y el código seria tan simple como esto:

$('iddiv').flash('Error: nombre de usuario existente');

Y así con una infinidad de opciones, ya que el limite aquí solo lo pones tu.

Breve artículo inspirado por Extending the limits.

.

Ver Videos – Te Verde – Videos 3GP – 3GP – somos tu y yo