Take the following example:
(function($) {
$.widget("ui.mywidget", {
_init: function() {
// init code for mywidget
// can use this.options
if (this.options.makered) {
// and this.element
this.element.css("background-color", "red");
}
var self = this;
self.element.find("div").live("click", function() {
self.fire();
});
},
_doSomething: function() {
// internal functions should be named begin with an
underscore
// manipulate the widget
},
value: function() {
// calculate some value and return it
return this._calculate();
},
length: function() {
return this._someOtherValue();
},
destroy: function() {
$.widget.prototype.apply(this, arguments); // default
destroy
// now do other stuff particular to this widget
},
fire: function() {
this._trigger('onfire', null, { val: this });
}
});
$.extend($.ui.mywidget, {
getter: "value length",
defaults: {
option1: "defaultValue",
makered: true
}
});
})(jQuery);
And here is the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"
dir="ltr">
<head>
<title>jQuery UI - Widget Factory Test</title>
<script type="text/javascript" language="javascript"
src="Script/
jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript"
src="Script/
jquery-ui-1.7.1.custom.js"></script>
<script type="text/javascript" language="javascript"
src="Script/
testwidget.js"></script>
<script type="text/javascript">
$(function() {
$("#el1").mywidget({
onfire: function() { alert("el1 fired
up"); }
});
$("#el2").mywidget({
onfire: function() { alert("el2 fired
up"); }
});
$("#el1").bind("mywidgetonfire", function() {
alert("post init event on el1");
});
});
</script>
</head>
<body>
<form id="form1" action="">
<div id="el1" style="margin:2px; padding:2px;">Element
#1 <div
style="margin:2px; border:solid 1px #000; background-
color:yellow;">Fire it up!</div></div>
<div id="el2" style="margin:2px; padding:2px;">Element
#2 <div
style="margin:2px; border:solid 1px #000; background-
color:yellow;">Fire it up!</div></div>
</form>
</body>
</html>
All the 'onfire' event handlers get called for all instances of the
widget. Replacing it with the bind method, only the applicable
widget's 'onfire' event handlers get called.
On Sep 22, 3:30 pm, Scott González <[email protected]> wrote:
> Can you please provide a little more detail here? I'm really not sure
> what you're talking about.
>
> On Sep 21, 5:43 am, Neil Craig <[email protected]> wrote:
>
> > I develop a lot of widgets using the jQuery UI widget factory, and
> > noticed that one should not use the "live" methods for handling
> > events. It is best one handle the event delegation oneself to avoid
> > problems like having similar events attached to other instances of the
> > same widget when it should only fire on the applicable widget or not
> > firing at all.
>
> > Don't know if anyone came across the same issues? Could make for an
> > interesting discussion.....
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
