JavaScript – HTML引导Popover功能

前端之家收集整理的这篇文章主要介绍了JavaScript – HTML引导Popover功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想知道由引导给出的popover我有以下的事情 –
<a href="javascript: void(0)" id="member1" rel="popover" data-content="Co-President sample@uic.edu" data-original-title="Liz Sample"><img src="femaleprofilepicture2.jpg" class="img-polaroid"></a>

截至目前,当我点击图像时,我同时获得了联合主席和sample@uic.edu两者.如何让它们出现在不同的行.

谢谢

解决方法

您可以这样做的一个方法是将引导弹出窗口内容设置为html并将html设置为true,并提供< br />之间:

data-content =“联合总裁< br /> sample@uic.edu”和data-html =“true”

即:

<a href="javascript: void(0)" id="member1" data-placement="bottom" rel="popover" data-content="Co-President <br/> sample@uic.edu" data-html="true" data-original-title="Liz Sample"><img src="femaleprofilepicture2.jpg" class="img-polaroid"/></a>

Fiddle

但是总是更好地分别创建html内容,并通过选项填充到popover中.

这样的事情

HTML:

<a href="javascript: void(0)" id="member1" data-contentwrapper=".mycontent"  rel="popover"><img src="femaleprofilepicture2.jpg" class="img-polaroid"/></a>

<div class="mycontent"> <!-- Here i define my content and add an attribute data-contentwrapper t0 a selector-->
    Co-President <br/> 
    sample@uic.edu
</div>

JS:

$('[rel=popover]').popover({
    html:true,placement:'bottom',content:function(){
        return $($(this).data('contentwrapper')).html();
    }
});

Fiddle

猜你在找的JavaScript相关文章