파운데이션 6의 캔버스가 작동하지 않음

파운데이션 6의 캔버스 외부 기능을 작동 시키려고합니다. 이 시점에서 나는 Zur 자신의 예제를 자신의 문서 (http://foundation.zurb.com/sites/docs/off-canvas.html#complete-example)에서 작동 시키려고 노력 중이다.파운데이션 6의 캔버스가 작동하지 않음

버튼을 클릭하여 캔버스를 열면 아무 일도 일어나지 않습니다. 슬라이딩, 페이딩 없음, 아무것도 없습니다.

나는 foundation.js이 페이지에 포함되어 있는지 확인했습니다. 이벤트 처리기가 단추에 바인딩 된 것을 볼 수 있습니다.

아이디어가 있으십니까? 미리 감사드립니다!

HTML 소스 : 당신이 재단 JS를 초기화하지 않기 때문에 오프 캔버스가 작동하지 않는 이유

<!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

@AlexanderStaroselsky 문서 –

의 사례 일지라도 HTML을 공유하십시오. HTML이 추가되었습니다. – MadEmperorYuri

내 대답보기. 감사! –

이유입니다. 여기

<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 오프 캔버스 : 중 하나 jQuery를 .ready() 또는 <script> 요소 후 index.html 당신이 installation documentation example

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

또는 당 $(document).foundation();를 호출 할 필요가에서

예 : $(document).foundation()이 호출되고 ready()을 사용하여 작동하는 기능.

여기에 $(document).foundation()이 호출되지 않고 jsfiddle인데, 기능이 실패했다는 것을 즉시 알 수 있습니다.

모든 스크립트가로드 된 후 $(document).foundation()으로 전화하면 오프 캔버스와 다른 기능을 시작하여 실행할 수 있어야합니다.

해당 요소에 foundation()을 호출하여 특정 요소를 타겟팅 할 수도 있습니다.

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

jsfiddle 특정 요소를 타겟팅하는 것을 보여줍니다.

잘하면 도움이됩니다.

출처

2017-02-09 04:59:16

그게 전부 였어. 감사! 설치 설명서를 검토하지 않았을 것입니다. – MadEmperorYuri

-1

그래서 저는 몇 주 동안 오프 캔버스 탐색을 구현하려고했습니다. 마침내 해결책을 찾아 냈습니다.

제공 한 js 파일 중 어느 것도 오프 캔버스 메뉴를 트리거하지 않았기 때문에 오프사이드 캔버스가 완벽하게 작동했기 때문에 해당 문서 사이트에서 Foundation의 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

파운데이션 6의 캔버스가 작동하지 않음

답변

관련 문제