jQuery: Disable & Enable Plugin based on browser window size?

问题

I've got the following code to add a function depending on browser size, but how do I remove the effects of this plugin if the browser is resized? (Currently it only works if the page is loaded at the specific size, not if it's resized)

$(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??
      }
   });
});

回答1:

I normaly create the script with the plug-in, inside a DIV with specific ID, so when I wan to to clear, just remove the ID and the SCRIPT will go with him.

In your case..

$(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... include a responsive CSS file, based on the window size.

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

Hope it helps, Good Luck

回答2:

If you're using the jQuery UI tabs plugin (I guess so):

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');
  }
});

来源：https://stackoverflow.com/questions/15877286/jquery-disable-enable-plugin-based-on-browser-window-size

标签

jquery

responsive-design