使用Zurb Foundation时包含自定义javascript的正确方法

Numerous times now I've come up against problems when trying to add my own jQuery to a Foundation project.

现在无数次我尝试将自己的jQuery添加到Foundation项目时遇到了问题。

Is this something to do with the way Foundation uses "no-conflict"? What is the correct procedure to adding ones own scripts?

这与基金会使用“无冲突”的方式有关吗？添加自己的脚本的正确程序是什么？

I've tried including a call to a scripts.js file after the call to foundation.min.js but some very simple slideToggle calls are not running at all. Yet when I remove reference to foundation.min.js all works fine.

我在调用foundation.min.js之后尝试包含对scripts.js文件的调用，但是一些非常简单的slideToggle调用根本没有运行。然而，当我删除对foundation.min.js的引用时，一切正常。

I've also had issues with external script files.

我也遇到过外部脚本文件的问题。

Any tips? Thank you.

有小费吗？谢谢。

1 个解决方案

#1

I added my custom js script to the very end of the list of scripts before the closing body tag, and before the $(document).foundation();. I also stored it in the js/vendor directory. In my paste below, I've stored everything in a global directory; just look for your own js directory.

我将自定义js脚本添加到结束体标记之前的脚本列表的最后，并在$（document）.foundation（）;之前。我还将它存储在js / vendor目录中。在下面的粘贴中，我将所有内容存储在一个全局目录中;只需查找自己的js目录。

<script src="global/js/vendor/jquery.js"></script>
<script src="global/js/foundation/foundation.js"></script>

<script src="global/js/foundation/foundation.alerts.js"></script>

<script src="global/js/foundation/foundation.clearing.js"></script>

<script src="global/js/foundation/foundation.cookie.js"></script>

<script src="global/js/foundation/foundation.dropdown.js"></script>

<script src="global/js/foundation/foundation.forms.js"></script>

<script src="global/js/foundation/foundation.joyride.js"></script>

<script src="global/js/foundation/foundation.magellan.js"></script>

<script src="global/js/foundation/foundation.orbit.js"></script>

<script src="global/js/foundation/foundation.placeholder.js"></script>

<script src="global/js/foundation/foundation.reveal.js"></script>

<script src="global/js/foundation/foundation.section.js"></script>

<script src="global/js/foundation/foundation.tooltips.js"></script>

<script src="global/js/foundation/foundation.topbar.js"></script>

<!-- My Custom Script!!!! -->
<script src="global/js/vendor/custom.js"></script>

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

You didn't mention if yo'ure using Zurb Foundation 4; if you are then note that it uses Zepto (instead of jQuery) by default except for browsers that don't understand the proto call. If you're seeing jQuery functions not work, you may want to comment out the code that sets up Zepto instead of jQuery and then test. Look for the following, also near the bottom of the document:

你没有提到你是否使用Zurb Foundation 4;如果你注意它默认使用Zepto（而不是jQuery），除了不了解proto调用的浏览器。如果您看到jQuery函数不起作用，您可能想要注释掉设置Zepto而不是jQuery的代码，然后进行测试。查找以下内容，也在文档底部附近：

<script>
document.write('<script src=' +
('__proto__' in {} ? 'global/js/vendor/zepto' : 'global/js/vendor/jquery') +
'.js><\/script>')
</script>

Replace that with:

替换为：

<!-- <script>
document.write('<script src=' +
('__proto__' in {} ? 'global/js/vendor/zepto' : 'global/js/vendor/jquery') +
'.js><\/script>')
</script> -->

<script src="global/js/vendor/jquery.js"></script>

And then make sure to store the jquery.js in the appropriate folder. Again, I'm storing my files in a /global directory.

然后确保将jquery.js存储在适当的文件夹中。我再次将我的文件存储在/ global目录中。

Hope that helps!

希望有所帮助！