2014-03-12 32 views
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()初始化頁面上使用的任何模塊。但很顯然,我錯過了一些東西。

回答

1

這是SCSS。你不能編譯舊的SCSS,並期望它能夠與5.0.2-5.0.3和較新版本的框架一起工作。一攬子交易,馬特。