现在我尝试将自己的jQuery添加到Foundation项目时遇到了很多问题。
这与基金会使用“无冲突”的方式有关吗?添加自己的脚本的正确程序是什么?
我在调用foundation.min.js之后尝试包含对scripts.js文件的调用,但是一些非常简单的slideToggle调用根本没有运行。然而,当我删除对foundation.min.js的引用时,一切正常。
我也遇到过外部脚本文件的问题。
任何提示?谢谢。
答案 0 :(得分:4)
我将自定义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>
你没有提及是否使用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>
将其替换为:
<!-- <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>
然后确保将jquery.js存储在适当的文件夹中。我再次将我的文件存储在/ global目录中。
希望有所帮助!