A good widget provides a solid base with callbacks for customisation.
var total = $("#total"), cheeses = $("#cheeses"), register = $("#register"), price = $("<span>"),
activation = $("#activation").button({icons:{primary:"ui-icon-search"}});
activation.click(function() {
if ( cheeses.is(":aj-filterable") ) {
return cheeses.filterable("destroy");
}
cheeses.filterable({
className: "cheese",
create: function() { register.addClass("ui-widget-header cheese").show(); },
filtered: function(e, ui) {
var t = 0;
ui.visible.each(function() { t = t + parseFloat( $(this).data("price") ); });
total.text( t.toFixed( 2 ) );
},
setOption: function(e, ui) {
ui.option === "className" && register.toggleClass([ui.original, ui.current].join(" "));
},
hover: function(e, ui) {
if (e.originalEvent.type === "mouseenter") {
price.text(" - " + ui.hovered.data("price") + " per lb").appendTo(ui.hovered);
} else {
price.detach();
}
}
}).on("filterabledestroy", function(e,ui) {
register.removeClass("ui-widget-header "+ui.options.className).hide();
}).filterable("filter");
setTimeout(function() { cheeses.filterable("option", "className", "cheesePlease"); },3000);
});