Padrino 0.12.0,Compass 0.12.2,haml 4.0.5和Zurb Foundation 5("camorra"插件) - javascript不起作用



我无法让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 definedJavaScript错误,由Foundation库触发。根据Foundation的JavaScript设置说明,jQuery和FastClick需要在Foundation脚本之前加载。(我也会遵循该文档,首先加载jQuery,然后是FastClick,然后是Foundation。)

顺便说一句,现在所有主流浏览器都内置了开发工具。我建议为您选择的浏览器探索开发工具;它们将为您节省大量时间和精力:-)

最新更新