Что происходит, когда мы запускаем метод уничтожения в jQuery UI - PullRequest
Новая
       5

Что происходит, когда мы запускаем метод уничтожения в jQuery UI

0 голосов
/ 26 апреля 2011

Что происходит за кулисами, когда мы destroy получаем виджет пользовательского интерфейса jQuery.

пример: $('#test').tabs('destroy')

1 Ответ

3 голосов
/ 26 апреля 2011

Если вы посмотрите на исходный код фабрики виджетов, то заметите, что происходит удаление лишних элементов, классов и связанных событий, которые были добавлены в DOM виджетом при его первоначальной инициализации.Короче говоря, он эффективно восстановит целевой элемент в исходное состояние.

Это отрывок из строки 188 фабрики виджетов : 

destroy: function() {
    this._destroy();
    // we can probably remove the unbind calls in 2.0
    // all event bindings should go through this._bind()
    this.element
        .unbind( "." + this.widgetName )
        .removeData( this.widgetName );
    this.widget()
        .unbind( "." + this.widgetName )
        .removeAttr( "aria-disabled" )
        .removeClass(
            this.widgetBaseClass + "-disabled " +
            "ui-state-disabled" );

    // clean up events and states
    this.bindings.unbind( "." + this.widgetName );
    this.hoverable.removeClass( "ui-state-hover" );
    this.focusable.removeClass( "ui-state-focus" );
},

Реализация виджетових собственные процедуры очистки путем создания прототипа внутреннего метода _destroy (который на фабрике не используется), т.е. он ничего не делает; вы можете видеть, что он вызывается в началеdestroy метод).Выдержка из строки 466 виджета «Вкладки» выглядит следующим образом: 

_destroy: function() {
    var o = this.options;

    if ( this.xhr ) {
        this.xhr.abort();
    }

    this.element.removeClass( "ui-tabs ui-widget ui-widget-content ui-corner-all ui-tabs-collapsible" );

    this.list.removeClass( "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" );

    this.anchors.each(function() {
        var $this = $( this ).unbind( ".tabs" );
        $.each( [ "href", "load" ], function( i, prefix ) {
            $this.removeData( prefix + ".tabs" );
        });
    });

    this.lis.unbind( ".tabs" ).add( this.panels ).each(function() {
        if ( $.data( this, "destroy.tabs" ) ) {
            $( this ).remove();
        } else {
            $( this ).removeClass([
                "ui-state-default",
                "ui-corner-top",
                "ui-tabs-active",
                "ui-state-active",
                "ui-state-disabled",
                "ui-tabs-panel",
                "ui-widget-content",
                "ui-corner-bottom"
            ].join( " " ) );
        }
    });

    return this;
},
...