back
Bootstrapの入力コンポーネント (3/6)
■ドロップダウンについて
ボタンをクリックするとメニューがプルダウンする、というインターフェイスは、アプリケーションでよく使われていますね。HTMLの場合、<select>を使い、１行だけ表示させれば似たようなものが作れます。が、<select>はあくまで複数の中から項目を選ぶためのものです。一般的なメニューのように、何かを実行させたりする使い方はしません（JavaScriptを書いて対応させることはできますが……）。
こうした、「クリックするとメニューが現れ、選ぶと何か実行する」というインターフェイスを簡単に作成できるのが、Bootstrapの「ドロップダウン」です。これは、以下のような形で記述します。
けっこう複雑そうに見えますが、<div class="dropdown">タグの中に、ボタンのタグと、表示されるメニューの内容となる<ul>タグが用意されているのがわかるでしょう。ざっと各タグを整理しておきましょう。
・ドロップダウンのタグ
・ボタンのタグ
ただし、よく見ると<button>タグの中に、<span class="caret"></span>というタグが追加されていることに気がつくでしょう。これは何かというと、ボタン名の最後に付ける▼を表示するためのものなのです。まぁ、なくともドロップダウンの動作には支障はありません。
・メニューの<ul>タグ
・メニュー項目の<li>タグ
<ul>タグ内に用意する、メニューの項目は<li>タグを使って用意します。このタグには、role="presentation"という属性を追加しておきます。
この<li>タグ内に用意するメニュー項目のテキストは、<a>タグを使って記述します。これを忘れると、メニューが選択できなくなってしまいます。
では、実際の利用例を下に掲載しておきましょう。「Number」というボタンを表示し、これをクリックすると３つのメニュー項目がドロップダウンして現れます。
こうした、「クリックするとメニューが現れ、選ぶと何か実行する」というインターフェイスを簡単に作成できるのが、Bootstrapの「ドロップダウン」です。これは、以下のような形で記述します。
<div class="dropdown">
<button class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
ボタンの表示テキスト
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li role="presentation">
<a href="#">メニュー項目</a>
</li>
……<li>でメニュー項目を用意……
</ul>
</div>
けっこう複雑そうに見えますが、<div class="dropdown">タグの中に、ボタンのタグと、表示されるメニューの内容となる<ul>タグが用意されているのがわかるでしょう。ざっと各タグを整理しておきましょう。
・ドロップダウンのタグ
<div class="dropdown">一番外側にある、ベースとなるタグですね。これは、dropdownをクラスに指定しておきます。
・ボタンのタグ
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">ボタンの表示部分となるタグです。これは、けっこうややこしいです。まず、class属性に、表示するボタンに関するクラスと、「dropdown-toggle」というクラスを用意します。そして、data-toggle="dropdown"という属性を追加します。これでボタンの用意は完了です。
ただし、よく見ると<button>タグの中に、<span class="caret"></span>というタグが追加されていることに気がつくでしょう。これは何かというと、ボタン名の最後に付ける▼を表示するためのものなのです。まぁ、なくともドロップダウンの動作には支障はありません。
・メニューの<ul>タグ
<ul class="dropdown-menu" role="menu">表示するメニューは、<ul>タグを使ったリストとして用意をします。この<ul>タグには、「dropdown-menu」というクラスを設定しておきます。それに加え、role="menu"という属性を用意しておきます。
・メニュー項目の<li>タグ
<li role="presentation">
<ul>タグ内に用意する、メニューの項目は<li>タグを使って用意します。このタグには、role="presentation"という属性を追加しておきます。
この<li>タグ内に用意するメニュー項目のテキストは、<a>タグを使って記述します。これを忘れると、メニューが選択できなくなってしまいます。
では、実際の利用例を下に掲載しておきましょう。「Number」というボタンを表示し、これをクリックすると３つのメニュー項目がドロップダウンして現れます。
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap</title> <script src="./js/jquery-3.1.1.min.js"></script> <script src="./js/bootstrap.min.js"></script> <link rel="stylesheet" href="./css/bootstrap.min.css"> <link rel="stylesheet" href="./css/bootstrap-theme.min.css"> </head> <body > <div class="container"> <div class="row"> <div class="col-md-12"> <div class="page-header"> <h1>コンテンツの表示</h1> <h2 >dropdown</h2> </div> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Number <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li role="presentation"> <a href="#">One</a> </li> <li role="presentation"> <a href="#">Two</a> </li> <li role="presentation"> <a href="#">Three</a> </li> </ul> </div> </div> </div> </div> </body> </html>
| << 前へ | 次へ >> |