smoothState.js与其他插件冲突 [英] smoothState.js conflicting with other plugins

问题描述

我已成功在我的网站上实施 smoothState.js 插件很好，但我的另一个非常简单的jQuery插件将无法工作，首先是：

  $（document）.ready（）
  

我需要刷新页面才能再次使用。

我已经阅读了smoothState 文档，它说我应该将你的插件初始化包装在我们调用$ .fn.ready（）和onAfter 的函数中 - 但我对编程很新，所以我要求你的帮助。 / p>

如何让我的jQuery插件与smoothState一起使用？

解决方案

您需要在函数中包装使用 $（document）.ready（）启动的脚本，然后在需要时调用该函数。

例如，假设这是您当前的脚本：

  $（document）.ready（function（）{
 $（'。btn  -  homepage'）。click（function（e）{
 e.preventDefault（）; 
 var goTo = $（this）.attr（'href'）; 
 
 $（'＃page'）。addClass（'is-exiting'）; 
 $（this）.addClass（'exit-btn'）; 
 
 setTimeout（function（）{
 window.location = goTo; 
}，260）; 
}）; 
}）; 
  

当页面加载时它会正常工作，因为它包含在 $（文件）.ready（function（）），但由于在使用 Smoothstate 时页面不会重新加载，我们需要一种方法来调用页面最初加载时以及smoothstate加载内容时的片段。为此，我们将上面的代码片段转换为如下函数：

 （function（$）{
 $ .fn.onPageLoad = function（）{
 $（'。btn  -  homepage'）。click（function（e）{
 e.preventDefault（）; 
 var goTo = $（this）.attr（'href'）; 
 
 $（'＃page'）。addClass（'is-exiting'）; 
 $（this）.addClass（'exit -btn'）; 
 
 setTimeout（function（）{
 window.location = goTo; 
}，260）; 
}）; 
} ; 
}（jQuery））; 
  

如您所见，我们已交换 $（文件）.ready （function（））使用函数包装器，其他一切都保持不变。

所以现在我们有了一个我们需要的函数do在页面加载时以及在Smoothstate中调用它。

要在页面加载时调用它，我们需要做的就是：

  $（document）.ready（function（）{
 $（'body'）。onPageLoad（）; 
}）; 
  

要在Smoothstate中触发它，我们需要在InAfter回调中调用它，如下所示：

  onAfter：function（$ container）{
 $ container.onPageLoad（）; 
} 
  

这是一个示例Smoothstate脚本，显示放置 onAfter 回调：

  $（function（）{
 var $ page = $ （'#main'）; 
 var options = {
 prefetch：true，
 pageCacheSize：4，
形式：'form'，
 scroll：false，
 onStart：{
持续时间：1200，
渲染：函数（$ container）{
 $ container.addClass（'is-exiting'）; 
 smoothState.restartCSSAnimations（ ）; 
} 
}，
 onReady：{
持续时间：0，
渲染：函数（$ container，$ newContent）{
 $ container。 removeClass（'is-exiting'）; 
 $ container.html（$ newContent）; 
 $（'html，body'）。scrollTop（0）; 
} 
} ，
 onAfter：function（$ container）{
 $ container.onPageLoad（）; 
} 
}; 
 var smoothState = $（'＃main'）。 smoothState（选项）。数据（'smoo thState'）; 
}）; 
  

如果需要，很乐意提供进一步的帮助。

I have managed to implement the smoothState.js plugin on my website and it works nicely, but my other very simple jQuery plugin will not work, wich starts with:

$(document).ready()

I need to refresh the page in order for it to work again.

I've read the smoothState documentation and it says I should wrap your plugin initializations in a function that we call on both $.fn.ready() and onAfter — but I'm farely new to programming, so I'm asking for your help.

How can I make my jQuery plugins work with smoothState?

解决方案

You need to wrap scripts that are initiated with $(document).ready() in a function, and then call that function when you need it.

For example, let’s say this is your current script:

$(document).ready(function() {
  $('.btn--homepage').click(function(e) {
    e.preventDefault();
    var goTo = $(this).attr('href');

    $('#page').addClass('is-exiting');
    $(this).addClass('exit-btn');

    setTimeout(function() {
      window.location = goTo;
    }, 260);
  });
});

It’ll work fine when the page loads as it’s wrapped in $(document).ready(function()), but as the page won’t be reloading when using Smoothstate, we need a way to call the snippet both when the page originally loads and when smoothstate loads content. To do this we’ll turn the above snippet in to a function like this:

(function($) {
  $.fn.onPageLoad = function() {
    $('.btn--homepage').click(function(e) {
      e.preventDefault();
      var goTo = $(this).attr('href');

      $('#page').addClass('is-exiting');
      $(this).addClass('exit-btn');

      setTimeout(function() {
        window.location = goTo;
      }, 260);
    });
  };
}(jQuery));

As you can see, we’ve swapped $(document).ready(function()) with the function wrapper, everything else stays the same.

So now we’ve got a function all we need to do is call it when the page loads and in Smoothstate.

To call it when a page loads all we need to do is this:

$(document).ready(function() {
  $('body').onPageLoad();
});

And to trigger it in Smoothstate we need to call it in the InAfter callback like this:

onAfter: function($container) {
  $container.onPageLoad();
}

And here's an example Smoothstate script showing where to put the onAfter callback:

$(function() {
  var $page = $('#main');
  var options = {
    prefetch : true,
    pageCacheSize: 4,
    forms: 'form',
    scroll: false,
    onStart: {
      duration: 1200,
      render: function($container) {
        $container.addClass('is-exiting');
        smoothState.restartCSSAnimations();
      }
    },
    onReady: {
      duration: 0,
      render: function($container, $newContent) {
        $container.removeClass('is-exiting');
        $container.html($newContent);
        $('html, body').scrollTop(0);
      }
    },
    onAfter: function($container) {
      $container.onPageLoad();
    }
  };
  var smoothState = $('#main').smoothState(options).data('smoothState');
});

Happy to provide further assistance if needed.

这篇关于smoothState.js与其他插件冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！