0

クリックすると Twitter Bootstrap ポップオーバーが表示される次のアンカー要素があります。

<a href="javascript:void(0)" class="popover_toggle" title="View Image">View Image</a>

また、ポップオーバーを添付してデフォルトのタイトルを設定するための次の JavaScript もあります。

$('.popover_toggle').popover({
    title: 'Login Required!'
});

アンカー要素「View Image」で定義されたタイトルではなく、JavaScript「Login Required!」で定義されたデフォルトのタイトルをポップオーバーに持たせたいと思います。どうすればそれを達成できますか？

4

1 に答える 1

1

http://twitter.github.io/bootstrap/javascript.html#popovers (属性が存在しない場合のデフォルトの title 値) が示すtitleように、要素に空の title 属性がある場合にのみ、タイトルを設定できます。

title オプションが文字列に設定されている場合、ドキュメントの準備ができたときに評価されます。ここで関数を使用 (トリガーで評価) しても機能しません。

Popovers は tooltip クラスの拡張です。コンストラクター呼び出し fixTitle() です。fixTitle() は、コンテンツを title-attribute から data-orginal-title 属性に移動します。これは setTitle() の呼び出しの前に行われるため、title 関数は使用できません。

問題を解決するには、ポップオーバー クラスの fixTitle() を無効にします。

$.fn.popover.Constructor.prototype.fixTitle = function () { return; }

これで、ポップオーバーは (タイトル属性) を無視し、ポップオーバー呼び出しで設定したタイトルを使用します:

html :

   <a href="javascript:void(0);" class="popover_toggle" title="View Image">View Image</a>

JavaScript :

$.fn.popover.Constructor.prototype.fixTitle = function () {return;}
$('.popover_toggle').popover({
    title: 'Login Required!',
});

参照: http://bootply.com/66591

于 2013-07-06T18:02:00.497 に答える