Nod*_*.JS 12 html javascript jquery zurb-foundation
我正在尝试初始化基础工具提示而不初始化所有内容(即$(document).foundation())并且我在这个简单的任务中失败了.
我想知道(1)如何使用new Foundation.Tooltip(2)我需要,modernizr因为基金会网站的文档没有提到modernizr作为要求.
我提到过, modernizr因为没有这个工具提示将没有任何样式,也不会显示内部的html.
谢谢
<!DOCTYPE html>
<meta name="robots" content="noindex">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.css" />
<body>
<div class="row">
<span class="has-tip" title="Tooltips are awesome, you <a>link</a> totally use them!">
Hover me
</span>
</div>
<script id="jsbin-javascript">
$(document).ready(function() {
new Foundation.Tooltip($(".has-tip"), {
allowHtml: true
});
// $(document).foundation();
})
</script>
</body>
</html>
我之前没有和基金会合作过,所以我绝对不是专家.但是,我想我已经弄明白为什么你的代码不起作用了.
您可以获得所需的所有链接,并在CodePen中查看工作代码的示例:http://codepen.io/SupposedlySam/pen/ybbYMp .
head前放置在标签中或所有其他脚本下方body(通过Foundation的JavaScript设置页面)tabIndex必须在元素上设置a ."而不是双引号("),并且不能使用反斜杠(\)进行转义.首先回答第二部分：Foundation 6 不需要 Modernizr（但 F5 需要）（参见：http : //foundation.zurb.com/forum/posts/37234-modernizr-and-foundation-6）所以你可以使用完全没有Modernizr 的所有 Foundation 6 组件。
在您的示例中，我认为您正在混合动态创建工具提示：
new Foundation.Tooltip($(".has-tip"), {
allowHtml: true
});
随着初始化工具提示：
$(document).foundation(); // initialise ALL Foundation script - usually required by Foundation generally
或者
$('.has-tip').foundation() // just scripts associated with this element (e.g. tooltips)
所以，创建并INITIALISE JUST工具提示：
new Foundation.Tooltip($(".has-tip"), {
allowHtml: true
});
$('.has-tip').foundation();
出于显而易见的原因，创建必须先于初始化。
参见示例：https : //jsfiddle.net/tymothytym/b6eoh2yg/1/
| 归档时间： |
|
| 查看次数： |
688 次 |
| 最近记录： |