Question

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

$(document).ready()

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

我已经阅读了smoothState documentation，它说我应该将你的插件初始化包装在我们调用$ .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时页面不会重新加载，我们需要一种方法来调用代码段页面最初加载，当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与其他插件冲突

1 个答案: