jQuery UI Custom Control - Widget Factory
jQuery UI Custom Control - Widget Factory
Written by Ian Elliot   
Wednesday, 17 April 2013
Article Index
jQuery UI Custom Control - Widget Factory
Method and Events

justjquery

Methods

Your custom control is most likely to have methods that the user can make use of and these are very easy to build into the framework. 

Let's suppose that the button has a Move method -

move: function(dx) {
 var x = dx+parseInt(this._button.css("left"));
 this._button.css("left", x);
}

that shifts the button a specified horizontal distance.  To make this work we also need to set the position and left properties in the _create function:

this._button.css("position", "absolute"); this._button.css("left", "100px");

Following this the user can now call your method in the usual jQuery UI way:

$("div").myButton("move", 200);

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

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:

if(x>400){ this._trigger("outbounds",{},
                           {position:x}); }

In this case the event is called outbounds and an empty event object is passed with a custom event object that simply supplies the position as its only property. 

The entire move function is:

move: function(dx) {
 var x = dx+parseInt(this._button.css("left"));
 this._button.css("left", x);
 if(x>400){ this._trigger("outbounds",{},
                              {position:x}); }
}

The user can set the event handling function by simply defining an option of the same name. For example:

$("div").myButton("option",
   {width: 100,
    color: "red",
    outbounds:function(e,ui){
         alert(ui.position);}
  });

The event handler for the outbounds event simply posts and alert box showing the position. If you now do

$("div").myButton("move", 500);

then the alert will appear as the event handler is called.

You can also use bind to late bind an event handler to the event. The only difference is that the name of the event is augmented by the name of the widget. So to bind to outbounds you would use:

$("div").bind("mybuttonoutbounds",function(e,ui)
 {alert("out");
});

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:

$("div").on("mybuttonoutbounds",function(e,ui)
   {alert("out");
});

 

Notice that you can also define options as functions to be used as callbacks in more general contexts than events. 

Where Next?

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. These are listed in the documentation.

 

You can download the code for this program from the CodeBin (note you have to register first).

http://jquery.com/

jquerysq

Now Available as a Print Book: 

 

smallcoverjQuery

You can buy it from:

USA and World     Amazon.com
Canada            Amazon.ca

UK                Amazon.co.uk
France            Amazon.fr
Germany           Amazon.de
Spain             Amazon.es
Italy             Amazon.it

 

 

 

The Core UI

  1. Understanding jQuery (Book Only)
  2. The DOM And Selectors
  3. CSS Selectors
  4. The jQuery Object (Book Only)
  5. Filters
  6. Advanced Filters - Traversing The DOM
  7. Modifying DOM Objects
  8. Creating And Modifying The DOM
  9. jQuery Data
  10. Forms
  11. Function Queues
  12. Animation
  13. jQuery UI
  14. jQuery UI Custom Control - Widget Factory
  15. jQuery - Easy Plugins
  16. Getting Started With QUnit Testing

Now Available as a Print Book:

 

jquery2coverYou can buy it from:

USA and World   Amazon.com
Canada          Amazon.ca
UK              Amazon.co.uk
France          Amazon.fr
Germany         Amazon.de
Spain           Amazon.es
Italy           Amazon.it

 

 

 

Events, Async & AJAX

  1. Events, Async & Ajax (Book Only)
  2. Reinventing Events
  3. Working With Events
  4. Asynchronous Code
  5. Consuming Promises
  6. Using Promises 
  7. WebWorkers
  8. Ajax the Basics - get
  9. Ajax the Basics -  post
  10. Ajax - Advanced Ajax To The Server
  11. Ajax - Advanced Ajax To The Client
  12. Ajax - Advanced Ajax Transports And JSONP
  13. Ajax - Advanced Ajax The jsXHR Object
  14. Ajax - Advanced Ajax Character Coding And Encoding 

 

Banner


Master JavaScript Regular Expressions

Regular expressions can seem complex but the biggest reason for this is that most programmers don't take them seriously enough. Spend just a little time finding out how they work and you can do amazin [ ... ]



jQuery 3 - Consuming Promises

Promises are a way of organizing asynchronous calls that is better than using callbacks. The callbacks are still there but they are come with a degree of organization. Previously jQuery was criticized [ ... ]


Other Articles

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on, Twitter, FacebookGoogle+ or Linkedin.

 
 

 

blog comments powered by Disqus

Banner


Master JavaScript Regular Expressions

Regular expressions can seem complex but the biggest reason for this is that most programmers don't take them seriously enough. Spend just a little time finding out how they work and you can do amazin [ ... ]



jQuery 3 - Consuming Promises

Promises are a way of organizing asynchronous calls that is better than using callbacks. The callbacks are still there but they are come with a degree of organization. Previously jQuery was criticized [ ... ]


Other Articles

 



Last Updated ( Sunday, 29 January 2017 )
 
 

   
Banner
Copyright © 2017 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.