Question

我正在使用bigSlide.js（http://ascott1.github.io/bigSlide.js/）插件来创建幻灯片菜单。

我可以为菜单的宽度输入我自己的值，我已将其设置为250px，然后在代码中使用。该网站是响应性的，所以我想要发生的是根据窗口宽度改变值，即。窗口宽度为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

------------------更新-------------------- < / p>

您可以在行之前添加调整大小代码 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事件时再次调用该函数。

- 我使用与插件集成的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

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

1 个答案: