我无法让Zurb Foundation在Padrino中正常工作。样式表已编译并加载,但Foundation模块不起作用。
http://intense-falls-2845.herokuapp.com/
是的haml版本
http://foundation.zurb.com/templates/marketing.html
,但下拉菜单和动态观察滑块都不起作用。该项目是使用生成的
$ padrino g project PadrinoFoundation -e haml -c compass -s jquery -b
$ padrino g plugin camorra
$ bundle install
通过对app/app.rb(创建路线)、app/stylesheets/application.scss(删除蓝图的指南针引用)和app/views/application.haml(布局,请阅读下文)进行一些编辑。
这些可以在下面查看:
(路线)https://github.com/bcsantos/PadrinoZurbFoundation/blob/master/app/app.rb
(样式表)https://github.com/bcsantos/PadrinoZurbFoundation/blob/master/app/stylesheets/application.scss
(布局)https://github.com/bcsantos/PadrinoZurbFoundation/blob/master/app/views/application.haml
(整个存储库)https://github.com/bcsantos/PadrinoZurbFoundation
关于布局,我使用https://github.com/CIRCUITLLC/foundation_templates_haml/blob/master/haml/marketing.html.haml但作为哈姆的新手,我可能犯了错误。希望如果有人给我指明正确的方向,我就能解决问题。
有什么问题吗?
感谢阅读。
在检查您的页面时,我注意到了几件事:
-
加载Modernizr时出现404错误:您的页面正试图从
/javascripts/modernizr.js
加载Modernizer,但文件实际上位于/javascripts/vendor/modernizr.js
(在vendor
文件夹中)。 -
缺少Foundation JavaScript插件:您的页面正在加载
/javascripts/foundation/foundation.js
,但它只包含Foundation核心,没有任何插件(顶部栏下拉菜单和Orbit滑块是作为插件实现的)。要加载的文件显示为/javascripts/foundation.js
(向上一级)。 -
缺少
data-
属性来触发插件:顶部栏和Orbit滑块插件由HTML中的data-
属性激活(您可以在http://foundation.zurb.com/templates/marketing.html)。您需要将这些属性添加到视图中。
我不确定这些更改是否足以让您的页面正常工作,但它们似乎是进一步调试所必需的。
更新:现在有一个ReferenceError: jQuery is not defined
JavaScript错误,由Foundation库触发。根据Foundation的JavaScript设置说明,jQuery和FastClick需要在Foundation脚本之前加载。(我也会遵循该文档,首先加载jQuery,然后是FastClick,然后是Foundation。)
顺便说一句,现在所有主流浏览器都内置了开发工具。我建议为您选择的浏览器探索开发工具;它们将为您节省大量时间和精力:-)