如何让 Twitter Bootstrap jQuery 元素(工具提示、弹出窗口等)正常工作?

发布于 2025-01-06 18:34:51 字数 697 浏览 1 评论 0原文

我一直在 Dreamweaver 中使用 Twitter Bootstrap 测试页面,但我绝对无法让任何类型的弹出窗口、工具提示或其他 Bootstrap jQuery 好东西工作。我已经从演示页面复制了代码,倒入源代码,直接链接到所有正确的 JavaScript 文件,但仍然一无所获。 CSS 工作正常,只是没有动画。

演示页面提到了这段代码:

$('#example').popover(options)

但我不知道如何处理类似的东西,因为我在任何工作站点中都没有看到类似的东西。

如果有人能为我缺少的(可能)微小链接提供任何建议,我将不胜感激。

编辑

我在发布此内容后发现了以下代码片段:

$(document).ready(function() {
    $("a[rel=popover]")
        .popover({
            offset: 10
        })
        .click(function(e) {
            e.preventDefault()
        })
});

它触发了弹出窗口!不过,我从未在我看到的任何工作网站的源代码中看到过类似的内容。真的希望 Bootstrap 文档能让像我这样的 jQuery 新用户更清楚地了解这个微小的细节。

I've been playing with the Twitter Bootstrap test page in Dreamweaver and I absolutely can not get any sort of popover, tooltip, or other Bootstrap jQuery goodie to work. I've copied code from the demo page, poured over the source code, have direct links to all the correct JavaScript files, and still nothing. The CSS works fine though, just none of the animation.

The demo page mentions this code for something:

$('#example').popover(options)

But I have no idea what to do with something like that because I didn't see anything like that in any working site.

If anyone could give me any suggestions for the (probably) tiny link I'm missing, I'd greatly appreciate it.

EDIT

I found the following code snippet after posting this:

$(document).ready(function() {
    $("a[rel=popover]")
        .popover({
            offset: 10
        })
        .click(function(e) {
            e.preventDefault()
        })
});

And it got the popovers triggering! I never saw anything like that in the source code of any of the working sites I saw though. Really wish the Bootstrap documentation could have made that tiny detail a bit clearer for new jQuery users like me.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

初心未许 2025-01-13 18:34:51

对于来自 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 文档所说的 data-api 的含义。这些插件是“选择加入”的。

For people coming here from Google:

You can get tooltip and popover to work automatically like the other Bootstrap plugins with the following code:

<script type="text/javascript">
    $(function () {
        $('body').popover({
            selector: '[data-toggle="popover"]'
        });

        $('body').tooltip({
            selector: 'a[rel="tooltip"], [data-toggle="tooltip"]'
        });
    });
</script>

You can then use data attributes like normal:

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

This is what the Bootstrap docs mean when it says that the data-api for these plugins are "opt in".

舂唻埖巳落 2025-01-13 18:34:51

您需要为要在鼠标悬停时显示弹出框的元素指定一个 id 或类。这是一个例子:

<div id="example">Some element</div>

<script>
  $('#example').popover({
    title: 'A title!',
    content: 'Some content!' 
  })
</script>

You need to specify an id or class for the element you want to display a popover when it's hovered over. Here's an example:

<div id="example">Some element</div>

<script>
  $('#example').popover({
    title: 'A title!',
    content: 'Some content!' 
  })
</script>
迷爱 2025-01-13 18:34:51

如果您想要引导工具提示,那么:

    $(function () {
        $("[rel='tooltip']").tooltip();
    });

如果您想要 Jquery 工具提示,那么:

    /*** 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>

If you want bootstrap tooltip then:

    $(function () {
        $("[rel='tooltip']").tooltip();
    });

If you want Jquery tooltip then:

    /*** Handle jQuery plugin naming conflict between jQuery UI ***/
$.widget.bridge('uitooltip', $.ui.tooltip);

    $(function () {
        $("[rel='tooltip']").uitooltip();
    });

HTML will remain same in both the case:

  <div title="Tooltip text" rel="tooltip"> div data ... </div>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文