在浏览器调整大小时绑定unbind jquery脚本

时间:2014-09-17 08:57:57

标签: jquery bind unbind

我试图阻止脚本运行,如果浏览器宽度超过640px,基本上如果浏览器超过640px,那么它应该显示一个网格,如果它小于640px然后显示幻灯片。

以下代码允许我在浏览器小于640px时加载脚本,否则执行另一个脚本。

var currentState = false;

function setSize() {

    var state = $(window).width() < 640;
    if (state != currentState) {
        currentState = state;
        if (state) {

        } 
        else {


        }
    }
}

setSize();
$(window).on('resize', setSize);

这是我想在浏览器小于640px时运行的实际代码

window.sliderInit = (function (window, document, undefined) {

        'use strict';

        // Feature Test
        if ( 'querySelector' in document && 'addEventListener' in window && Array.prototype.forEach ) {

            // SELECTORS
            var sliders = document.querySelectorAll('[data-slider]');
            var mySwipe = Array;


            // EVENTS, LISTENERS, AND INITS

            // Add class to HTML element to activate conditional CSS
            document.documentElement.className += ' js-slider';

            // Activate all sliders
            Array.prototype.forEach.call(sliders, function (slider, index) {

                // SELECTORS

                var slideCount = slider.querySelector('[data-slider-count]'); // Slider count wrapper
                var slideNav = slider.querySelector('[data-slider-nav]'); // Slider nav wrapper


                // METHODS

                // Display count of slides
                var createSlideCount = function () {
                    // Variables
                    var slideTotal = mySwipe[index].getNumSlides();
                    var slideCurrent = mySwipe[index].getPos();

                    // Content
                    if ( slideCount !== null ) {
                        slideCount.innerHTML = slideCurrent + ' of ' + slideTotal;
                    }
                };

                // Display Slider navigation
                var createNavButtons = function () {
                    if ( slideNav !== null ) {
                        slideNav.innerHTML = '<a data-slider-nav-prev href="#">Previous</a> | <a data-slider-nav-next href="#">Next</a>';
                    }
                };

                // Stop YouTube and Vimeo videos from playing when leaving the slide
                var stopVideo = function () {
                    var currentSlide = mySwipe[index].getPos() - 1;
                    var iframe = slider.querySelector( '[data-index="' + currentSlide + '"] iframe');
                    var video = slider.querySelector( '[data-index="' + currentSlide + '"] video' );
                    if ( iframe !== null ) {
                        var iframeSrc = iframe.src;
                        iframe.src = iframeSrc;
                    }
                    if ( video !== null ) {
                        video.pause();
                    }
                };

                // Handle next button
                var handleNextBtn = function (event) {
                    event.preventDefault();
                    stopVideo();
                    mySwipe[index].next();
                };

                // Handle previous button
                var handlePrevBtn = function (event) {
                    event.preventDefault();
                    stopVideo();
                    mySwipe[index].prev();
                };

                // Handle keypress
                var handleKeypress = function (event) {
                    if ( event.keyCode == 37 ) {
                        mySwipe[index].prev();
                    }
                    if ( event.keyCode == 39) {
                        mySwipe[index].next();
                    }
                };


                // EVENTS, LISTENERS, AND INITS

                // Activate Slider
                mySwipe[index] = Swipe(slider, {
                    continuous: true,
                    callback: function(index, elem) {
                        createSlideCount(); // Update with new position on slide change
                    }
                });

                // Create slide count and nav
                createSlideCount();
                createNavButtons();
                var btnNext = slider.querySelector('[data-slider-nav-next]'); // Next slide button
                var btnPrev = slider.querySelector('[data-slider-nav-prev]'); // Previous slide button

                // Toggle Previous & Next Buttons
                if ( btnNext ) {
                    btnNext.addEventListener('click', handleNextBtn, false);
                }
                if ( btnPrev ) {
                    btnPrev.addEventListener('click', handlePrevBtn, false);
                }

                // Toggle Left & Right Keypress
                window.addEventListener('keydown', handleKeypress, false);

            });

        }

    })(window, document);

这可以解决问题,如果你打开http://jsfiddle.net/xc2cgs6b/show并且你的浏览器超过640px它会显示一个网格,如果你然后将浏览器的大小调整到小于640px它将显示幻灯片,到目前为止它工作正常,但一旦你再次调整它超过640px它应该回到网格,但它不会,如果你打开浏览器小于640px,它根本不起作用。

这是代码视图http://jsfiddle.net/xc2cgs6b/

中的小提琴

我被告知bind和unbind可以工作,但我不知道如何实现它。

由于

0 个答案:

没有答案