Widget Creation

Widget Creation


This is a carryover from my Plugin Creation post in the jQuery group.
Richard said that I might want to try using the ui.core.js library
with what I was wanting to do. I've been tinkering with it, and have
been figuring it out so far. I do have a few questions though, so I'm
hoping that some of you will be able to help me figure out what I'm
doing wrong.
So far, my _init only creates some html, and that works fine. I'm
looking to add some interaction to some of the things I've added
(buttons, add a class on hover, etc).
A brief description: Everything is created inside of a div, and
everything that has an interaction has a specific class. One of those
is page, I'll use it for my example. I want the div with the class
page to get an extra class: editable, when it is moused over. I also
want to be able to access it easily later, wanting something so I
don't have to use "longhand" to get access to it. Here are some
parts:
this.page = this.element.find('.page'); // I've been looking at the
progressbar to help me figure out what to do. If I'm right, this.page
should give me easy access to be able to manipulate that element?
this.page.mouseover(function(){
    this.page.addClass('editable');
});
this.page.element.mouseout(function(){
    this.page.element.removeClass('editable');
});
I was experimenting with these, because neither seemed to work.
Firebug tells me that this.page isn't defined, or this.page.element
isn't. They come right after the declaration of this.page in my code.
The widget stuff is different from the normal jQuery plugin, so it's
taking a little getting used to. If I'm right, and want to access the
html, I have to use the element, correct?
Once I get this figured out, I'm going to see about pulling data out,
so I'll probably have another question soon. Thanks for the help.