Following this the user can now call your method in the usual jQuery UI way:
This is all you have to do. Add a method to the object that defines your widget. Give it a name that doesn't start with an underscore because it isn't private. The user can then call it by specifying its name and supplying arguments.
Events are always the most difficult part of creating a custom anything and using events the most difficult part of using a custom anything. In this case things aren't so bad.
To create an event all you have to do is use the _trigger method. The first parameter is the name of the event, the second any standard event object you want to pass and the third any custom event object you want to pass.
Some times custom event are simply triggered by existing events on the DOM objects that make up your custom control and then you are mostly passing on the event to the user. However you can invent events of your own. For example let us suppose that you want to fire an event if the button moves beyond x=400 say - yes I can't think of a reason for doing this either but it is a simple example.
All you have to do is to add to the move function:
Notice that the name of the widget is all lower case even if you named it with a mixture of upper and lower case. You can change the prefix used on the event name by altering the widgetEventPrefix property.
You can also use on and off to attach and remove event handlers:
Notice that you can also define options as functions to be used as callbacks in more general contexts than events.
There are a lot of other functions supplied by the framework that you can override. You might like to take a look at the _destroy function which you need to clean up when your widget is removed. There are also a few other useful functions that you might want to override such as show, hide and so on but mostly things work as you would expect and now you have got started with custom widgets the rest is fairly easy. Notice that if you want your widget to be styled using standard jQuery UI style sheet and themeroller then you need to assign the standard style names to the components of your widget.
You can download the code for this program from the CodeBin (note you have to register first).
Ajax is the technology that turned the web page into the web app. Since Ajax was invented there have been lots of innovations and frameworks that make web apps easier but a mastery of basic Ajax techn [ ... ]