検索

ホームページ  >  記事  >  ウェブフロントエンド  >  Bootstrap のポップアップについて詳しく見る

Bootstrap のポップアップについて詳しく見る

青灯夜游
青灯夜游転載
2021-04-15 11:14:052059ブラウズ

この記事では、Bootstrap のポップアップ ボックスについて詳しく説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Bootstrap のポップアップについて詳しく見る

表面的には、ポップアップ ボックスは実際には追加のタイトルが付いた特別なプロンプト ボックスです。しかし、実際には違いがあります。

基本的な使用法

ツールチップを作成するときは、

したがって、最も基本的な使用法は次のとおりです

1. title 属性の値を通じてタイトルを定義します (また、カスタム属性 src-title を使用してタイトルを設定します)、タイトルの優先順位は高くなります

2. data-content 属性を通じてコン​​テンツを設定します

3. data-toggle="popover" を設定します

4. 次の JS コードを使用して、

$('[data-toggle="popover"]').popover();
<button>点我弹出/隐藏弹出框</button>
<script>
$(function(){
    $(&#39;[data-toggle="popover"]&#39;).popover();

});    
</script>

Bootstrap のポップアップについて詳しく見る

属性パラメータ

ポップを作成するとき、アップボックスでは、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(){
    $(&#39;[data-toggle="popover"]&#39;).popover();

});    
</script>

Bootstrap のポップアップについて詳しく見る

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(){
    $(&#39;[data-toggle="popover"]&#39;).popover({
        title:"我是标题",
        content:&#39;我是内容&#39;
    });
});    
</script>

Bootstrap のポップアップについて詳しく見る

【キーワード】

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(){
    $(&#39;#btn1&#39;).popover(&#39;show&#39;);//显示弹出框
    $(&#39;#btn2&#39;).popover(&#39;hide&#39;);//关闭弹出框
    $(&#39;#btn3&#39;).popover(&#39;toggle&#39;);//反转弹出框
    $(&#39;#btn4&#39;).popover(&#39;destroy&#39;);//隐藏并销毁弹出框
});    
</script>

Bootstrap のポップアップについて詳しく見る

[イベント]

これプラグインは 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(){
    $(&#39;#btn&#39;).popover();
    $("#btn").on("show.bs.popover",function(e){
        $(this).html(&#39;关闭&#39;);    
    }).on("hide.bs.popover",function(e){
        $(this).html(&#39;打开&#39;);
    })

});    
</script>

Bootstrap のポップアップについて詳しく見る

プロンプト ボックスを比較してください

1. プロンプトのデフォルトのトリガー イベントボックスのツールチップはホバーとフォーカスですが、ポップアップ ボックスのポップオーバーはクリック

2です。プロンプト ボックスのツールチップにはコンテンツ (タイトル) が 1 つだけありますが、ポップアップ ボックスはタイトル (タイトル) を設定するだけではありません。 ) だけでなく、コンテンツ (コンテンツ)

3. プロンプト ボックスのツールチップはデフォルトで上部に表示されますが、ポップアップ ボックスのポップオーバーはデフォルトで右側に表示されます。 4. さまざまな表示テンプレート

プロンプト ボックス ツールチップのテンプレート:

<div>
    <div></div>
    <div></div>
</div>

ポップアップ ボックスのテンプレート:

<div>
    <div></div>
    <h3></h3>
    <div></div>
</div>

プログラミング関連の知識の詳細については、こちらをご覧ください:

プログラミング教育# ＃＃！ ！

以上がBootstrap のポップアップについて詳しく見るの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事はcnblogs.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
前の記事：Bootstrap の情報プロンプト ボックスの詳細な説明次の記事：Bootstrap の情報プロンプト ボックスの詳細な説明

関連記事

続きを見る