jQuery：根据浏览器窗口大小禁用和启用插件？

Question

我有以下代码来根据浏览器大小添加功能，但是如果调整浏览器大小，如何删除此插件的效果？ （目前它仅在页面以特定大小加载时才有效，而不是在调整大小时）

$(document).ready(function(){
   $(window).resize(function() {
      if ($(window).width() >= 420) {
          // Enable the plugin to make the tab functionality...
          $( "#tabs" ).tabs();
      }
      else {
        // Code needed to completely disable the tab functionality??
      }
   });
}); 

Answer 1

我通常使用插件创建脚本，在带有特定ID 的DIV 中，所以当我想清除时，只需删除ID 和SCRIPT 将与他一起使用。

在你的情况下..

$(document).ready(function(){
   $(window).resize(function() {
      if ($(window).width() >= 420) {
          // Enable the plugin to make the tab functionality...
          var tempScript = '<div id="newTempId"><script type="text/javascript" src="../js/plugInScript.js"></script></div>';
          $('body').append(tempScript); // append the DIV with the PlugIn script inside
          $( "#tabs" ).tabs();
      }
      else {
        // Code needed to completely disable the tab functionality??
        $( "#tabs" ).tabs({ disabled: [ 0, 2 ] }); // see API info at http://api.jqueryui.com/tabs/#option-disabled
        $('newTempId').remove(); // Remove the DIV that include the script
      }
   });
}); 

OR/And... 包含一个基于窗口大小的响应式 CSS 文件。

<link href="../css/responsive_style.css" rel="stylesheet" type="text/css" media="screen and (min-width:419px)" />

希望对你有帮助，祝你好运

Answer 2

如果您使用的是 jQuery UI 选项卡插件（我猜是这样）：

var $win = $(window),
    $tabs = $( "#tabs" );

$win.resize(function() {
  if ($win.width() >= 420 && !$tabs.is('.tabbed') {
      // Enable the plugin to make the tab functionality...
      $tabs.tabs().addClass('tabbed').removeClass('destroyed');
  } else if(!$tabs.is('.destroyed')) {
      // remove plugin functionality and add class
      // so we don't try to execute this on every resize
      $tabs.tabs('destroy').addClass('destroyed').removeClass('tabbed');
  }
});