JS コンポーネントブートストラップはドロップダウンメニュー効果 code_javascript スキルを実装します-jsチュートリアル-php.cn

JS コンポーネントブートストラップはドロップダウンメニュー効果 code_javascript スキルを実装します

WBOY

リリース： 2016-05-16 15:03:39

オリジナル

1605 人が閲覧しました

ブートストラップドロップダウンメニュー この章ではドロップダウンメニューについて説明しますが、対話部分は含まれません。この章では、ドロップダウンメニューの対話について詳しく説明します。 Dropdown プラグインを使用すると、任意のコンポーネント (ナビゲーションバー、タブページ、カプセルナビゲーションメニュー、ボタンなど) にドロップダウンメニューを追加できます。

このプラグインの機能を個別に参照したい場合は、dropdown.js を参照する必要があります。あるいは、ブートストラッププラグインの概要の章で説明したように、bootstrap.js または bootstrap.min.js の縮小バージョンを参照することもできます。

1. 使用方法
ドロップダウンプラグインの非表示コンテンツを切り替えることができます:

1. 以下に示すように、data-toggle="dropdown" をリンクまたはボタンに追加して、ドロップダウンメニューを切り替えます。

<div class="dropdown">
 <a data-toggle="dropdown" href="#">下拉菜单（Dropdown）触发器</a>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  ...
 </ul>
</div>

ログイン後にコピー

リンクをそのまま維持する必要がある場合 (ブラウザで JavaScript が有効になっていない場合に便利です)、href="#" の代わりに data-target 属性を使用します。

<div class="dropdown">
 <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
  下拉菜单（Dropdown） <span class="caret"></span>
 </a>
 
 
 <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  ...
 </ul>
</div>

ログイン後にコピー

2. JavaScript 経由: JavaScript 経由でドロップダウンメニューの切り替えを呼び出すには、次のメソッドを使用してください:

$('.dropdown-toggle').dropdown()

2. ドロップダウンメニューの簡単な例
通常の使用では、コードはコンポーネントメソッドと同じです:

//声明式用法

<div class="dropdown">
  <button class="btn btn-primary" data-toggle="dropdown">
     下拉菜单
     <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>

ログイン後にコピー

宣言的使用法の主要なコア:

1. class="dropdown" を使用して周辺コンテナをラップします。
2. 内部クリックボタンイベントバインディング data-toggle="dropdown"; 3. メニュー要素には class="dropdown-menu" を使用します。

//如果按钮在容器外部，可以通过 data-target 进行绑定。

<button class="btn btn-primary" id="btn" data-toggle="dropdown"
data-target="#dropdown">
在 JavaScript 调用中，没有属性，方法并不好用，下面介绍四个基本事件。
//下拉菜单方法，但仍然需要 data-*

$('#btn').dropdown();
$('#btn').dropdown('toggle');

ログイン後にコピー

ドロップダウンメニューは、ポップアップ前、ポップアップ後、閉じる前、閉じた後の 4 種類のイベントをサポートしています。

//事件，其他雷同

$('#dropdown').on('show.bs.dropdown', function() {
  alert('在调用 show 方法时立即触发！');
});

ログイン後にコピー

3. タブページのドロップダウンメニューの使用法

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例 - 带有下拉菜单的标签页</title>
  <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <script src="/scripts/jquery.min.js"></script>
  <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
 
<p>带有下拉菜单的标签页</p>
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li class="dropdown">
   <a class="dropdown-toggle" data-toggle="dropdown" href="#">
     Java <span class="caret"></span>
   </a>
   <ul class="dropdown-menu">
     <li><a href="#">Swing</a></li>
     <li><a href="#">jMeter</a></li>
     <li><a href="#">EJB</a></li>
     <li class="divider"></li>
     <li><a href="#">分离的链接</a></li>
   </ul>
  </li>
  <li><a href="#">PHP</a></li>
</ul>
 
</body>
</html>

ログイン後にコピー

レンダリング:

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。