jQuery: inherit functions to several objects

Question

hi,

i made several table-based-widgets (listview-kind-of) which all have the same characteristics: styling odd/even rows, hover on/off, set color onClick, deleting a row when clicking on trash-icon.

so it's always the same (prototype-)code for each widget. is there a way to have the code only once then simply apply/inherit it to all widgets?

2nd, here's some of the code - could this be optimized?

var me = this;
$("tr",this.table).each(function(i)
{
 var tr = $(this);
 tr.bind("mouseover",function(){me.hover(tr,true)});
 tr.bind("mouseout",function(){me.hover(tr,false)});
 tr.bind("click",function(){me.Click(tr)});
});
$("tr").filter(":odd").addClass("odd");

Answer 1

You have 2 options:

First just create a plugin that handles that basic stuff and then create other plugins that do the specialized stuff for that listing.

Second use jQuery.extend to extend one plugin and create a new one.

To optimize this use event delegation ( jquey().live() )

var me = this;
var id = this.table.attr('id');

$('#'.id)
.live("mouseover",function(){me.hover($(this),true)})
.live("mouseout",function(){me.hover($(this),false)})
.live("click",function(){me.Click($(this)});

$("tr").filter(":odd").addClass("odd");

http://docs.jquery.com/Events/live