代码之家 › 专栏 › 技术社区 › prodigitalson

在jqueryui小部件中是否有获取内部属性的默认方法?

scope jquery-ui jquery javascript

1

prodigitalson · 技术社区 · 15 年前

我正在使用jquery ui实验室中的现有小部件调用selectmenu。它具有事件关闭和打开的回调选项。问题是,在这些事件中,我需要动画化一个节点,该节点是小部件的一部分,但不是它所连接的节点。为了做到这一点,我需要访问这个节点。

例如,如果我真的要修改小部件代码本身:

// ... other methods/properties

"open" : function(event){
    // ... the original logic

    // this is my animation
    $(this.list).slideUp('slow'); 

    // this is the orginal call to _trigger
    this._trigger('open', event, $this._uiHash());
},

// ... other methods/properties

但是,当在我附加的事件处理程序范围内时 this 是我调用小部件的原始元素。我需要小部件实例,或者特别是小部件实例 list 财产。

$('select#custom').selectmenu({
    'open': function(){
       // in this scope `this` is an HTMLSelectElement not the ui widget
     }
});

最好的方法是什么? 列表 小部件的属性?

编辑注意,我在下面发布了我的最终解决方案。但是,我不喜欢为了获取元素而返回到DOM,所以我仍然有兴趣听到覆盖/扩展现有小部件或特定内部的最佳实践。

1 回复 | 直到 15 年前

1

prodigitalson 15 年前

因此,最后我似乎错过了列表根据插件的名称和原始元素ID分配一个ID。因此,下面的工作是:

jQuery(function(){
    jQuery('select#custom').selectmenu({
        width: 100, 
        'style': 'dropdown',
        "open": function(e, data){
            var menu = jQuery('ul#'+$(this).attr('id')+'-menu');
            menu.hide().slideDown('slow');
        },
        "close": function(e, data){
            var menu = $('ul#'+jQuery(this).attr('id')+'-menu');
            menu.addClass('ui-selectmenu-open').slideUp('slow', function(){
                menu.removeClass('ui-selectmenu-open');
            });

        },
        "change": function(){window.location = $(this).val();}
    });
});