I am writing a jquery UI widget that simply wraps the bootstrap popover plugin, In the widget you can pass in the option 'singular', if this is passed in then it should call a function of all other instances of the plugin.
something like
$('#one').myWidget();
$('#two').myWidget();
$('#three').myWidget();
$('#four').myWidget();
$('#one').myWidget('show'); //stuff from widget one is now visible
$('#two').myWidget('show'); //stuff from widget one and two are now visible
$('#three').myWidget('show'); //stuff from widget one, two and three are now visible
$('#two').myWidget('hide'); //stuff from widget one and three are now visible
$('#four').myWidget('show', {singular:true}); //stuff from widget four is now visible
So, I imagine the show function looking like:
show: function(options){
options = options || {};
if(options.singular){
var instances = '????'; // how do I get all instances?
$.each(instances, function(i, o){
o.myWidget('hide');
});
}
this.element.popover('show');
}
So, question being, how would I get a reference to all elements that have the myWidget
widget on them?
I am writing a jquery UI widget that simply wraps the bootstrap popover plugin, In the widget you can pass in the option 'singular', if this is passed in then it should call a function of all other instances of the plugin.
something like
$('#one').myWidget();
$('#two').myWidget();
$('#three').myWidget();
$('#four').myWidget();
$('#one').myWidget('show'); //stuff from widget one is now visible
$('#two').myWidget('show'); //stuff from widget one and two are now visible
$('#three').myWidget('show'); //stuff from widget one, two and three are now visible
$('#two').myWidget('hide'); //stuff from widget one and three are now visible
$('#four').myWidget('show', {singular:true}); //stuff from widget four is now visible
So, I imagine the show function looking like:
show: function(options){
options = options || {};
if(options.singular){
var instances = '????'; // how do I get all instances?
$.each(instances, function(i, o){
o.myWidget('hide');
});
}
this.element.popover('show');
}
So, question being, how would I get a reference to all elements that have the myWidget
widget on them?
-
2
When you apply the plugin to those elements, then you're referencing them in
return this.each(function(){
in your instantiator. so just give them a class like,myWidget
then you can do$('.myWidget').each(
.. – Ohgodwhy Commented Nov 2, 2012 at 23:01 - I agree- you can place a class on the widgets - then run through an each - I've seen coders place a data attribute - then run the each that way as their selector – user1171884 Commented Nov 3, 2012 at 0:07
- That works, and what about getting a reference to all instances of a widget you don't control (e.g. UI's progressbar's etc) – Hailwood Commented Nov 3, 2012 at 1:10
1 Answer
Reset to default 8You can use $(':ui-myWidget')
where ui
is your widget's namespace. It is slower than using a class selector like $('.ui-myWidget')
so it is still good practice to add the class when your widget gets created.
jQuery UI does this for all there widgets so you could get each progressbar by either $(':ui-progressbar')
or $('.ui-progressbar')
.
This blog post explains thin in greater depth.