Extendiendo Elementos DOM con Prototype

septiembre 9, 2007 at 12:24 am 1 comentario

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 VideosTe VerdeVideos 3GP3GPsomos tu y yo

About these ads

Entry filed under: JavaScript - AJAX, Programación, Prototype, Scriptaculous. Tags: .

La web 2.0 en una imagen Un niño mexicano fue registrado con el nombre de Yahoo

1 Comentario Add your own

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Trackback this post  |  Subscribe to the comments via RSS Feed



Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

%d personas les gusta esto: