如何使Twitter Bootstrap jQuery Elements(工具提示,弹出等)工作?
-
25-10-2019 - |
题
我一直在Dreamweaver中使用Twitter Bootstrap测试页面,我绝对无法获得任何形式的弹出式,工具提示或其他Bootstrap jQuery Goodie。我从演示页面复制了代码,倒出源代码,直接链接到所有正确的JavaScript文件,但仍然没有。 CSS的工作正常,只是动画。
演示页面提到了此代码:
$('#example').popover(options)
但是我不知道该怎么办,因为我在任何工作网站中都没有看到类似的东西。
如果有人可以给我任何关于(可能)我缺少的(可能)的小链接的建议,我将非常感谢。
编辑
发布此信息后,我找到了以下代码段:
$(document).ready(function() {
$("a[rel=popover]")
.popover({
offset: 10
})
.click(function(e) {
e.preventDefault()
})
});
它引起了弹出式的触发!我从未在我看到的任何工作网站的源代码中看到类似的东西。真的希望Bootstrap文档可以使像我这样的新jQuery用户更清晰地细节。
解决方案
您需要为要显示弹出案悬停时要显示的元素指定ID或类。这是一个例子:
<div id="example">Some element</div>
<script>
$('#example').popover({
title: 'A title!',
content: 'Some content!'
})
</script>
其他提示
对于从Google来这里的人:
您可以将工具提示和弹出窗口自动工作,就像其他Bootstrap插件一样,具有以下代码:
<script type="text/javascript">
$(function () {
$('body').popover({
selector: '[data-toggle="popover"]'
});
$('body').tooltip({
selector: 'a[rel="tooltip"], [data-toggle="tooltip"]'
});
});
</script>
然后,您可以像普通一样使用数据属性:
<a rel="tooltip" title="My tooltip">Link</a>
<a data-toggle="popover" data-content="test">Link</a>
<button data-toggle="tooltip" data-title="My tooltip">Button</button>
这就是Bootstrap文档说这些插件的数据API被“选择”时的意思。
如果您需要Bootstrap Tooltip,则:
$(function () {
$("[rel='tooltip']").tooltip();
});
如果您想要jQuery Tooltip,则:
/*** Handle jQuery plugin naming conflict between jQuery UI ***/
$.widget.bridge('uitooltip', $.ui.tooltip);
$(function () {
$("[rel='tooltip']").uitooltip();
});
在两种情况下,HTML都将保持不变:
<div title="Tooltip text" rel="tooltip"> div data ... </div>
不隶属于 StackOverflow