ホームページ > 記事 > ウェブフロントエンド > Bootstarp で折りたたみ可能なコンポーネントを作成する_JavaScript のヒント
Bootstarp で折りたたみ可能なコンポーネントを作成する_JavaScript のヒント
- WBOYオリジナル
- 2016-05-16 15:14:061267ブラウズ
この記事では、Bootstarp を使用して折りたたみ可能なコンポーネントを作成する方法を学びます。具体的な内容は次のとおりです。
必要なもの
jquery.js と bootstrap-collapse.js を参照する必要があります。どちらの JavaScript ファイルも docs/assets/js フォルダーにあります。
大量の JavaScript を記述したり、JavaScript を呼び出したりしなくても、折りたたみ可能なコンポーネントを作成できます。
例
最初の例は、JavaScript を呼び出さずに折りたたみ可能なコンポーネントを作成する方法を示しています。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>collapsible example</title>
<link href="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container-fluid">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Click me to exapand. Click me again to collapse. Part I.
</a>
</div>
<div id="collapseOne" class="accordion-body collapse" style="height: 0px; ">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Click me to exapand. Click me again to collapse. Part II.
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
Click me to exapand. Click me again to collapse. Part III.
</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
</body>
</html>
説明
ここで注意すべき点は 3 つあります。まず、クリックしてコンポーネントを展開または折りたたむリンクに data-toggle="collapse" を追加します。
次に、子コンポーネントの ID を値とする href または data-target 属性を親コンポーネントに追加します。
3 番目に、data-parent 属性を追加してアコーディオン効果を作成します。 data-parent 属性の値は、メイン コンテナ div (アコーディオン コンポーネント全体を保持する) の id 属性の値と同じです。アコーディオンほど複雑にする必要がない単純なアコーディオン コンポーネントを作成する場合は、このプロパティを追加する必要はありません。
例
2 番目の例は、単純な折りたたみ可能なコンポーネントを作成する方法を示しています。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>collapsible via JavaScript example</title> <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="myCollapsibleExample"><a href="#demo" data-toggle="collapse">Click me to expand and click me again to collapse.</a></div> <div id="demo" class="collapse"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehe. </div> <script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script> <script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script> </body> </html>
JavaScript 経由で電話をかける
以下のコードを使用すると、JavaScript 経由で折りたたみをトリガーできます。
$(".collapse").collapse()
オプション、メソッド、イベント
ここでは、Bootstrap Collapsible JavaScript プラグインを通じて利用できるいくつかのオプション、メソッド、およびイベントを示します。詳細は以下の通りです。
オプション
親:値のタイプはセレクターです。デフォルト値は false です。親要素が表示されると、親要素の下にあるすべての折りたたみ可能な要素が閉じられます。
トグル:値はブール型です。デフォルト値は true です。呼び出されると、すべての折りたたみ可能な要素を切り替えます。
トグル:値はブール型です。デフォルト値は true です。呼び出されると、すべての折りたたみ可能な要素を切り替えます。
メソッド
.collapse(options): 折りたたみ可能なコンテンツをトリガーします。オプションのオプション オブジェクトを受け入れます。
.collapse('toggle'): 折りたたみ可能なページ要素を表示または非表示にします。
.collapse('show'): 折りたたみ可能なページ要素を表示します。
.collapse(hide): 折りたたみ可能なページ要素を非表示にします。
イベント
show: このイベントは、show インスタンス メソッドが呼び出された直後にトリガーされます。
表示: このイベントは、折りたたみ可能なページ要素が表示されたとき (および CSS トランジション効果が実行されたとき) にトリガーされます。
Hide: このイベントは、Hide インスタンス メソッドが呼び出された直後にトリガーされます。
hidden: このイベントは、折りたたみページ要素がユーザーに対して非表示になったとき (および CSS トランジション効果が完了したとき) にトリガーされます。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。