Bootstrap-collapse-plugin

提供：Dev Guides
移動先:案内、検索

ブートストラップ-折りたたみプラグイン

折りたたみプラグインを使用すると、ページの分割を簡単に作成できます。 それを使用してアコーディオンナビゲーションまたはコンテンツボックスを構築するかどうかにかかわらず、多くのコンテンツオプションを使用できます。

'_このプラグイン機能を個別に含める場合は、 collapse.js が必要です。 これには、リンク：/bootstrap/bootstrap_transition_plugin [Transition Plugin]をお使いのバージョンのBootstrapに含める必要もあります。 または、リンク：/bootstrap/bootstrap_plugins_overview [Bootstrap Plugins Overview]で説明されているように、_bootstrap.js_または縮小された_bootstrap.min.js_を含めることができます。_

あなたは崩壊プラグインを使用することができます-

  • 折りたたみ可能なグループまたはアコーディオンを作成するには。 これは、以下のサンプル例のように作成できます-
<div class = "panel-group" id = "accordion">
   <div class = "panel panel-default">

      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne">
               Click me to expand. Click me again to collapse.Section 1
            </a>
         </h4>
      </div>

      <div id = "collapseOne" class = "panel-collapse collapse in">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
               nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>

   </div>

   <div class = "panel panel-default">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo">
               Click me to expand. Click me again to collapse.Section 2
            </a>
         </h4>
      </div>

      <div id = "collapseTwo" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>

   </div>

   <div class = "panel panel-default">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree">
               Click me to expand. Click me again to collapse.Section 3
            </a>
         </h4>
      </div>

      <div id = "collapseThree" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>

   </div>
</div>
  • data-toggle = "collapse" は、リンクをクリックしてコンポーネントを展開または折りたたみます。
  • href または data-target 属性が親コンポーネントに追加され、その値は子コンポーネントの_id_です。
  • data-parent 属性は、アコーディオンのような効果を作成するために追加されます。
  • アコーディオンマークアップなしでシンプルな折りたたみ可能を作成するために
<button type = "button" class = "btn btn-primary" data-toggle = "collapse" data-target = "#demo">
   simple collapsible
</button>

<div id = "demo" class = "collapse in">
   Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
      sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>

例でわかるように、アコーディオンとは異なり、単純な折りたたみ可能なコンポーネントを作成しましたが、属性 data-parent は追加していません。

使用法

次の表は、崩壊プラグインが重荷を処理するために利用するクラスを示しています-

Sr.No. Class &Description
1

.collapse

コンテンツを非表示にします。

2

.collapse.in

コンテンツを表示します。

3

.collapsing

移行の開始時に追加され、終了時に削除されます。

折りたたみプラグインは2つの方法で使用できます-

  • データ属性を介して-折りたたみ可能な要素の制御を自動的に割り当てるために、要素に data-toggle = "collapse" および data-target を追加します。 data-target 属性は、折りたたみを適用するCSSセレクターを受け入れます。 折りたたみ可能な要素にクラス .collapse を追加してください。 デフォルトで開きたい場合は、追加のクラス .in を含めます。 +アコーディオンのようなグループ管理を折りたたみ可能なコントロールに追加するには、データ属性 data-parent = "#selector" を追加します。
  • Via JavaScript -折りたたみメソッドは、以下に示すようにJavaScriptで有効にできます-
$('.collapse').collapse()

オプション

データ属性またはJavaScriptを介して渡すことができる特定のオプションがあり、次の表にリストされています-

Option Name Type/Default Value Data attribute name Description
parent selector Default − false data-parent If selector is false, then all collapsible elements under the specified parent will be closed (similar to traditional accordion behavior - this dependent on the accordion-group class).
toggle boolean Default − true data-toggle Toggles the collapsible element on invocation.

方法

以下は、折りたたみ可能な要素で使用される便利なメソッドのリストです。

Method Description Example
Options − .collapse(options) Activates your content as a collapsible element. Accepts an optional options object. 
$('#identifier').collapse({
   toggle: false
})
Toggle − .collapse('toggle') Toggles a collapsible element to shown or hidden. 
$('#identifier').collapse('toggle')
Show − .collapse('show') Shows a collapsible element. 
$('#identifier').collapse('show')
Hide − .collapse('hide') Hides a collapsible element. 
$('#identifier').collapse('hide')

例

次の例は、メソッドの使用法を示しています- 

<div class = "panel-group" id = "accordion">
   <div class = "panel panel-default">

      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne">
               Click me to expand. Click me again to collapse. Section 1--hide method
            </a>
         </h4>
      </div>

      <div id = "collapseOne" class = "panel-collapse collapse in">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>

   </div>

   <div class = "panel panel-success">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo">
               Click me to expand. Click me again to collapse. Section 2--show method
            </a>
         </h4>
      </div>

      <div id = "collapseTwo" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>

   </div>

   <div class = "panel panel-info">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree">
               Click me to expand. Click me again to collapse. Section 3--toggle method
            </a>
         </h4>
      </div>

      <div id = "collapseThree" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
   </div>

   <div class = "panel panel-warning">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseFour">
               Click me to expand. Click me again to collapse. Section 4--options method
            </a>
         </h4>
      </div>

      <div id = "collapseFour" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>

   </div>
</div>

<script type = "text/javascript">
   $(function () { $('#collapseFour').collapse({
      toggle: false
   })});

   $(function () { $('#collapseTwo').collapse('show')});
   $(function () { $('#collapseThree').collapse('toggle')});
   $(function () { $('#collapseOne').collapse('hide')});
</script>

イベント

次の表に、折りたたみ機能で使用できるいくつかのイベントを示します。

Event Description Example
show.bs.collapse Fired after the show method is called. 
$('#identifier').on('show.bs.collapse', function () {
  //do something
})
shown.bs.collapse This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete). 
$('#identifier').on('shown.bs.collapse', function () {
  //do something
})
hide.bs.collapse Fired when the hide instance method has been called. 
$('#identifier').on('hide.bs.collapse', function () {
  //do something
})
hidden.bs.collapse This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete). 
$('#identifier').on('hidden.bs.collapse', function () {
  //do something
})

例

次の例は、イベントの使用法を示しています- 

<div class = "panel-group" id = "accordion">
   <div class = "panel panel-info">

      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseexample">
               Click me to expand. Click me again to collapse. Section --shown event
            </a>
         </h4>
      </div>

      <div id = "collapseexample" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>

   </div>
</div>

<script type = "text/javascript">
   $(function () {
      $('#collapseexample').on('show.bs.collapse', function () {
         alert('Hey, this alert shows up when you expand it');
      })
   });
</script>
「https://www.finddevguides.com/index.php?title=Bootstrap-collapse-plugin&oldid=7306」から取得
Powered by MediaWiki