ホームページ > 記事 > ウェブフロントエンド > Bootstrap のポップアップについて詳しく見る
Bootstrap のポップアップについて詳しく見る
- 青灯夜游転載
- 2021-04-15 11:14:052037ブラウズ
この記事では、Bootstrap のポップアップ ボックスについて詳しく説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。
表面的には、ポップアップ ボックスは実際には追加のタイトルが付いた特別なプロンプト ボックスです。しかし、実際には違いがあります。
基本的な使用法
ツールチップを作成するときは、
したがって、最も基本的な使用法は次のとおりです
1. title 属性の値を通じてタイトルを定義します (また、カスタム属性 src-title を使用してタイトルを設定します)、タイトルの優先順位は高くなります
2. data-content 属性を通じてコンテンツを設定します
3. data-toggle="popover" を設定します
4. 次の JS コードを使用して、
$('[data-toggle="popover"]').popover();
<button>点我弹出/隐藏弹出框</button>
<script>
$(function(){
$('[data-toggle="popover"]').popover();
});
</script>
属性パラメータ
ポップを作成するとき、アップボックスでは、HTML で定義できます。テーブル
#[Note]data-palcement にリストされているカスタム属性は、デフォルトでは上部ではなく右側に表示されます
<body style="max-width:90%">
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="标题" data-content="上侧" >上侧</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="bottom" title="标题" data-content="下侧" >下侧</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="无动画" data-animation="false" >无动画</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="有动画" >有动画</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="hover触发" data-trigger="hover">hover触发</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="click触发" data-trigger="click">click触发</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="不延迟">不延迟</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="延迟500ms" data-delay="500">延迟500ms</button>
<script>
$(function(){
$('[data-toggle="popover"]').popover();
});
</script>
JS トリガー
ポップオーバーの JS の使用法はツールチップの使用法と同じであり、オプション オブジェクト メソッドの使用をサポートしています。 Popover() メソッドにパラメータを渡します
$(element).popover(options);
options オブジェクト内のパラメータには、アニメーション、HTML、配置、セレクター、オリジナルタイトル、タイトル、トリガー、遅延、コンテナ、テンプレート
詳細が含まれますここに移動
<body style="margin-top:50px">
<button type="button" class="btn btn-default" data-toggle="popover" >按钮</button>
<script>
$(function(){
$('[data-toggle="popover"]').popover({
title:"我是标题",
content:'我是内容'
});
});
</script>
【キーワード】
options オブジェクトの使用に加えて、次のこともできます。キーワード「表示」、「非表示」、「切り替え」、「破棄」を使用します。
<body style="margin-top:100px;">
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="标题" data-content="内容" id="btn1">按钮1</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="标题" data-content="内容" id="btn2">按钮2</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="标题" data-content="内容" id="btn3">按钮3</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="标题" data-content="内容" id="btn4">按钮4</button>
<script>
$(function(){
$('#btn1').popover('show');//显示弹出框
$('#btn2').popover('hide');//关闭弹出框
$('#btn3').popover('toggle');//反转弹出框
$('#btn4').popover('destroy');//隐藏并销毁弹出框
});
</script>
[イベント]
これプラグインは 5 種類のイベント サブスクリプションをサポートしています
show.bs.tooltip show方法调用之后立即触发该事件 shown.bs.tooltip 此事件在tooltip已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发 hide.bs.tooltip hide方法调用之后立即触发该事件。 hidden.bs.tooltip 此事件在tooltip被隐藏（并且同时在 CSS 过渡效果完成）之后被触发 inserted.bs.tooltip 当tooltip模板加载到DOM中上时，在show.bs.tooltip触发后，触发该事件
<body style="margin-top:50px;">
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" title="标题" data-content="内容" id="btn">按钮</button>
<script>
$(function(){
$('#btn').popover();
$("#btn").on("show.bs.popover",function(e){
$(this).html('关闭');
}).on("hide.bs.popover",function(e){
$(this).html('打开');
})
});
</script>
プロンプト ボックスを比較してください
1. プロンプトのデフォルトのトリガー イベントボックスのツールチップはホバーとフォーカスですが、ポップアップ ボックスのポップオーバーはクリック
2です。プロンプト ボックスのツールチップにはコンテンツ (タイトル) が 1 つだけありますが、ポップアップ ボックスはタイトル (タイトル) を設定するだけではありません。 ) だけでなく、コンテンツ (コンテンツ)
3. プロンプト ボックスのツールチップはデフォルトで上部に表示されますが、ポップアップ ボックスのポップオーバーはデフォルトで右側に表示されます。 4. さまざまな表示テンプレート
プロンプト ボックス ツールチップのテンプレート:
<div> <div></div> <div></div> </div>
ポップアップ ボックスのテンプレート:
<div> <div></div> <h3></h3> <div></div> </div>
プログラミング関連の知識の詳細については、こちらをご覧ください:
プログラミング教育# ＃＃！ ！以上がBootstrap のポップアップについて詳しく見るの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。