Disable Jquery UI widget completely

Question

How do I do such a thing? I need to disable the widget completely, meaning that all of the instances should be disabled and NO MORE instances can be created after the disabling. I tried searching, but nothing comes up.

Will appreciate any help.

EDIT:

A more lively example.

Say, I have three instances of my widget placed on three elements. Then I want to turn my widget off. I invoke a static method turnOff, which leads to a) all working instances to be disabled b) prohibit any other instances of that widget to be created if they are later called via ajax ie Then I want it to work again, so i invoke a turnOn().

My widget is a hint pugin, so if the user switches hints off, they should be switched off everywhere, and there are places in the app where hinted parts of the page are still being loaded asynchronosly.

That's pretty much what I need to do.

Answer 1

The answer depends on if your widget is obvious when not active -- for example if it's a 'hint' type tooltip that shows on hover then all you need to do is not show the tool tip when it's inactive. However if it also adds formatting to show where the hints are you need to undo that as well.

Let's take the simple case first -- suppose we have a simple widget filler that just adds a class ( filled ) when the mouse is over the element. Then just have a variable in global scope:

enableFiller = true;

and then check that in your widget:

$.widget( "spacedog.filler", {

    _create: function() {
        var progress = this.options.value + "%";
        this.element.hover(
            function() {
                if (enableFiller) { 
                    $(this).addClass("filled");
                }
            },
            function() {
                $(this).removeClass("filled");
            }
        );
    }

});

Fiddle .

Note that I don't check the flag in the removeClass because the widget might be disabled while the mouse is over a widget and you probably don't want the hover color to accidentally 'stick on'.

From there it's pretty easy to extend to the case where your widget alters the element even when off. I'll do the logic as pseudo-code:

• When creating the widget add a base-widget class to the element (even if inactive)

• If the widget is on add the active-widget class and do whatever is required

• To turn off remove the active-widget class from all base widgets: $(".base-widget").removeClass('active-widget') . You might also need to do some other changes to all the elements -- but they're easy to find.

• To turn on add the active-widget class back and adjust everything else

You can embed the turnOn/turnOff functionality into the widget, as long as it uses the global variable as the flag. See this answer for other options for storing the global: How to declare a global variable in JavaScript?

If you get stuck you could post (a simplified version) of your widget code and what you've tried so far and someone can probably help further.