Foundation 6的外部畫布不工作

我正在嘗試讓Foundation 6的外部畫布功能工作。在這一點上，我現在試圖讓Zurb自己的例子脫離他們的文檔（http://foundation.zurb.com/sites/docs/off-canvas.html#complete-example）來工作。Foundation 6的外部畫布不工作

當我點擊按鈕打開畫布時，沒有任何反應。沒有滑動，不褪色，沒有。

我已經檢查了foundation.js被包含在頁面中。我可以看到事件處理程序綁定到按鈕。

想法？提前致謝！

HTML源代碼：

<!doctype html> 
<html class="no-js" lang="en"> 
    <head> 
    <meta charset="utf-8" /> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Home | LearnLojban</title> 
    <link href="https://fonts.googleapis.com/css?family=Merriweather:700,700i|Pangolin|Signika&amp;subset=latin-ext" rel="stylesheet"> 
    <link rel="stylesheet" href="static/styles/styles.css" /> 
    </head> 
    <body> 

    <div class="off-canvas position-left" id="offCanvas" data-off-canvas> 
     <!-- Close button --> 
     <button class="close-button" aria-label="Close menu" type="button" data-close> 
     <span aria-hidden="true">&times;</span> 
     </button> 

     <!-- Menu --> 
     <ul class="vertical menu"> 
     <li><a href="#">Foundation</a></li> 
     <li><a href="#">Dot</a></li> 
     <li><a href="#">ZURB</a></li> 
     <li><a href="#">Com</a></li> 
     <li><a href="#">Slash</a></li> 
     <li><a href="#">Sites</a></li> 
     </ul> 
    </div> 

    <div class="off-canvas-content" data-off-canvas-content> 
     <button type="button" class="button" data-toggle="offCanvas">Open Menu</button> 
    </div> 

    <script src="static/js/vendor/jquery.js"></script> 
    <script src="static/js/vendor/what-input.js"></script> 
    <script src="static/js/vendor/foundation.js"></script> 

    </body> 
</html>

來源

2017-02-09 MadEmperorYuri

分享您的HTML，即使它是文檔 –

@AlexanderStaroselsky完成的示例。添加了HTML。 – MadEmperorYuri

看到我的答案。謝謝！ –

爲什麼關閉畫布不工作的原因是因爲你沒有初始化基金會JS。

在任何一個jQuery .ready()或之後的<script>元素你index.html需要調用$(document).foundation();每installation documentation example

$(document).ready(function(){ 
    $(document).foundation(); 
});

OR：

<script src="js/vendor/jquery.min.js"></script> 
<script src="js/vendor/what-input.min.js"></script> 
<script src="js/foundation.min.js"></script> 
<script> 
    $(document).foundation(); 
</script>

這裏是一個jsfiddle的基本關閉帆布例如調用$(document).foundation()並使用ready()工作的功能。

這是一個jsfiddle沒有$(document).foundation()被調用，你會立即看到功能失敗。

呼叫$(document).foundation()後，所有的腳本已經加載，並且你應該能夠下車，帆布和任何其他功能和運行。

您還可以通過該元素的調用foundation()針對特定的元素。

$('#foo').foundation(); // initialize all plugins within the element `#foo`

jsfiddle顯示針對特定元素。

希望有幫助！

來源

2017-02-09 04:59:16

就是這樣。謝謝！我不會想到要查看安裝文檔。 – MadEmperorYuri

-1

所以，我一直在嘗試實施幾個星期的關閉畫布導航。我終於想出了一個解決方案。

原來，沒有被提供的js文件的觸發關閉帆布菜單，所以我決定用自己的文檔站點基金會的JS文件（因爲他們離完美的畫布爲他們工作）。

這些都是我用了三個腳本：

<script src="http://foundation.zurb.com/sites/docs/assets/js/vendor.js?hash=eceb3a0cb6a9a3f95854c532a6ebbd81"></script> 

<script src="http://foundation.zurb.com/sites/docs/assets/js/foundation.js?hash=b679e2177e3de7e04f4c100d03af1ad3"></script> 

<script src="http://foundation.zurb.com/sites/docs/assets/js/docs.js?hash=9adc0ae1222c4567178bb0cc7f704ec5"></script>

希望這有助於！

來源

2017-03-21 19:55:15

Foundation 6的外部畫布不工作

回答

相關問題