Как вызывать jQuery виджет только в определенном разрешении?

[VasyOK]

Допустим есть jQuery виджет https://jqueryui.com/tabs/
И нужно, чтобы вкладки были только на экранах с шириной менее 600рх. А на больших экранах чтобы виджет не обрабатывал HTML. Т.е. display: none - не подходит.

Написал такой вот код:

function tabs_behavior() {
   if ($(window).width() < 600) {
   	$("#tabs").tabs();     
   } else {
        $("#tabs").tabs("destroy");  
   }
}

tabs_behavior();

$(window).resize(function() {
	tabs_behavior();            
});

https://jsfiddle.net/PlayboyZP/1d6jh45e/

Если ширину окна изменять от малого к большему - код работает. Вкладки только на маленьком экране.
Если ширину окна изменять от большего к малому - нет . Вкладок нет нигде

А как правильно?

[laimas]

Если верстка на bootstrap, то нем можно скрывать без всякого JS.

[рони]

VasyOK,

$(function() {
    var tab = $("#tabs"), activate;
    function tabs_behavior() {
        var min = $(window).width() < 600;
        if (min && !activate) {
            tab.tabs();
            activate = true
        } else if (!min && activate) {
            tab.tabs("destroy");
            activate = false
        }
    }
    tabs_behavior();
    $(window).resize(tabs_behavior)
});

[VasyOK]

Рони, спасибо! Не знал, что так можно.