Question

我需要实时启用/禁用.js插件。当用户重新调整其浏览器窗口大小时，桌面版本将变为移动版。问题是我需要禁用一些javascript（fullpage.js）并添加一些CSS。如果您重新加载页面或使用PC上的全屏窗口，从开始到结束都没有问题。问题是：如何在宽度＆lt;上禁用fullpage.js？ 800？我试过这件事：

将此功能添加到正文onresize事件中（没有重新加载就没有结果）：

 function checkWidth() {
        if($(window).width() <= 760 ){
            $('#menu-header-button').click(function(){
                $('#navigation').toggleClass('navbar-v');  
                $('#logo-mobile').toggleClass('visible');
                $('#menu-header-button').addClass('disabled');
                 setTimeout(function(){ 
                    $('#menu-header-button').removeClass('disabled');  
                 }, 500);
            });
        } else if($(window).width() > 760 ){
          $('#fullpage').fullpage({
              menu: '#menu',
              anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage'],
              css3: true,
              afterLoad: function(anchorLink, index){
              if( anchorLink == 'firstPage'){
                   $('#navigation').removeClass('navbar-v'); 
              }
          },
              onLeave: function(index, nextIndex, direction){
              setTimeout(function(){ 
                    $('#navigation').addClass('navbar-v'); 
              }, 500); 
              }
            });
        }

}

这有时只会起作用：

$(window).onresize= checkWidth();
function checkWidth() {
                    if($(window).width() == 761 ){
                        location.reload(true);
                    }
                    //...
}

这根本不起作用：

   $(window).onresize= checkWidth();
    function delayCheckWidth(){
      setTimeout(function(){ 
                              checkWidth(); 
                           }, 50); //I thought some delay time can be useful here 
    }
    function checkWidth() {
                        if($(window).width() == 761 ){
                            location.reload(true);
                        }
                        //...
    }

我签出的相关主题：

Throttling
How to disable / Enable plugins?
Enable / Disable JavaScript code
How to disable / Enable plugins?
Enable and disable jquery knob dynamically
Disable and enable jQuery context menu
很多人。

没有关于实时或没什么有趣/有帮助的。

你有什么建议吗？也许我不需要这样做？

Answer 1

您是否尝试过fullPage.js的responsive选项？不确定这是你想要的还是你真正需要完全销毁fullPage.js。

来自fullPage.js documentation：

响应：（默认为0）正常滚动（autoScrolling：false）将在定义的宽度（以像素为单位）下使用。如果用户想要将它用于自己的响应式CSS，则会在插件的容器中添加类fp-responsive。例如，如果设置为900，则只要浏览器的宽度小于900，插件就会像普通网站一样滚动。

fullPage.js中的正常滚动将保留部分height以及分配给菜单的事件或水平滑块的控制箭头，但它将正常滚动为任何网站。您可以看到该模式here的演示。

在任何情况下，如果你真的想因任何原因销毁fullPage.js，你需要使用提供的方法。来自文档：

<强> $。fn.fullpage.destroy（类型）

销毁插件事件，最好是HTML标记和样式。使用AJAX加载内容时使用的理想选择。（）

类型可以'空'或'all'。如果全部通过，则将删除fullpage.js使用的HTML标记和样式。通过这种方式，将保留原始HTML标记，即在进行任何插件修改之前使用的标记。

//destroy any plugin event (scrolls, hashchange in the URL...)
$.fn.fullpage.destroy();

//destroy any plugin event and any plugin modification done over your original HTML markup.
$.fn.fullpage.destroy('all');

如何在网页上启用/禁用（实时）javascript插件？

1 个答案: