当前位置:首页 > 开发 > Web前端 > 前端 > 正文

Bootstrap里如何动态创建一个popover

发表于: 2015-02-04   作者:BreakingBad   来源:转载   浏览次数:
摘要: 一种简单的方法就是自己写 popover 的 html,并且在需要显示 popover 的地方控制内容变化。 $("#your-button").popover({ html: true, content: '<div id="content">...</div>' }) .click(function()

一种简单的方法就是自己写 popover 的 html,并且在需要显示 popover 的地方控制内容变化。

$("#your-button").popover({
    html: true,
    content: '<div id="content">...</div>'
})
.click(function() {
    $("#content").text('YOUR CONTENT');
});

P.S. 最新的 bootstrap 3 的 popover(options) 初始化参数里提供了修改默认 popover template html 的选项,我没有实际用过不确定有没有坑,看起来会比上面的方法更加优雅。

 

js:

 <script src='js/jquery-1.9.0.min.js' type="text/javascript"></script>
 <script src='js/bootstrap.min.js' type="text/javascript"></script>

 <link href='css/bootstrap.min.css' rel="stylesheet">
 <link href='css/bootstrap.add.css' rel="stylesheet">

 

   window.addEventListener("hashchange", function() { scrollBy(0, -145) })
   $('#profil').popover({placement : 'bottom',html : 'true', trigger : 'hover'})

 

html:

                <button class="btn btn-small btn-bpf-inverse" type="button" id="profil" data-original-title="Profil" href="#" data-toggle="popover" title="D&eacute;tail du profil"
                  data-content="
                <p>Profil métier :<br><span class='label label-success'>Gestion local des services</span></p>
                <p>Type de Service :<br><span class='label label-success'>Services aux véhicules</span></p>
                <p>Pays :<br><span class='label label-success'>Italy</span></p>
       <p>Marque :<br><span class='label label-success'>Citroën</span></p>
                ">
                <i class="icon-user"></i> Profil
                </button>

Bootstrap里如何动态创建一个popover

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
提示内容的方向 top | bottom | left | right | auto. 4种触发方式 click | hover | focus | manual
最终结果如下图: 全部dom元素就是一个div,这里采用了两个小技巧,很简单的实现了这个效果,一个是
本地下载 最终实现效果如下: 首先你得引入bootstrap与jquery 推荐一个CDN:http://cdn.gbtags.com/in
免责申明(必读!):本博客提供的所有教程的翻译原稿均来自于互联网,仅供学习交流之用,切勿进行
免责申明(必读!):本博客提供的所有教程的翻译原稿均来自于互联网,仅供学习交流之用,切勿进行
Situation: Our outputs have some background colors for important fields to have better visibi
Situation: Our outputs have some background colors for important fields to have better visibi
在iPhone上实现iPad上UIPopoverController的效果,也就是,点击选中列表某一行,将弹出另外一个小列
实现弹出日历效果。可以手指划动选择日历上的多个日期。无需额外API或图片,百分之百CoreGraphics实
高手请绕行,新手往下走。 作为一个刚接触github(https://github.com/)的新手,除了感叹开源的丰
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号