devdays

_setOption: function (key, value) {
    var oldValue = this.options[key];

    // Check for a particular option being set
    if (key === "className") {

        // Gather all the elements we applied the className to
        this.filterInput.parent().add(this.filterElems)

        // Switch the new className in for the old

devdays

_destroy: function () {
    // Use the destroy method to reverse everything your plugin has applied
    this.filterInput.parent().remove();

    // Remove any classes, including CSS framework classes, that you applied
    this.filterElems.removeClass("ui-widget-content ui-helper-hidden ui-state-active " + this.options.className);

    return this._super();
},

devdays

// in your widget
// call the callback event named 'hover'  the client code
this._trigger( "hover", 
    // send e as the original event back as part of the callback
    e /* e.type == "mouseenter" */, { 
    // return  the uiObject e.Target in the hovered parameter of the event
    // you could also respond with data that the user might need
    hovered: $( e.target )
});

devdays

<script>
    var myFilterable = $("#myFilterable").filterable({
        visible: function (event, data) {
            console.log("filterable visible")
        }
    });

    $("#myFilterable").filterable({ className: "myClass" });
</script>

devdays

_hover: function (event) {

    $(event.target).toggleClass("ui-state-active", e.type === "mouseenter");
    this._trigger("hover", event, {
        hovered: $(e.target)
    });

},

devdays

filter: function (event) {

    // Debounce the keyup event with a timeout, using the specified delay
    clearTimeout(this.timeout);

    // like setTimeout, only better!

    this.timeout = this._delay(function () {
        var re = new RegExp(this.filterInput.val(), "i"),
            visible = this.filterElems.filter(function () {

devdays

_create: function() {

    // this.element -- a jQuery object of the element the widget was invoked on.
    // this.options --  the merged options hash

    // Cache references to collections the widget needs to access regularly
    this.filterElems = this.element.children()
        .addClass( "ui-widget-content " + this.options.className );

    this.filterInput = $( "<input type='text'>" )

devdays

/*
From http://ajpiano.com/widgetfactory/#slide9
*/

(function( $ ) {

    // The jQuery.aj namespace will automatically be created if it doesn't exist
    $.widget( "aj.filterable", {

        // These options will be used as defaults

devdays

_create: function () {
    ...
    this._on(this.elTitle, {
        click: "_titleClick" // Note: function name must be passed as a string!
    });
},
_titleClick: function (event) {
    console.log(this); // 'this' is now the widget instance.
},

devdays

(function ($) {
    $.widget("custom.clicker", {
        
        // the rest of the clicker is omitted
        
        destroy: function () {
            this.element.text("");

            // Call the base destroy function.
            $.Widget.prototype.destroy.call(this);