使用jQuery根据窗口宽度分配一个值

Question

我正在使用 bigSlide.js (http://ascott1.github.io/bigSlide.js/) 插件来创建滑入式菜单。

我可以为菜单的宽度输入我自己的值，我已将其设置为 250 像素，稍后将在代码中使用它。该网站是响应式的，所以我想要发生的是根据窗口宽度改变值，即。窗口宽度 600px 或更小 - 菜单宽度为 100px，如果窗口宽度大于 600px - 菜单宽度为 250px。

这可能吗？如果是这样，有人能告诉我怎么做吗，谢谢。

jQuery(function($) {
  'use strict';

  $.fn.bigSlide = function(options) {

    var settings = $.extend({
      'menu': ('#menu'),
      'push': ('.push'),
      'side': 'right',
      'menuWidth': '250px',
      'speed': '300'
    }, options);

    var menuLink = this,
        menu = $(settings.menu),
        push = $(settings.push),
        width = settings.menuWidth;

    var positionOffScreen = {
      'position': 'fixed',
      'top': '0',
      'bottom': '0',
      'settings.side': '-' + settings.menuWidth,
      'width': settings.menuWidth,
      'height': '100%'
    };

    var animateSlide = {
      '-webkit-transition': 'all' + ' ' + settings.speed + 'ms ease',
      '-moz-transition': 'all' + ' ' + settings.speed + 'ms ease',
      '-ms-transition': 'all' + ' ' + settings.speed + 'ms ease',
      '-o-transition': 'all' + ' ' + settings.speed + 'ms ease',
      'transition': 'all' + ' ' + settings.speed + 'ms ease'
    };

    menu.css(positionOffScreen);
    push.css(settings.side, '0');
    menu.css(animateSlide);
    push.css(animateSlide);

    menu._state = 'closed';

    menu.open = function() {
      menu._state = 'open';
      menu.css(settings.side, '0');
      push.css(settings.side, width);
    };

    menu.close = function() {
      menu._state = 'closed';
      menu.css(settings.side, '-' + width);
      push.css(settings.side, '0');
    };

    menuLink.on('click.bigSlide', function(e) {
      e.preventDefault();
      if (menu._state === 'closed') {
        menu.open();
      } else {
        menu.close();
      }
    });

    return menu;

  };

}(jQuery));

Answer 1

您可以使用$(window).resize 来检测窗口何时调整大小。

使用 bigSlide.js 改变宽度改变窗口大小的工作示例

jsfiddle

-----------------已更新---------

您可能可以在行前添加调整大小代码 return menu;

-但是更新menuWidth 的值会是一个问题，因为它将其值传递给其他变量。所以你需要更新任何受它影响的代码行。

// examples from plugin code
width = settings.menuWidth;

var positionOffScreen = {
      'settings.side': '-' + settings.menuWidth,
      'width': settings.menuWidth
};

menu.css(positionOffScreen);

为避免重复相同的代码，您应该将代码封装到一个函数中。然后，您可以在实例化 .bigSlide() 时调用该函数，并在触发 window.resize 事件时再次调用该函数。

-我使用与插件集成的调整大小事件更新了JSFIDDLE。如果可以，请尝试对其进行优化。
-jQueryLearning-Plugins可以帮助你对插件开发有一个基本的了解。

// TEST
$(window).resize(function(){
    // Get window width
    var window_width = $(window).width();

    // Determine width
    if (window_width <= 600) {
         settings.menuWidth = '100px';
    } else if (window_width > 600) {
         settings.menuWidth = '250px';
    }

    // Updating menu width
    positionOffScreen = {
          'settings.side': '-' + settings.menuWidth,
          'width': settings.menuWidth
    };
    menu.css(positionOffScreen);
}); // TEST