使用bootstrap和jquery更改一个popover的标题
-
11-12-2019 - |
题
这是链接的HTML,即:
<a href="javascript:void(0);" style="font-size: 3em; color: #222" class="popover-test" id="directNavPrev" data-title="Previous Result Row" data-content="Previous Result Row">
«</a>
.
是的,我正在调用.popover()初始化,并且popover工作正常。我可以通过没有问题获得更新内容。只是不是标题。我尝试过“prev.data('标题','新标题')”甚至试图重新init“prev.popover({title:'新标题'});”没有骰子......谢谢。
function SetDirectNavigationPlaceholder() {
//debugger;
var item = $("#movementType :selected").val();
var direct = $('#directNavigation');
var prev = $('#directNavPrev');
var next = $('#directNavNext');
switch (item) {
case "result":
$('#bookTypeSection').addClass('hide');
direct.val('Result Row from 1 - 150');
prev.attr('data-title', "Previous Result Row");
next.attr('data-title', "Next Result Row");
prev.attr('data-content', "Check it! this will contain the information for the previous result<table><tr><td>blah</td><td>blah</td></tr><tr><td>blah</td><td>blah</td></tr><tr><td>blah</td><td>blah</td></tr><tr><td>blah</td><td>blah</td></tr></table>");
next.attr('data-content', "Check it! this will contain the information for the next result<table><tr><td>blah</td><td>blah</td></tr></table>");
break;
case "instrument":
$('#bookTypeSection').addClass('hide');
direct.val('Instrument #');
prev.attr('data-title', "Previous Instrument #");
next.attr('data-title', "Next Instrument #");
prev.attr('data-content', "Check it! this will contain the information for the previous <b>instrument</b><table><tr><td>blah</td><td>blah</td></tr></table>");
next.attr('data-content', "Check it! this will contain the information for the next <b>instrument</b><table><tr><td>blah</td><td>blah</td></tr></table>");
break;
case "bookpage":
$('#bookTypeSection').removeClass('hide');
direct.val('Book/Page');
prev.attr('data-title', "Previous Book/Page");
next.attr('data-title', "Next Book/Page");
prev.attr('data-content', "Check it! this will contain the information for the previous <b>book/page</b><table><tr><td>blah</td><td>blah</td></tr></table>");
next.attr('data-content', "Check it! this will contain the information for the next <b>book/page</b><table><tr><td>blah</td><td>blah</td></tr></table>");
break;
}
direct.css('color', '#aaa').not('#directNavigationHeader');
}
. 解决方案 2
认为猫皮肤!
这是交易。看来在Bootstrap.js文件中,即使它呼叫,也没有gettitle()的方法。所以我添加了它。享受。
/* NOTE: POPOVER EXTENDS BOOTSTRAP-TOOLTIP.js
========================================== */
Popover.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype, {
constructor: Popover, setContent: function () {
//debugger;
var $tip = this.tip()
, title = this.getTitle() // didn't exist
, content = this.getContent()
$tip.find('.popover-title')[this.isHTML(title) ? 'html' : 'text'](title)
$tip.find('.popover-content > *')[this.isHTML(content) ? 'html' : 'text'](content)
$tip.removeClass('fade top bottom left right in')
}
, hasContent: function () {
return this.getTitle() || this.getContent()
}
, getContent: function () {
var content
, $e = this.$element
, o = this.options
content = $e.attr('data-content')
|| (typeof o.content == 'function' ? o.content.call($e[0]) : o.content)
return content
}
, getTitle: function () { // does now
var title
, $t = this.$element
, n = this.options
title = $t.attr('data-title')
|| (typeof n.title == 'function' ? n.title.call($t[0]) : n.title)
return title
}
, tip: function () {
if (!this.$tip) {
this.$tip = $(this.options.template)
}
return this.$tip
}
})
.
出于某种原因,我无法抓住实际的“标题”属性,因此如果要更改它,您必须使用“数据标题”。
其他提示
最简单的方法是这个:
var newTitle = "Here's my new title";
$('#MyExample').attr('data-original-title', newTitle);
.
希望它有所帮助!
看起来像twitter-bootstrap不会保留一个div
for timing for timing for termin,以便通过更改标题来改变标题来改变标题。但是,本文可能有帮助。
这是一个jsfiddle ,你可以,呃,小提琴。
和那些不能摆弄它的代码。: - )
html:
<div style="padding-top: 45px;">
<a data-content="Original Content for Popover" data-original-title="Popover Title" data-placement="right" href="#" class="btn danger" id="popover-link" rel="popover">Rollover</a>
</div>
.
javascript:
$('#popover-link').popover({title: function() {return 'new title';}});
$('#popover-link').attr("data-content", "New Content for Popover");
$('#popover-link').setTitle('new title');
. 这适用于我
$("#mylink").data()["bs.popover"].config.title = "New Ttile";
$("#mylink").data()["bs.popover"].config.content = "<p>New Content</p>";
.
或
$("#mylink").data("bs.popover").config.title = "New Ttile";
$("#mylink").data("bs.popover").config.content = "<p>New Content</p>";
. 不隶属于 StackOverflow