jQuery UI Operator Overloading?

Question

I'm attempting to figure out OOP Javascript, jQuery, and jQuery UI all at the same time. Basically, I want to create a custom "panel" component that I can reuse in various places throughout my web app. The panel consists of a title bar and then content below it.

So I'm using jQuery UI to accomplish this. I want to be able to make the component and then change its attributes (like the title bar text). Here's an example:

$(function()
{
    $.widget("custom.ShinyPanel",
    {
        options: {
            css:{},
            title:""
        },

        _create:function()
        {
            $(this.element).addClass("shinyPanel").disableSelection();
            this.titleBar = $(createElement("div")).addClass("shinyPanelTitleBar").appendTo(this.element);
            this.topShine = $(createElement("div")).addClass("shinyPanelTopShine").appendTo(this.element);
            this.leftShine = $(createElement("div")).addClass("shinyPanelLeftShine").appendTo(this.element);
            this.content = $(createElement("div")).addClass("shinyPanelContent").appendTo(this.element);

            this._refresh();
        },

        _refresh:function()
        {
            if (this.options.hasOwnProperty("title"))
                $(this.titleBar).html(this.options.title);
        }
    });
});

// $("#divShotList").ShinyPanel({title:"Shot List"});    // this works
$("#divShotList").ShinyPanel();
$("#divShotList").title = "Shot List";                   // this doesn't work


<div id="divShotList" style="position:absolute; top:5px; bottom:10px; width:250px;"></div>

Is there a way for me to overload the = operator or something to make this work with this syntax? I know that I could probably create an extra function, like setProperty or something, but it would be really cool if I could just keep this syntax and get it to work. Any idea how I can modify the widget to make this happen?

Answer 1

The element or jQuery wrapped element is not your widget:

$("#divShotList").data('ShinyPanel')._setOption('title', 'something');

But it is store in the .data() of the element.

---

Alternatively:

 var shinyPanel = $("#divShotList").ShinyPanel().data('ShinyPanel'); shinyPanel.options.title = 'new title'; shinyPanel.refresh(); 

would also work.

---

Final Edit: To answer you question: No.