获取对jquery ui小部件的所有实例的引用?

时间:2012-11-02 22:56:58

标签: javascript jquery jquery-ui jquery-plugins jquery-ui-widget

我正在编写一个jquery UI小部件,它只是包装了bootstrap popover插件,在小部件中你可以传递选项'singular', 如果传入,那么它应该调用插件的所有其他实例的函数。

类似

$('#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

所以,我认为show函数看起来像:

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');

}

所以,问题是,我如何获得对其上包含myWidget小部件的所有元素的引用?

1 个答案:

答案 0 :(得分:8)

您可以使用$(':ui-myWidget')其中ui是您的窗口小部件的命名空间。它比使用像$('.ui-myWidget')这样的类选择器慢,所以在创建窗口小部件时添加类仍然是一个好习惯。

jQuery UI为所有小部件执行此操作,因此您可以通过$(':ui-progressbar')$('.ui-progressbar')获取每个进度条。

This blog post更深入地解释了。