使Bootstrap Popover与自定义HTML模板一起使用

机械手

我正在使用输入组文本框,并且需要Bootstrap 3弹出框才能工作,并且弹出框模板应由我定义&n设计。因此,我目前拥有的html是:

<div class="row">
        <div class="col-sm-2">
            <div class="input-group">
                <input type="text" class="form-control jq-timePicker" value="09:30">
                <span class="input-group-addon" rel="popover">
                    <span class="glyphicon glyphicon-time"></span>
                </span>
            </div>
        </div>
</div>

我希望单击输入组图标时打开一个弹出窗口。在这种情况下,当单击带有glyphicon-time类的跨度时,将使用以下HTML或显示一个弹出窗口:

<div class="timePickerWrapper popover">
            <div class="arrow"></div>
            <div class="popover-content">
                <div class="timePickerCanvas"></div>
                <div class="timePickerClock timePickerHours"></div>
                <div class="timePickerClock timePickerMinutes"></div>
            </div>
        </div>

JS写道:

$(document).ready(function () {
    var popoverTemplate = ['<div class="timePickerWrapper popover">',
        '<div class="arrow"></div>',
        '<div class="popover-content">',
        '<div class="timePickerCanvas"></div>',
        '<div class="timePickerClock timePickerHours"></div>',
        '<div class="timePickerClock timePickerMinutes"></div>',
        '</div>',
        '</div>'].join('');


    $('body').popover({
        selector: '[rel=popover]',
        trigger: 'click',
        template: popoverTemplate,
        placement: "bottom",
        html: true
    });
});

参见此处的小提琴:http : //www.bootply.com/4fMzxGRpik

谁能帮我纠正我正在做的错误以及显示popvhover时需要做的事情。

代号

您缺少弹出框的内容,您将需要以下内容

$(document).ready(function () {
    var popoverTemplate = ['<div class="timePickerWrapper popover">',
        '<div class="arrow"></div>',
        '<div class="popover-content">',
        '</div>',
        '</div>'].join('');

    var content = ['<div class="timePickerCanvas">asfaf asfsadf</div>',
        '<div class="timePickerClock timePickerHours">asdf asdfasf</div>',
        '<div class="timePickerClock timePickerMinutes"> asfa </div>', ].join('');


    $('body').popover({
        selector: '[rel=popover]',
        trigger: 'click',
        content: content,
        template: popoverTemplate,
        placement: "bottom",
        html: true
    });
});

工作演示

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在UI Bootstrap中将模板与Typeahead一起使用

来自分类Dev

如何自定义Twitter Bootstrap popover隐藏动画

来自分类Dev

AngularJS Bootstrap Popover自定义触发器

来自分类Dev

如何在bootstrap 3 popover中一起使用“ show”和“ placement”等属性?

来自分类Dev

将自定义类与自定义模板容器一起使用

来自分类Dev

与模板模板类一起使用的自定义模板参数活页夹

来自分类Dev

CSS无法与bootstrap一起使用

来自分类Dev

CSS无法与bootstrap一起使用

来自分类Dev

将Bootstrap与WebGrid一起使用?

来自分类Dev

React无法与Bootstrap一起使用

来自分类Dev

UI Bootstrap分页,自定义模板中的itemsPerPage?

来自分类Dev

模板文字不能与Bootstrap 4可折叠项目一起使用?

来自分类Dev

自定义 Bootstrap 轮播

来自分类Dev

如何创建自定义Intellij模板设置器以与Guava的Optional一起使用

来自分类Dev

将LoginView和LogoutView与自定义模板一起使用

来自分类Dev

模板可以与 Aurelia 中的自定义属性一起使用吗?

来自分类Dev

Bootstrap Popover指令逻辑在AngularJS自定义指令中不起作用

来自分类Dev

如何在angularjs应用程序中为Bootstrap Popover添加自定义标头

来自分类Dev

Bootstrap上的HTML自定义字体不起作用

来自分类Dev

Bootstrap 4:HTML-将Div与导航栏一起使用

来自分类Dev

Bootstrap切换chechkbox与html helper chechkboxfor一起使用时不起作用?

来自分类Dev

使用自定义样式打印Bootstrap网格布局

来自分类Dev

使用Bootstrap 5创建自定义工具提示

来自分类Dev

如何在Bootstrap CSS中使用自定义CSS

来自分类Dev

使用Sass在Bootstrap中自定义媒体查询

来自分类Dev

使用AngularJS自定义Bootstrap UI警报

来自分类Dev

结合使用Bootstrap CSS和自定义CSS

来自分类Dev

在Meteor中使用时自定义Bootstrap

来自分类Dev

使用Bootstrap制作自定义导航栏

Related 相关文章

  1. 1

    在UI Bootstrap中将模板与Typeahead一起使用

  2. 2

    如何自定义Twitter Bootstrap popover隐藏动画

  3. 3

    AngularJS Bootstrap Popover自定义触发器

  4. 4

    如何在bootstrap 3 popover中一起使用“ show”和“ placement”等属性?

  5. 5

    将自定义类与自定义模板容器一起使用

  6. 6

    与模板模板类一起使用的自定义模板参数活页夹

  7. 7

    CSS无法与bootstrap一起使用

  8. 8

    CSS无法与bootstrap一起使用

  9. 9

    将Bootstrap与WebGrid一起使用?

  10. 10

    React无法与Bootstrap一起使用

  11. 11

    UI Bootstrap分页,自定义模板中的itemsPerPage?

  12. 12

    模板文字不能与Bootstrap 4可折叠项目一起使用?

  13. 13

    自定义 Bootstrap 轮播

  14. 14

    如何创建自定义Intellij模板设置器以与Guava的Optional一起使用

  15. 15

    将LoginView和LogoutView与自定义模板一起使用

  16. 16

    模板可以与 Aurelia 中的自定义属性一起使用吗?

  17. 17

    Bootstrap Popover指令逻辑在AngularJS自定义指令中不起作用

  18. 18

    如何在angularjs应用程序中为Bootstrap Popover添加自定义标头

  19. 19

    Bootstrap上的HTML自定义字体不起作用

  20. 20

    Bootstrap 4:HTML-将Div与导航栏一起使用

  21. 21

    Bootstrap切换chechkbox与html helper chechkboxfor一起使用时不起作用?

  22. 22

    使用自定义样式打印Bootstrap网格布局

  23. 23

    使用Bootstrap 5创建自定义工具提示

  24. 24

    如何在Bootstrap CSS中使用自定义CSS

  25. 25

    使用Sass在Bootstrap中自定义媒体查询

  26. 26

    使用AngularJS自定义Bootstrap UI警报

  27. 27

    结合使用Bootstrap CSS和自定义CSS

  28. 28

    在Meteor中使用时自定义Bootstrap

  29. 29

    使用Bootstrap制作自定义导航栏

热门标签

归档