为什么Foundation 5不初始化任何JavaScript组件?

Why won't Foundation 5 initialize any JavaScript components?

本文关键字:JavaScript 组件 任何 初始化 Foundation 为什么      更新时间:2023-09-26

我正在使用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和更新版本的框架一起工作。套餐交易,马特。