Фондовый 6-ый оф-холст не работает

Я пытаюсь получить функцию Off-canvas Foundation 6 для работы. На данный момент я пытаюсь получить собственный пример Zurb из своей документации (http://foundation.zurb.com/sites/docs/off-canvas.html#complete-example).Фондовый 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

См. Мой ответ. Благодаря! –

Причина отходящий холст не работает, потому что вы не инициализирует Foundation JS.

либо в JQuery .ready() или после <script> элементов вашего index.html вам нужно позвонить $(document).foundation(); согласно installation documentation example

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

ИЛИ:

<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-файлы Foundation на своем сайте документации (поскольку их холст отлично работал для них).

Эти три сценария, которые я использовал:

<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

Фондовый 6-ый оф-холст не работает

ответ

Смежные вопросы