0

我正在尝试扩展 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);

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

4

0 回答 0