ブートストラップでポップアップメニューを定義する方法

一部のメニューはポップアップする必要があります。たとえば、メニューはページの下部にありますが、このメニューにはたまたまドロップダウン メニューがあります。ユーザーのエクスペリエンスを向上させるために、ドロップダウン メニューにはポップアップします。 Bootstrap フレームワークでは、この効果のためにクラス名「dropup」が特別に提案されています。使用方法は先ほど示した通りで、「btn-group」にこのクラス名を追加するだけです（もちろん通常のポップアップ・ドロップダウンメニューであれば「dropup」のクラス名を追加するだけです） 「ドロップダウン」クラス名に))。

ブートストラップ ドロップダウン メニューがインテリジェントに上下にポップアップ表示されます

1. 要件:

追加することでブートストラップ ドロップダウン メニューへ ドロップダウンまたはドロップアップ スタイル クラスは、メニューのポップアップまたはポップアップを実現できます。動的ページでは、通常、テーブル要素が動的に生成され、ドロップダウン メニューが下にポップアップ表示されます。ポップアップメニューの下部がブロックされている（完全に表示できない）場合にポップアップを実現するにはどうすればよいですか？

2. 実装アイデア:

画面下からのクリックボタンの高さとポップアップメニューの高さを取得します。完全に表示されるようにするには、ポップアップさせます。

3. 実装プロセス:

bootstrap.js の toggle 属性を変更することで、クリック時にポップアップが実際の状況に応じてポップアップまたはポップアップ表示されます。実装は次のとおりです:

4. テスト ページ コードの一部:

①: js の導入:

<script type="text/javascript" src="../assets/js/jquery.js"></script>
<script type="text/javascript" src="../assets/js/bootstrap.js"></script>

②: ドロップダウンメニュー レイアウト:

 <div class="btn-group" style="margin:10px auto;">
    <button type="button " class="btn btn-default btn-xs dropdown-toggle" data- 
         toggle="dropdown">
        <i class="glyphicon glyphicon-cog"></i> 
        <span class="glyphicon glyphicon-menu-down"></span>
    </button>
    <ul class="dropdown-menu  pull-right" role="menu">
        <li><a href="#">基本信息</a></li>
        <li><a href="#">查看权限</a></li>
        <li class="divider"></li>
        <li><a href="javascript:;" οnclick="edit();">修改信息</a></li>
        <li><a href="#">密码重置</a></li>
        <li class="divider"></li>
        <li><a href="#">删除</a></li>
        <li class="divider"></li>
        <li><a href="#">禁用</a></li>
    </ul>
 </div>

関連する推奨事項: 「bootstrap 入門チュートリアル 」

5. 効果

①: デフォルトの下向きポップアップ:

②: 底が塞がれているとき、ポップアップ

<div class="btn-group dropup">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button"
    >按钮下拉菜单<span class="caret"></span></button>
    <ul class="dropdown-menu">
         <li><a href="##">按钮下拉菜单项</a></li>
         <li><a href="##">按钮下拉菜单项</a></li>
         <li><a href="##">按钮下拉菜单项</a></li>
         <li><a href="##">按钮下拉菜单项</a></li>
    </ul>
</div>

以上がブートストラップでポップアップメニューを定義する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。