Question

我正在尝试扩展jQuery-UI标签元素以显示“关闭”按钮。我想要关闭按钮来更改悬停事件的外观并删除单击上的选项卡。下面的代码几乎可以正常工作，但悬停时显示的图像甚至不正确。（我正在使用'ui-icon-circle-close'，它正确显示为默认值，但在悬停事件中它会变为某个部分图像的正方形）。不幸的是 - 我无法发布短片 - 看起来缺乏信用： - （。

我正在使用jQuery v1.8.2和jQuery UI - v1.10.0

这是我的整个javascript函数

（我使用了来自repo http://github.com/andrewwatts/ui.tabs.closable的jQuery 1.8的Andrew Watts原始版本，并将其扩展为具有额外功能的jQuery 1.9。）

(function() {
$.widget( "ui.tabs", $.ui.tabs, {
options: {
    spinner: "<em>Loading&#8230;</em>",
    closable: false
},
_create: function() {
    this._super( "_create" );
    this._on({
    tabsbeforeload: function( event, ui ){
        if( !this.options.spinner ) {
        return;
        }
        var span = ui.tab.find( "span" ),
        html = span.html();
        span.html( this.options.spinner );
        ui.jqXHR.complete(function() {
        span.html( html );
        });
    }
    });
},

_removeTab: function( index ) {
    index = this._getIndex( index );
    var options = this.options;
    tab = this.tabs.eq( index ).remove(),
    panel = this._getPanelForTab( tab ).remove();

    if( tab.hasClass( "ui-tabs-active" ) && this.anchors.length > 2 ) {
    this._activate( index + ( index + 1 < this.anchors.length ? 1 : -1 ));
    }
},

_processTabs: function() {
    this._super( "_processTabs" );
    var self = this;
    var lis = this.tablist.children( ":has(a[href])" );

    if (this.options.closable === true) {
    var unclosable_lis = lis.filter(function() {
                return $('.ui-closable-tab', this).length === 0;
    });

    // append the close button and associated events
    unclosable_lis.each(function() {
                $(this)
        .append('<a href="#"><span class="ui-icon ui-icon-circle-close ui-closable-tab"></span></a>')
        .find('a:last .ui-closable-tab')
                    .hover(
                        function() {
            $(this).addClass('ui-state-hover');
                            $(this).css('cursor', 'pointer');
                        },
                        function() {
                            $(this).css('cursor', 'default');
            $(this).removeClass('ui-state-hover');
                        }
                    )
                    .click(function() {
                        var index = lis.index($(this).parent().parent());
                        if (index > -1) {
                            // remove this tab
                            self._removeTab(index);
                        }
                        // don't follow the link
                        return false;
                    })
        .end();
    });
    }
}
});

})(jQuery);

如何使此代码显示正确的悬停图标？

对于ui-icon-circle-close，'ui-state-hover'显示不正确的背景图像

0 个答案: