是否可以将 div 用作 Twitter 的 Popover 的内容
Posted
技术标签:
【中文标题】是否可以将 div 用作 Twitter 的 Popover 的内容【英文标题】:Is it possible to use a div as content for Twitter's Popover 【发布时间】:2012-02-11 02:53:45 【问题描述】:我正在使用 twitter 的 bootstrap 弹出框here。现在,当我滚动弹出框文本时,会出现一个弹出框,其中仅包含 <a>
的 data-content
属性中的文本。我想知道是否有办法在弹出框内放置一个<div>
。潜在地,我想在那里使用 php 和 mysql,但如果我能让一个 div 工作,我想我可以弄清楚其余的。我尝试将 data-content 设置为 div
ID,但没有成功。
html:
<a class='danger'
data-placement='above'
rel='popover'
data-content='#PopupDiv'
href='#'>Click</a>
【问题讨论】:
【参考方案1】:首先,如果要在内容中使用 HTML,则需要将 HTML 选项设置为 true:
$('.danger').popover( html : true);
那么你有两个选项来设置弹出框的内容
使用数据内容属性。这是默认选项。 使用返回 HTML 内容的自定义 JS 函数。使用数据内容: 您需要转义 HTML 内容,如下所示:
<a class='danger' data-placement='above'
data-content="<div>This is your div content</div>"
title="Title" href='#'>Click</a>
您可以手动转义 HTML 或使用函数。我不了解 PHP,但在 Rails 中我们使用 *html_safe*。
使用 JS 函数: 如果你这样做,你有几个选择。我认为最简单的方法是将您的 div 内容隐藏在您想要的任何位置,然后编写一个函数将其内容传递给 popover。像这样的:
$(document).ready(function()
$('.danger').popover(
html : true,
content: function()
return $('#popover_content_wrapper').html();
);
);
然后你的 HTML 看起来像这样:
<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a>
<div id="popover_content_wrapper" style="display: none">
<div>This is your div content</div>
</div>
希望对你有帮助!
PS:我在使用 popover 并且没有设置 title 属性时遇到了一些麻烦......所以,请记住始终设置标题。
【讨论】:
仅供参考,bootstrap 有一个名为“hide”的类,它设置 display: none 请注意,但这种方法对于 IE7 来说非常慢,大概是因为 html 的副本涉及大量的 DOM 操作。根据我们的经验,它在 IE7 中不可用,因此您需要以另一种方式对其进行升级。 如果您发现需要将一些 javascript 函数附加到您的popover_content_wrapper
内的链接,此解决方案将导致问题,因为它被呈现为 html(没有您的处理程序)。然后解决方案是侦听“inserted.bs.popover”事件并将您的处理程序重新附加到现在位于 DOM 中的新元素。【参考方案2】:
基于 jävi 的回答,这可以在没有 ID 或其他按钮属性的情况下完成,如下所示:
http://jsfiddle.net/isherwood/E5Ly5/
<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content hide">My first popover content goes here.</div>
<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content hide">My second popover content goes here.</div>
<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content hide">My third popover content goes here.</div>
$('.popper').popover(
container: 'body',
html: true,
content: function ()
return $(this).next('.popper-content').html();
);
【讨论】:
【参考方案3】:如果您希望只是具有弹出的外观和感觉的另一种替代方法。以下是方法。当然,这是手动操作,但很好用 :)
HTML - 按钮
<button class="btn btn-info btn-small" style="margin-right:5px;" id="bg" data-placement='bottom' rel="tooltip" title="Background Image"><i class="icon-picture icon-white"></i></button>
HTML - 弹出框
<div class="bgform popover fade bottom in">
<div class="arrow"></div>
..... your code here .......
</div>
JS
$("#bg").click(function()
$('.bgform').slideToggle();
);
【讨论】:
这对我有用,尽管我必须硬连线弹出框的位置,这不是很好,例如使用style="top: 200px; left: 90px;
到bgform
div。有没有办法调用引导程序的自动放置代码?此外,您可以使用 fadeToggle() 或只是 toggle() 在 javascript 中获得不同的效果。
这是唯一正确的方法。 html() 创建一个副本,使其无法用于数据绑定。也没有挂钩到预转换状态的事件,所以在它可见之前你不能绑定到 popover。【参考方案4】:
聚会迟到了。建立其他解决方案。我需要一种将目标 DIV 作为变量传递的方法。这就是我所做的。
用于 Popover 源的 HTML(添加了一个数据属性 data-pop,它将保存目标 DIV id/或类的值):
<div data-html="true" data-toggle="popover" data-pop="popper-content" class="popper">
用于 Popover 内容的 HTML(我正在使用引导隐藏类):
<div id="popper-content" class="hide">Content goes here</div>
脚本:
$('.popper').popover(
placement: popover_placement,
container: 'div.page-content',
html: true,
trigger: 'hover',
content: function ()
var pop_dest = $(this).attr("data-pop");
//console.log(plant);
return $("#"+pop_dest).html();
);
【讨论】:
你能加个小提琴吗?这不是开箱即用的。【参考方案5】:除了其他回复。如果您在选项中允许html
,您可以将jQuery
对象传递给内容,它将与所有事件和绑定一起附加到弹出框的内容中。以下是源代码中的逻辑:
html
不允许,内容数据将作为文本应用
如果html
允许并且内容数据是字符串,它将被应用为html
否则内容数据将附加到弹出框的内容容器中
$("#popover-button").popover(
content: $("#popover-content"),
html: true,
title: "Popover title"
);
【讨论】:
【参考方案6】:所有这些答案都遗漏了一个非常重要的方面!
通过使用 .html 或 innerHtml 或 outerHtml 您实际上并没有使用引用的元素。您正在使用元素 html 的副本。这有一些严重的缺点。
-
您不能使用任何 ID,因为 ID 会重复。
如果每次显示弹出框时都加载内容,您将丢失所有用户输入。
您要做的是将对象本身加载到弹出框中。
https://jsfiddle.net/shrewmouse/ex6tuzm2/4/
HTML:
<h1> Test </h1>
<div><button id="target">click me</button></div>
<!-- This will be the contents of our popover -->
<div class='_content' id='blah'>
<h1>Extra Stuff</h1>
<input type='number' placeholder='number'/>
</div>
jQuery:
$(document).ready(function()
// We don't want to see the popover contents until the user clicks the target.
// If you don't hide 'blah' first it will be visible outside of the popover.
//
$('#blah').hide();
// Initialize our popover
//
$('#target').popover(
content: $('#blah'), // set the content to be the 'blah' div
placement: 'bottom',
html: true
);
// The popover contents will not be set until the popover is shown. Since we don't
// want to see the popover when the page loads, we will show it then hide it.
//
$('#target').popover('show');
$('#target').popover('hide');
// Now that the popover's content is the 'blah' dive we can make it visisble again.
//
$('#blah').show();
);
【讨论】:
如果我能投票 100 次,我会的。我一直追着我的尾巴试图弄清楚为什么在弹出窗口中调用 $('#' + id).val() 总是返回一个空白字符串。这是因为该死的 html 复制了 div。【参考方案7】:here is an another example
<a data-container = "body" data-toggle = "popover" data-placement = "left"
data-content = "<img src='<?php echo baseImgUrl . $row1[2] ?>' width='250' height='100' ><div><h3> <?php echo $row1['1'] ?></h3> <p> <span><?php echo $countsss ?>videos </span>
<span><?php echo $countsss1 ?> followers</span>
</p></div>
<?php echo $row1['4'] ?> <hr><div>
<span> <button type='button' class='btn btn-default pull-left green'>Follow </button> </span> <span> <button type='button' class='btn btn-default pull-left green'> Go to channel page</button> </span><span> <button type='button' class='btn btn-default pull-left green'>Close </button> </span>
</div>">
<?php echo $row1['1'] ?>
</a>
【讨论】:
【参考方案8】:为什么这么复杂?就这样吧:
data-html='true'
【讨论】:
请解释并添加小提琴或完整代码。这没有帮助。以上是关于是否可以将 div 用作 Twitter 的 Popover 的内容的主要内容,如果未能解决你的问题,请参考以下文章
Twitter Bootstrap 按钮组控制单选按钮/复选框
Laravel 中 Twitter Bootstrap 导航的自动活动类