Question

我正在将Foundation 4与Bones合并以创建WP Starter主题。我从基金会3的JS中得到了一切正常，但现在我正在尝试实现Foundation 4 JS，我遇到了一些问题。

我按照Foundation 4 JS Documentation中的步骤进行了操作，但仍然没有运气。这是我在关闭正文标记之前直接放置的代码（我知道正确的方法是将脚本排入队列，但是对于测试我只是直接粘贴在关闭的body标记之上）：

<script>
document.write('<script src=http://mcfaddengavender.net/jeremy/wp-content/themes/bones-master/library/js/vendor/'
+ ('__proto__' in {} ? 'zepto' : 'jquery')
+ '.js><\/script>');
</script>   

<script src="http://mcfaddengavender.net/jeremy/wp-content/themes/bones-master/library/js/foundation.min.js"></script>

<script>
$(document).foundation();
</script>

我正在尝试在this page上打开一个模态，但正如您所看到的，当您单击链接时，模态永远不会触发。我注意到Javascript控制台中有一些错误，但我还是JS的新手，所以他们有点过头了。

正如我之前提到的，基础3 JS的工作正常，它不需要调用来初始化函数 - 它似乎工作正常。不确定这是否会产生巨大的差异，但我注意到，与Foundation 3 JS相比，Foundation 4 JS的文档有所不同。

有人能让我指出正确的方向吗？

Answer 1

看起来浏览器找不到Zepto（至少chrome不能）。

它在这里寻找： http://mcfaddengavender.net/library/js/vendor/zepto.js但它返回404

确保在相应的目录中设置了库！

Answer 2

在我评论之后，我得到它工作大声笑。也许这会帮助你或其他人。

似乎文档有点令人困惑，我只能从这个序列中加载foundation / foundation.js和foundation-whatever-plugin.js来获得插件功能 - 只加载foundation.js不起作用我

我使用requirejs加载，所以我不必担心路径，但为了您的目的，请确保您没有任何路径问题，此加载顺序应该有效。为了排除故障，我绕过了modernizr / zepto探测器并直接加载jquery。

 requirejs.config({

 baseUrl: "/path/to/scripts",
 paths:{
  jquery: 'vendor/jquery/jquery.min',
 },
 shim: {

    'foundation/foundation': { deps: ['jquery'] },
    'foundation/foundation.alerts': { deps: ['jquery'] },
    'foundation/foundation.clearing': { deps: ['jquery'] },
    'foundation/foundation.cookie': { deps: ['jquery'] },
    'foundation/foundation.dropdown': { deps: ['jquery'] },
    'foundation/foundation.forms': { deps: ['jquery'] },
    'foundation/foundation.joyride': { deps: ['jquery'] },
    'foundation/foundation.magellan': { deps: ['jquery'] },
    'foundation/foundation.orbit': { deps: ['jquery'] },
    'foundation/foundation.placeholder': { deps: ['jquery'] },
    'foundation/foundation.reveal': { deps: ['jquery'] },
    'foundation/foundation.section': { deps: ['jquery'] },
    'foundation/foundation.tooltips': { deps: ['jquery'] },
    'foundation/foundation.topbar': { deps: ['jquery'] },
    'vendor/jquery.maskedinput/jquery.maskedinput.min': { deps: ['jquery']},
    'vendor/chosen/chosen/chosen.jquery': { deps: ['jquery']},
    'vendor/tablesorter/js/jquery.tablesorter.min': { deps: ['jquery']},
    'vendor/tablesorter/addons/pager/jquery.tablesorter.pager.min': {
      deps: [
      'jquery', 
      'vendor/tablesorter/js/jquery.tablesorter.min'
      ]
    },
    'vendor/redactor-js/redactor/redactor.min': { deps: ['jquery']},
    'lib/jquery.passwordstrength': { deps: ['jquery']}

}

}）;

require(["jquery",
"foundation/foundation",
"foundation/foundation.alerts",
"foundation/foundation.clearing",
"foundation/foundation.cookie",
"foundation/foundation.dropdown",
"foundation/foundation.forms",
"foundation/foundation.joyride",
"foundation/foundation.magellan",
"foundation/foundation.orbit",
"foundation/foundation.placeholder",
"foundation/foundation.reveal",
"foundation/foundation.section",
"foundation/foundation.tooltips",
"foundation/foundation.topbar"
], function ($) {
  $(document).foundation();
});

让Foundation 4 JS在WP中工作的问题

2 个答案: