0
我正在使用Foundation創建的網站上工作,我試圖升級到5.2.0以查看Orbit問題是否已解決(等等)。我初始化組件通過數據屬性,如data-orbit
,當我在頁腳使用舊版本的CDN和初始化像這樣一切正常:爲什麼Foundation 5不初始化任何JavaScript組件?
<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>
我只使用軌道
,顯示,頂欄,和下拉,所以我想建立和縮小我自己的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>
我包括一切作爲萬福瑪利亞,不知道是否有交叉依賴什麼的,但每一個(先前工作)模塊加載失敗。事情我已經檢查:
- 的包括網址是所有工作(200 OK),而不是緩存以前的版本或任何
- 有頁面上沒有JavaScript錯誤,或任何種類 的麻煩控制檯痕跡
- 使用minified CDN version of 5.2.0導致完全相同的問題,這導致我相信這是一個5.2.0的東西,或者至少是唯一可用的版本(5.0.2)和我試過的任何其他版本
- 明顯區別初始化組件(
$(document).foundation('orbit');
)沒有區別 - 我從5.2.0包中添加了foundation.min.css,但它沒有任何區別
- 5.0.3似乎可以工作(來自cdnjs.cloudflare.com),所以現在我在想我'到的東西看包將M記錄每一個模塊休息
雖然,這裏是我的軌道標記(與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()
初始化頁面上使用的任何模塊。但很顯然,我錯過了一些東西。