我可以在Bootstrap popover中使用动态内容吗?
我在“重复区域”中使用Bootstrap Popover来显示推荐书。 每个推荐都有一个“查看属性详细信息”按钮,可以打开弹出窗口。 在Pop中我希望显示与每个推荐和图像细节相关联的图像。 图像路径存储在数据库的一列中,以便显示我需要将图像源绑定到内容的每个推荐的图像,但它不接受PHP。 我使用的脚本允许我将html写入内容,但需要动态创建图像。 动态文本适用于’a’标记’标题’选项,但不适用于内容。
任何人都可以阐明这一点吗?
这就是我所拥有的。
$(document).ready(function() { $("[rel=details]").popover({ placement : 'bottom', //placement of the popover. also can use top, bottom, left or right html: 'true', //needed to show html of course content : '<img src="" width="251" height="201" />' //this is the content of the html box. add the image here or anything you want really. }); }); <a href="#" rel="details" class="btn btn-small pull-right" data-toggle="popover" title="" data-content="">View Property
var popover = $("[rel=details]").popover({ trigger: 'hover', placement: 'bottom', html: 'true' }).on('show.bs.popover', function () { //I saw an answer here with 'show.bs.modal' it is wrong, this is the correct, //also you can use 'shown.bs.popover to take actions AFTER the popover shown in screen. $.ajax({ url: 'data.php', success: function (html) { popover.attr('data-content', html); } }); });
一岁:(但这可能会帮助另一个人
删除你的js脚本并添加这个:
var content = $('[id*="yourDivId"]'); var title = "Your title, you can use a selector..."; $('[data-toggle="popover"]').popover({ html: true, content: function () { return content.html(); }, title: function() { return title.html(); } });
这是通用方法,但使用ASP.Net处理程序来处理图像。 在PHP中使用类似的东西动态生成图像
View Property
$("selector").popover({ trigger : "manual", placement : 'right', html : true, template : '' }).popover("show"); $.ajax({ async : true, url : url, dataType : 'json', success : function(d) { $("#phover" + id).attr('data-original-title', d['heading']); $('.popover-title').html(d['heading']); $('.popover-content').html(d['body']); }, beforeSend : function() { var loadingimage = ''; $('.popover-title').html(loadingimage); $('.popover-content').html(loadingimage); } });