smoothState.js与其他插件冲突

Question

我已经设法在我的网站上实现了smoothState.js插件，它运行得很好，但是我的另一个非常简单的jQuery插件将无法工作，首先是：

$(document).ready()

我需要刷新页面，这样它才能再次工作。

我读过smoothState 文档，它说我应该将您的插件初始化封装在一个函数中，我们在$.fn.ready()和onAfter上都调用了这个函数--但是我对编程非常陌生，所以我请求您的帮助。

如何使我的jQuery插件与smoothState一起工作？

Answer 1

您需要在函数中包装使用$(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);
  });
});

当页面在$(document).ready(function())中包装时加载时，它会很好地工作，但是由于页面在使用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));

正如您所看到的，我们已经用函数包装器替换了$(document).ready(function())，其他的一切都保持不变。

所以现在我们有了一个函数，我们需要做的就是在页面加载和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,
    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');
});

如有需要，乐意提供进一步协助。