smoothState.js 与其他插件冲突

Question

我已经成功地在我的网站上实现了 smoothState.js 插件并且运行良好，但是我的另一个非常简单的 jQuery 插件将无法运行，它以：

开头

$(document).ready()

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

我已经阅读了 smoothState documentation，它说我应该 将您的插件初始化包装在一个我们同时调用 $.fn.ready() 和 onAfter[ 的函数中=23=] — 但我对编程还很陌生，所以我请求你的帮助。

如何让我的 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 时不会重新加载，我们需要一种方法来调用代码段当页面最初加载时以及 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');
});

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

smoothState.js 与其他插件冲突

smoothState.js conflicting with other plugins

javascript

jquery

plugins

smoothstate.js