Question

我正在使用FredHQ Roundabout (jQuery Plugin)并且需要在480像素以下禁用此插件。它被一个类调用，所以我尝试添加一个删除类：

<script>
$(window).resize(function() {
    if ($(this).width() > 480) {
        $('#menuSection').removeClass('roundAbout');   
    }
});

$(document).ready(function() {
    $(window).resize();
});
</script>

当我删除该类时，该脚本仍处于活动状态。我需要一些帮助来停用它并在运行中重新激活它。

Answer 1

在不知道您使用的插件的情况下，很难提供答案。插件可能包含“破坏”方法。但是，可能还有另一种方式。保持环形交叉元素的克隆，然后用克隆替换它：

Example

长答案 _{包含细节展示
如果您只想要代码，请向下滚动页面}

<script type="text/javascript">
    // First I establish variables for the clone and timer we will be using
    var clnRoundabout, tmrCloneReset;

    //  This is equivalent to $(document).ready
    $(function() {

        //  First things first, clone the main HTML for later use as needed
        clnRoundabout = $('#menuSection').clone();

        //  Second, establish the first on screen roundabout 
        //    (you may want to do a screen width check first)
        $('#menuSection').roundabout();

        //  Here we call the resize method on window so we know when the window size is changing
        $(window).resize(function(e) {

            //  This is simply to clear the timer so it is not run twice within too short a time period
            //  What might confuse you here is the call before its established
            // the reason is simple, if you have your mouse down on the window border,
            //  and you are constantly moving the border, thus resizing the window,
            //  then this method will be called 1000 times a second!
            //  this is why we need the timer and we need to clear it everytime this method is called.
            //  by clearing it and recalling it everytime we can assure that the method is only fired once, 
            //  depending on the TIME parameter at the end of setTimeout
            clearTimeout(tmrCloneReset);

            //  now of course we establish the timer i just spoke of,
            //  notice at the end i set the time to 250, that is .250 of a second
            //  you can try it with different times, but i have found this time to be optimal
            tmrCloneReset = setTimeout(function() {

                //  Now for your width comparison, pretty straight forward here
                if ($(this).width() < 480) {
                    //  here I create a variable of the original clone,
                    //  I know seeing me clone the clone can seem confusing, here is the reason
                    //  We only want to use ALL new HTML, thus I can't use our old clone variable
                    //  for anything other than Copying "FROM"
                    //  this way we always have fresh HTML to replace the old HTML with!
                    // Make more sense now? if not, please comment 
                    //  and I'll help you wrap your head around it with an analogy or something
                    var tmpClone = clnRoundabout.clone();
                    //  Inserts cloned version with same ID and removes original
                    //  TADA, Fresh new HTML without any of the previous classes or css changes from the plugin tied to it!
                    $('#menuSection').after(tmpClone).remove();
                }
                else {
                    //  Here i'm simply checking to see if the roundabout plugin has already been called on our HTML, 
                    //  if it has, then let's not call it again, 
                    //  remember, as mentioned before, this event can fire up to 1000x a second!
                    if (!$('#menuSection').hasClass('roundabout-holder')) {
                        //  If the class is not existant,then we know the roundabout plugin has not been called!
                        //  Let's call it!
                        $('#menuSection').roundabout(); // or whatever your roundaboutcall is
                    }
                }
            //  Here is the end of the setTimeout function
            //  This is the time I referred to earlier
            //  time here is measured in milliseconds
            //  thus 1 == .001Seconds
            //  and 1000 == 1Seconds
            //  and 10000 == 10Seconds
            }, 250); // Here i'm set to .25Seconds
        });
    })
</script>

~~更多信息将有助于更好地回答这个问题~~

简短回答 _只是代码

var clnRoundabout, tmrCloneReset;
$(function() {
    clnRoundabout = $('#menuSection').clone();
    $('#menuSection').roundabout();
    $(window).resize(function(e) {
        clearTimeout(tmrCloneReset);
        tmrCloneReset = setTimeout(function() {
            if ($(this).width() < 480) {
                var tmpClone = clnRoundabout.clone();
                $('#menuSection').after(tmpClone).remove();
            }
            else {
                if (!$('#menuSection').hasClass('roundabout-holder')) {
                    $('#menuSection').roundabout();
                }
            }
        }, 250);
    });
})

Answer 2

这家伙成功完成了这个，您可以在这里下载他的Roundabout修改版本， https://github.com/mattstauffer/roundabout

如何根据窗口宽度销毁和重新初始化FredHQ jQuery Roundabout插件

2 个答案:

Example