使用jQuery根據窗口寬度指定值

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

與寬度變化調整------------------修訂----- ---------------

你或許可以行 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的resize事件集成插件。儘可能優化它。
- 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