jQuery를 사용하여 창 너비에 따라 값 지정

Question

big-Slide.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

사용 폭과 크기를 변화 ------------------ UPDATED ----- ---------------

당신은 아마 오른쪽 종류의 문제의 값을 업데이트하는 것입니다 무슨 -하지만 라인 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 이벤트가 발생 될 때마다 다시 함수를 호출 할 수 있습니다.

-I 플러그인과 통합 된 resize 이벤트로 JSFIDDLE을 업데이트했습니다. 가능한 경우 최적화를 시도하십시오.
- jQueryLearning-Plugins은 플러그인 개발에 대한 기본적인 이해를 돕습니다. '250 픽셀',`함수가 해결할 수 : 그것에 대해

// 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