Search code examples
jqueryjquery-uiencapsulation

jQueryUI best practice for creating encapsulation

Sorry for the bad title. The case is I'm working on a GUI framework - it is already on android and a lot of the common elements are now being ported to web. For this I am looking to create identical functions. As an example we have 3 types of buttons in android, a normal button, verified button (just a button with default icon and text) and a cancel button. These are all different types for readability. I want to reflect this in jQueryUI as well so: 

$("button").button(); // normal button
$("verify_button").verifybutton(); 
$("cancel_button").cancelbutton();

Obviously it's just a normal button(); with some set parameters, however, I can find no information as how to most easily do this. Do I need to make my own widget for this? Any tips are welcome.

Solution

  • An easy way to achieve this is indeed to derive your own widgets. The widget factory documentation explains how the system works.

    For instance, you can write:

    $.widget("dennis.verifybutton", $.ui.button, {
    _create: function() {
        this._super();
        // Customize widget creation...
    },
    _destroy: function() {
        // Customize widget cleanup...
        this._super();
    }
});

    The end result will be a derived button widget that you can instantiate through $("selector").verifybutton().