この記事では、主にJavaScriptプラグイン - 折りたたみについて学びます。
1。遷移効果
遷移効果について
単純な遷移効果については、Transition.jsとその他のJSファイルを一緒に導入するだけです。コンパイルされた（または圧縮された）bootstrap.jsファイルを使用している場合、個別に導入する必要はありません。
内容
Transition.jsは、TransitionEndイベントの基本ヘルパーであり、CSS遷移効果のシミュレーションでもあります。他のプラグインが使用して、現在のブラウザがCSS遷移効果をサポートしているかどうかを検出します。
2。折りたたみ
アクロンドやナビゲーションなどの折りたたみ機能をサポートするコンポーネントの基本的なスタイルと柔軟なサポートを提供します。
プラグインの依存関係
崩壊プラグインは、トランジションエフェクトプラグインに依存します。
場合
折り畳みプラグインを使用して、パネルコンポーネントを拡張することにより、単純なAcronコンポーネントが構築されます。
最初に効果を見てみましょう。
次に、コードの実装を見てみましょう。
<div style = "マージントップ：140px;"> <div id = "arcosion"> <div> <div> <h4> <h4> <h4> <h4> <h4> <h4> <h4> <h4> "collapse" data-toggle = "collapse" data-parent = "＃auction" href = "＃collapseone">崩壊可能なグループアイテム</a> Reprehenderit、Enim eiusmod High Life Accusamus Terry Richardson Ad Squid。 3ウルフムーンオフィシャル、非キューピダットスケートボードドロールブランチ。フードトラックキノアネスシュントラボムエイウスモッド。ブランチ3ウルフムーンタイム、サントアリケは、イカのシングルオリジンコーヒーnulla arisenda shoreditch et。 Nihil Anim Keffiyeh Helvetica、クラフトビール労働ウェスアンダーソンの信用nesciunt Sapiente ea Proident。 Ad Veganを除いて、Butcher Vice Lomo。レギンスは、クラフトビール農場からテーブルへ、生のデニムの美的シンセのnesciuntあなたがおそらくそれらを聞いたことがないことを聞いたことがないでしょう。 </div> </div> </div> <div> <h4> <a data-toggle = "collapse" data-toggle = "data-parent ="＃accordion "href ="＃collapsetwo ">折りたたみ系グループアイテム＃2 </a> </h4> </div> <div> dive rifrereche edriim eismod広告イカ。 3ウルフムーンオフィシャル、非キューピダタットスケートボードドロールブランチ。フードトラックキノアネスシュントラボムエイウスモッド。ブランチ3ウルフムーンタイム、サントアリケは、イカのシングルオリジンコーヒーnulla arisenda shoreditch et。 Nihil Anim Keffiyeh Helvetica、クラフトビール労働ウェスアンダーソンの信用nesciunt Sapiente ea Proident。 Ad Veganを除いて、Butcher Vice Lomo。レギンスは、クラフトビール農場からテーブルへ、生のデニムの美的シンセのnesciuntあなたがおそらくそれらを聞いたことがないことを聞いたことがないでしょう。 </div> </div> </div> <div> <h4> <a data-toggle = "collapse" data-toggle = "collapse data-parent ="＃accordion "href ="＃collapsibleグループアイテム＃3 </a> </h4> </divedere Accusamus Terry Richardson Ad Squid。 3 Wolf Moonの公式オーテ、非キューピダタットスケートボードDolor Brunch。フードトラックキノアネスシュントラボムエイウスモッド。ブランチ3ウルフムーンタイム、サントアリケは、イカのシングルオリジンコーヒーnulla arisenda shoreditch et。 Nihil Anim Keffiyeh Helvetica、クラフトビール労働ウェスアンダーソンの信用nesciunt Sapiente ea Proident。 Ad Veganを除いて、Butcher Vice Lomo。レギンスOccucaecat Craft Beer Farm-to-Table、Raw Denim Aesthetic Synth Nesciuntあなたはおそらく聞いたことがないことを聞いたことがないでしょう。 </div> </div> </div> </div> </div> </div>
ステップ1：最初に、パネルグループの最も外側の層には、以下のいくつかのグループが含まれています。
ステップ2：いくつかの簡単なグループをご覧ください
<div> <h4> <a data-toggle = "collapse" data-toggle = "collapse" data-parent = "＃accordion" href = "＃collapsone"> collapsibleグループアイテム＃1 </a> </h4> </div div id = "collapsone"> <div> div> div> div> div> div>
パネルの構造は、コードを通して明確に見ることができます。
パネルヘッダーとパンドルボディ、およびパネルヘッダーはタイトルとリンクを含めることができます。リンク経由でパネルボディと接続します。
ステップ3：パネルグループにID = "Accordion"があることがわかり、以下の各タイトルの下にあるリンクにdata-parent = "＃accordion"があります。
削除された場合、効果は、他のリンクをクリックした後、元のパネルが再び縮小しないことです。
折り畳みの効果を別の方法で示すことができます。
<div style = "マージントップ：140px;"> <ボタンタイプ= "button" data-toggle = "collapse" data-target = "＃demo"> simple collapse </button> <div id = "demo"> ainm pariatur cliche reprehenderit、enim eismod high life acccusamus terry richardson ad squid。 3 Wolf Moonの公式オーテ、非キューピダットスケートボードDolor Brunch。フードトラックキノアネスシュントラボムエイウスモッド。ブランチ3ウルフムーンタイム、サントアリケは、イカのシングルオリジンコーヒーnulla arisenda shoreditch et。 Nihil Anim Keffiyeh Helvetica、クラフトビール労働ウェスアンダーソンの信用nesciunt Sapiente ea Proident。 Ad Veganを除いて、Butcher Vice Lomo。レギンスは、クラフトビール農場からテーブルへ、生のデニム美学のnesciuntあなたが聞いたことがないと聞いたことがありません。
使用法
フォールドプラグインは、いくつかの簡単なクラスを通じてスタイルを制御します
.Collapse Hide Content
ショーコンテンツのコルプス
.Collapsesing。遷移が開始されると追加され、終了したときに削除されたことは、おそらく折りたたみが追加された後に遷移効果が利用可能になることを意味し、それが削除された場合、それは終了します。
データ属性を介して
Data-Toggle = "collapse"を追加してページ要素にデータターゲットを追加するだけで、折りたたみ可能なページ要素を制御する機能が得られます。データターゲットプロパティは、CSSセレクターを制御オブジェクトとして受け入れます。崩壊したページ要素に崩壊クラスを追加してください。崩壊したページ要素のデフォルトの状態を展開する場合は、クラスを追加します。
折りたたみ可能なページ要素のセットにコントローラーを追加するには、data-parent = "＃selector"を追加します。上記の例を参照してください。
JavaScript経由
<ボタンタイプ= "button" onclick = "open（）"> open </button> <button type = "button" onclick = "hide（）"> fold </button> <div id = "demo"> anim pariatur cliche reprehenderit、enim eiusmod high life accusamus terry richardson ad squid。 3 Wolf Moonの公式オーテ、非キューピダットスケートボードDolor Brunch。フードトラックキノアネスシュントラボムエイウスモッド。ブランチ3ウルフムーンタイム、サントアリケは、イカのシングルオリジンコーヒーnulla arisenda shoreditch et。 Nihil Anim Keffiyeh Helvetica、クラフトビール労働ウェスアンダーソンの信用nesciunt Sapiente ea Proident。 Ad Veganを除いて、Butcher Vice Lomo。レギンスoccucaecatクラフトビール農場からテーブルへ、生のデニム美的シンセのnesciuntあなたはおそらく聞いたことがありません。
<script type = "text/javascript"> $（function（）{$（ "＃demo"）。collapse（{toggle：false}）}）function open（）{$（ "＃demo"）。collapse（ "show"）; } function hide（）{$（ "＃demo"）。collapse（ "hide"）; } </script>上記の効果を見てください
方法
ページ要素に折りたたみ可能な関数を与えます。オプションのオブジェクトを引数として受け入れます。
$（ "＃demo"）。collapse（{toggle：false}）
このようにして、初期化されると要素が拡張されます。
1。崩壊（ 'トグル'）折りたたみ可能なページ要素を表示または隠します。
2.コルプス（ 'show'）折りたたみ可能なページ要素が表示されます。
3.コルプス（ 'hide'）は、折りたたみ可能なページ要素を隠します。
イベント
ブートストラップの崩壊したプラグインは、聴くことができる一連のイベントを公開します。
これにより、隠されたイベントが要素に結合します。
まだ詳細に学びたい場合は、ここをクリックして2つのエキサイティングなトピックを学び、添付できます。BootstrapLearning Tutorial Bootstrap Practical Tutorial
上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。