Foundation 6 的 Off-canvas 不工作
Foundation 6's Off-canvas not working
我正在尝试让 Foundation 6 的 Off-canvas 功能发挥作用。在这一点上,我现在正试图从他们的文档 (http://foundation.zurb.com/sites/docs/off-canvas.html#complete-example) 中获取 Zurb 自己的示例。
当我点击打开 canvas 的按钮时,没有任何反应。不滑动,不褪色,什么都没有。
我已检查 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&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">×</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>
off-canvas 不工作的原因是你没有初始化 Foundation JS。
在您的 index.html
的 jQuery .ready()
或 <script>
元素之后,您需要根据 installation documentation example[ 调用 $(document).foundation();
$(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()
的基本 off-canvas 示例以及使用 ready()
.
工作的功能
这里有一个 jsfiddle 没有调用 $(document).foundation()
,你会立即看到功能失败。
在加载所有脚本后调用 $(document).foundation()
,您应该能够获得 off-canvas 和任何其他功能,并且 运行.
您还可以通过对该元素调用 foundation()
来定位特定元素。
$('#foo').foundation(); // initialize all plugins within the element `#foo`
jsfiddle 演示针对特定元素。
希望对您有所帮助!
所以,几周来我一直在尝试实现关闭 canvas 导航。我终于想出了一个解决方案。
事实证明,none 提供的 js 文件触发了关闭 canvas 菜单,所以我决定在他们的文档站点上使用 Foundation 的 JS 文件(因为他们关闭 canvas 非常适合他们)。
这是我使用的三个脚本:
<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>
希望对您有所帮助!
我正在尝试让 Foundation 6 的 Off-canvas 功能发挥作用。在这一点上,我现在正试图从他们的文档 (http://foundation.zurb.com/sites/docs/off-canvas.html#complete-example) 中获取 Zurb 自己的示例。
当我点击打开 canvas 的按钮时,没有任何反应。不滑动,不褪色,什么都没有。
我已检查 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&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">×</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>
off-canvas 不工作的原因是你没有初始化 Foundation JS。
在您的 index.html
的 jQuery .ready()
或 <script>
元素之后,您需要根据 installation documentation example[ 调用 $(document).foundation();
$(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()
的基本 off-canvas 示例以及使用 ready()
.
这里有一个 jsfiddle 没有调用 $(document).foundation()
,你会立即看到功能失败。
在加载所有脚本后调用 $(document).foundation()
,您应该能够获得 off-canvas 和任何其他功能,并且 运行.
您还可以通过对该元素调用 foundation()
来定位特定元素。
$('#foo').foundation(); // initialize all plugins within the element `#foo`
jsfiddle 演示针对特定元素。
希望对您有所帮助!
所以,几周来我一直在尝试实现关闭 canvas 导航。我终于想出了一个解决方案。
事实证明,none 提供的 js 文件触发了关闭 canvas 菜单,所以我决定在他们的文档站点上使用 Foundation 的 JS 文件(因为他们关闭 canvas 非常适合他们)。
这是我使用的三个脚本:
<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>
希望对您有所帮助!