为什么Foundation 5不初始化任何JavaScript组件?
Why won't Foundation 5 initialize any JavaScript components?
我正在使用Foundation构建一个站点,并且我正在尝试升级到5.2.0,以查看是否解决了Orbit问题(以及其他问题)。我通过像data-orbit
这样的数据属性初始化组件,当我在页脚中使用旧的CDN版本并初始化时,一切都很好:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
我只使用轨道,揭示,Topbar,和下拉菜单,所以我想建立和缩小我自己的5.2.0(或主)包。应该是直接的:
<script src="/js/vendor/jquery.js"></script>
<script src="/js/foundation/foundation.js"></script>
<script src="/js/foundation/foundation.abide.js"></script>
<script src="/js/foundation/foundation.accordion.js"></script>
<script src="/js/foundation/foundation.alert.js"></script>
<script src="/js/foundation/foundation.clearing.js"></script>
<script src="/js/foundation/foundation.dropdown.js"></script>
<script src="/js/foundation/foundation.equalizer.js"></script>
<script src="/js/foundation/foundation.interchange.js"></script>
<script src="/js/foundation/foundation.joyride.js"></script>
<script src="/js/foundation/foundation.magellan.js"></script>
<script src="/js/foundation/foundation.offcanvas.js"></script>
<script src="/js/foundation/foundation.orbit.js"></script>
<script src="/js/foundation/foundation.reveal.js"></script>
<script src="/js/foundation/foundation.slider.js"></script>
<script src="/js/foundation/foundation.tab.js"></script>
<script src="/js/foundation/foundation.tooltip.js"></script>
<script src="/js/foundation/foundation.topbar.js"></script>
<script>
$(document).foundation();
</script>
我把所有的东西都包括在内,想知道是否有交叉依赖或其他东西,但每个单独的(以前工作的)模块都无法加载。我检查过的东西:
- 包含的url都工作(200 OK),没有缓存以前的版本或任何
- 页面上没有JavaScript错误,或任何类型的麻烦控制台痕迹
- 使用5.2.0的缩小CDN版本会导致完全相同的问题,这使我相信这是5.2.0的事情-或者至少是唯一可用的版本(5.0.2)与我尝试的任何其他版本之间的差异
- 显式初始化组件(
$(document).foundation('orbit');
)没有区别 - 我从5.2.0包中添加了foundation.min.css,但它也没有任何区别
- 5.0.3似乎工作(从cdnjs.cloudflare.com),所以现在我认为我正在寻找一些东西,看看包更改日志
虽然每个模块都中断了,但这里有一个我的Orbit标记(带有EE标记)的示例,以防万一我做了一些愚蠢的事情:
<ul data-orbit class="orbit-container" data-options="bullets:false;timer:false;slide_number:false;">
{product_images}
<li class="slide" data-orbit-slide="slide-{file_id}">
{exp:ce_img:single src='{url}' alt='{alt_text}' width='635' height='476' crop='yes'}
{if caption}
<div class="orbit-caption">
{caption}
</div>
{/if}
</li>
{/product_images}
{if product_video}
<li class="slide" data-orbit-slide="slide-video">
<div class="flex-video">
{product_video width="100%"}
</div>
</li>
{/if}
</ul>
初始化还有其他技巧吗?我的理解是,您需要在页面标题中加载fastclick,加载jQuery,然后加载foundation.js
,然后在页脚中的模块,最后调用$(document).foundation()
来初始化页面上使用的任何模块。但很明显,我遗漏了一些东西。
这是SCSS。你不能编译旧的SCSS,并期望它能与5.0.2-5.0.3和更新版本的框架一起工作。套餐交易,马特。
相关文章:
- 将Vaadin组件放入Javascript组件生成的元素中
- Tabtastic,javascript组件..如何添加eventlistener来捕获选项卡单击
- 可重用的 Javascript 组件
- 基于Javascript组件的游戏设计
- 是否有用于在网页中嵌入HTML文档的JavaScript组件
- 如何创建一个可重用的 JavaScript 组件
- 放入Javascript组件 - 如何处理“配置”
- 用于虚拟树视图的HTML或Javascript组件/库
- Vaadin具有自定义布局和JavaScript组件
- 如何为javascript组件引用HTML层
- Javascript组件在IE9中不起作用
- 在meteorjs中嵌入javascript组件
- JavaScript组件没有名为“available"”的方法.使用transformrequest时
- Twitter引导程序javascript组件不工作
- 如何在标签中连接Primefaces UI和JavaScript组件
- 无法包含xajax Javascript组件
- vadin -从客户端javascript组件请求布局
- Firefox异常'JavaScript组件没有名为:"available"'的方法
- 如何在Liferay中激活原生引导2.3.2 javascript组件
- HTML/Javascript组件,允许用户从项目列表中选择并排序他们的选择