جلسه چهل و دوم از دوره آموزش Bootstrap : پلاگین Collapse

پلاگین Collapse

پلاگین های بوت استرپ

پلاگین collapse باعث ایجاد راحت تر تقسیمات collapse در صفحه می شود. این که آیا ما از آن برای ساخت accordion navigation استفاده می کنیم یا برای ایجاد کادرهای متن (text box) فرقی نمی کند ، در هر صورت این پلاگین آپشن های محتوایی بسیاری را در اختیار ما قرار می دهد.

اگر بخواهیم که این پلاگین را به صورت جداگانه وارد کنیم ، در این صورت به فایل collapse.js نیاز خواهیم داشت. در غیر این صورت ،  همان طور که در مقاله "مروری بر پلاگین های بوت استرپ" ذکر شد ، می توانیم از یکی از فایل های bootstrap.js یا bootstrap min.js.min.js استفاده نماییم.

نحوه کاربرد

ما می توانیم پلاگین collapse را در موارد زیر استفاده نماییم :

• برای ایجاد گروه های قابل collapse یا accordion . این کار را می توانیم همانند مثال زیر انجام دهیم :

<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 برای ایجاد accordion مانند افکت اضافه می شود.

خروجی قطعه کد فوق به صورت زیر می باشد :

برای ایجاد collapse ساده بدون نشانه گذاری accordion : این کار را می توانیم مطابق مثال زیر انجام دهیم :

<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>

همان طور که در مثال فوق مشاهده می کنیم ، ما یک مؤلفه قابل collapse ساده ایجاد کردیم ، بر خلاف accordion ، ما ویژگی data-parent را اضافه نکردیم.

خروجی قطعه کد فوق به صورت زیر می باشد :

کاربرد

جدول زیر فهرستی از کلاس هایی که پلاگین collapse از آنها برای هندل کردن اقدامات استفاده می نماید ، آورده شده است.

ما می توانیم به دو روش زیر پلاگین collapse را استفاده نماییم :

• از طریق ویژگی های داده : مقدار "data-toggle = "collapse  و یک data-target را به عنصر اضافه می کنیم تا به طور خودکار کنترل را به یک عنصر قابل collapse اختصاص دهد. ویژگی data-target یک CSS selector را برای اعمال collapse قبول خواهد کرد. از افزودن کلاس .collapse به عنصر قابل collapse اطمینان حاصل می کنیم. اگر بخواهیم آن را به طور پیش فرض باز کنیم ، کلاس اضافی .in را نیز وارد می کنیم.

برای افزودن مدیریت گروه accoridion به یک کنترل collapse ، ویژگی داده "data-parent = “#selector را اضافه می کنیم.

• از طریق جاوا اسکریپت : متد collapse می تواند با جاوا اسکریپت به ترتیبی که در زیر نشان داده شده است ، فعال شود.

$('.collapse').collapse()

آپشن ها

آپشن های مشخصی وجود دارند که می توانند از طریق جاوا اسکریپت با ویژگی داده انتقال داده شوند. فهرست این آپشن ها در جدول زیر ارائه شده است :

متدها

در ادامه برخی از متدای کاربردی که با عناصر قابل collapse کار می کنند ، آورده شده است :

$('#identifier').collapse({

   toggle: false

})

$('#identifier').collapse('toggle')

$('#identifier').collapse('show')

$('#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>  

خروجی قطعه کد فوق به صورت زیر می باشد :

رویدادها

در  جدول زیر فهرستی از رویدادهایی که می توانند با قابلیت collapse مورد استفاده قرار گیرند ، آورده شده است :

$('#identifier').on('show.bs.collapse', function () {

   // do something

})

$('#identifier').on('shown.bs.collapse', function () {

   // do something

})

$('#identifier').on('hide.bs.collapse', function () {

   // do something

})

$('#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> 

خروجی قطعه کد فوق به صورت زیر می باشد :