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

4 سال پیش

امتیاز دهید post

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

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

آموزش پلاگین collapse باعث می شود که تقسیم صفحه در حال جمع شدن آسان باشد. چه از آن برای ساخت یک ناوبری آکاردئونی و چه جعبه های محتوا استفاده کنید ، گزینه های زیادی را برای محتوا فراهم می کند.

اگر می خواهید این قابلیت پلاگین را به صورت جداگانه در آن بگنجانید ، شما به shemb.js نیاز خواهید داشت. این همچنین به پلاگین Transition نیاز دارد تا در نسخه بوت استرپ شما موجود باشد. در غیر این صورت، همانطور که در درس بررسی اجمالی پلاگین های بوت استرپ ذکر شده است ، می توانید bootstrap.js یا minst bootstrap.min.js را در آن قرار دهید.
می توانید از افزونه سقوط استفاده کنید –

برای ایجاد گروه های جمع شونده یا آکاردئون. این را می توان مانند مثال زیر ایجاد کرد –

&lt;div class = "panel-group" id = "accordion"&gt;
   &lt;div class = "panel panel-default"&gt;
      
      &lt;div class = "panel-heading"&gt;
         &lt;h4 class = "panel-title"&gt;
            &lt;a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne"&gt;
               Click me to expand. Click me again to collapse.Section 1
            &lt;/a&gt;
         &lt;/h4&gt;
      &lt;/div&gt;
      
      &lt;div id = "collapseOne" class = "panel-collapse collapse in"&gt;
         &lt;div class = "panel-body"&gt;
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
               nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         &lt;/div&gt;
      &lt;/div&gt;
      
   &lt;/div&gt;
   
   &lt;div class = "panel panel-default"&gt;
      &lt;div class = "panel-heading"&gt;
         &lt;h4 class = "panel-title"&gt;
            &lt;a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo"&gt;
               Click me to expand. Click me again to collapse.Section 2
            &lt;/a&gt;
         &lt;/h4&gt;
      &lt;/div&gt;

      &lt;div id = "collapseTwo" class = "panel-collapse collapse"&gt;
         &lt;div class = "panel-body"&gt;
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         &lt;/div&gt;
      &lt;/div&gt;
      
   &lt;/div&gt;
   
   &lt;div class = "panel panel-default"&gt;
      &lt;div class = "panel-heading"&gt;
         &lt;h4 class = "panel-title"&gt;
            &lt;a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree"&gt;
               Click me to expand. Click me again to collapse.Section 3
            &lt;/a&gt;
         &lt;/h4&gt;
      &lt;/div&gt;
     
      &lt;div id = "collapseThree" class = "panel-collapse collapse"&gt;
         &lt;div class = "panel-body"&gt;
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         &lt;/div&gt;
      &lt;/div&gt;
     
   &lt;/div&gt;
&lt;/div&gt;

Click me to expand. Click me again to collapse.Section 1

</a>

</h4>

</div>

Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred

nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.

</div>

Click me to expand. Click me again to collapse.Section 2

</a>

</h4>

</div>

Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt

sapiente ea proident. Ad vegan excepteur butcher vice lomo.

</div>

Click me to expand. Click me again to collapse.Section 3

</a>

</h4>

</div>

Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt

sapiente ea proident. Ad vegan excepteur butcher vice lomo.

</div>

“data-toggle = “collapse به لینکی که برای گسترش یا فروپاشی مولفه روی آن کلیک می کنید ، اضافه می شود.
href یا یک ویژگی data-target به مولفه اصلی اضافه می شود ، که مقدار آن شناسه مولفه فرزند است.
داده-والد برای ایجاد اثر مشابه آکاردئون اضافه می شود.

برای ایجاد جمع شدگی ساده بدون نشانه گذاری آکاردئون – این را می توان مانند مثال زیر ایجاد کرد –

نسخه ی نمایشی زنده

&lt;button type = "button" class = "btn btn-primary" data-toggle = "collapse" data-target = "#demo"&gt;
   simple collapsible
&lt;/button&gt;

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

simple collapsible

</button>

Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt

sapiente ea proident. Ad vegan excepteur butcher vice lomo.

</div>

همانطور که در مثال مشاهده می کنید ما یک مولفه جمع شونده ساده ایجاد کرده ایم، برخلاف آکاردئون، ما ویژگی data-parent را اضافه نکرده ایم.

کاربردهای پلاگین collapse

جدول زیر کلاسهایی را که پلاگین سقوط برای کنترل سنگین وزن استفاده می کند لیست می کند –

	شرح کلاس
1	collapse. محتوا را پنهان می کند.
2	collapse.in. محتوا را نشان می دهد.
3	collapsing. با شروع انتقال اضافه می شود و پس از اتمام حذف می شود.

شرح کلاس

collapse.

محتوا را پنهان می کند.

collapse.in.

محتوا را نشان می دهد.

collapsing.

با شروع انتقال اضافه می شود و پس از اتمام حذف می شود.

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

از طریق ویژگی های داده – برای اختصاص دادن کنترل خودکار یک عنصر جمع شونده ، “data-toggle = “collapse و یک داده را به عنصر اضافه کنید. ویژگی data-target یک انتخابگر CSS را می پذیرد تا سقوط را در آن اعمال کند. مطمئن شوید که کلاس collapse. را به عنصر جمع شونده اضافه کنید. اگر می خواهید به طور پیش فرض باز شود ، کلاس اضافی in. را وارد کنید.
برای افزودن مدیریت گروه آکاردئون مانند به یک کنترل جمع شونده ، ویژگی data را اضافه کنید “data-parent = “#selector.
از طریق JavaScript – روش collapse را می توان با JavaScript فعال کرد همانطور که در زیر نشان داده شده است –

$('.collapse').collapse()

1	$('.collapse').collapse()

گزینه ها

گزینه های خاصی وجود دارد که می تواند از طریق ویژگی های داده منتقل شود یا JavaScript در جدول زیر ذکر شده است –

نام گزینه	مقدار پیش فرض	نام ویژگی داده	توضیح
parent	selector Default − false	data-parent	اگر انتخابگر نادرست باشد ، تمام عناصر جمع شونده تحت والد مشخص شده بسته می شوند (شبیه رفتار سنتی آکاردئون – این به کلاس گروه آکاردئون بستگی دارد).
toggle	boolean Default − true	data-toggle	در هنگام فراخوانی عنصر جمع شونده را تغییر می دهد.

متدها

در اینجا لیستی از چند روش مفید که با عناصر collapse استفاده می شود ، آورده شده است.

متد

توضیح

مثال

Options − .collapse(options)

محتوای شما را به عنوان یک عنصر collapse فعال می کند. یک شی options اختیاری را می پذیرد.

$('#identifier').collapse({
   toggle: false
})

$('#identifier').collapse({

toggle: false

})

Toggle − .collapse(‘toggle’)

یک عنصر collapse را نشان می دهد تا پنهان شود.

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

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

Show − .collapse(‘show’)

یک عنصر collapse را نشان می دهد.

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

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

Hide − .collapse(‘hide’)

یک عنصر collapse را پنهان می کند.

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

1	$('#identifier').collapse('hide')

مثال

&lt;div class = "panel-group" id = "accordion"&gt;
   &lt;div class = "panel panel-default"&gt;
      
      &lt;div class = "panel-heading"&gt;
         &lt;h4 class = "panel-title"&gt;
            &lt;a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne"&gt;
               Click me to expand. Click me again to collapse. Section 1--hide method
            &lt;/a&gt;
         &lt;/h4&gt;
      &lt;/div&gt;
      
      &lt;div id = "collapseOne" class = "panel-collapse collapse in"&gt;
         &lt;div class = "panel-body"&gt;
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         &lt;/div&gt;
      &lt;/div&gt;
      
   &lt;/div&gt;
   
   &lt;div class = "panel panel-success"&gt;
      &lt;div class = "panel-heading"&gt;
         &lt;h4 class = "panel-title"&gt;
            &lt;a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo"&gt;
               Click me to expand. Click me again to collapse. Section 2--show method
            &lt;/a&gt;
         &lt;/h4&gt;
      &lt;/div&gt;
      
      &lt;div id = "collapseTwo" class = "panel-collapse collapse"&gt;
         &lt;div class = "panel-body"&gt;
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         &lt;/div&gt;
      &lt;/div&gt;
      
   &lt;/div&gt;
   
   &lt;div class = "panel panel-info"&gt;
      &lt;div class = "panel-heading"&gt;
         &lt;h4 class = "panel-title"&gt;
            &lt;a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree"&gt;
               Click me to expand. Click me again to collapse. Section 3--toggle method
            &lt;/a&gt;
         &lt;/h4&gt;
      &lt;/div&gt;
      
      &lt;div id = "collapseThree" class = "panel-collapse collapse"&gt;
         &lt;div class = "panel-body"&gt;
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         &lt;/div&gt;
      &lt;/div&gt;
   &lt;/div&gt;
   
   &lt;div class = "panel panel-warning"&gt;
      &lt;div class = "panel-heading"&gt;
         &lt;h4 class = "panel-title"&gt;
            &lt;a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseFour"&gt;
               Click me to expand. Click me again to collapse. Section 4--options method
            &lt;/a&gt;
         &lt;/h4&gt;
      &lt;/div&gt;
      
      &lt;div id = "collapseFour" class = "panel-collapse collapse"&gt;
         &lt;div class = "panel-body"&gt;
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         &lt;/div&gt;
      &lt;/div&gt;
      
   &lt;/div&gt;
&lt;/div&gt;

&lt;script type = "text/javascript"&gt;
   $(function () { $('#collapseFour').collapse({
      toggle: false
   })});
  
   $(function () { $('#collapseTwo').collapse('show')});
   $(function () { $('#collapseThree').collapse('toggle')});
   $(function () { $('#collapseOne').collapse('hide')});
&lt;/script&gt;

Click me to expand. Click me again to collapse. Section 1--hide method

</a>

</h4>

</div>

Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt

sapiente ea proident. Ad vegan excepteur butcher vice lomo.

</div>

Click me to expand. Click me again to collapse. Section 2--show method

</a>

</h4>

</div>

Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt

sapiente ea proident. Ad vegan excepteur butcher vice lomo.

</div>

Click me to expand. Click me again to collapse. Section 3--toggle method

</a>

</h4>

</div>

Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt

sapiente ea proident. Ad vegan excepteur butcher vice lomo.

</div>

Click me to expand. Click me again to collapse. Section 4--options method

</a>

</h4>

</div>

Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt

sapiente ea proident. Ad vegan excepteur butcher vice lomo.

</div>

$(function () { $('#collapseFour').collapse({

toggle: false

})});

$(function () { $('#collapseTwo').collapse('show')});

$(function () { $('#collapseThree').collapse('toggle')});

$(function () { $('#collapseOne').collapse('hide')});

</script>

رویداد ها

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

رویداد

توضیح

مثال

show.bs.collapse

بسته می شود بعد از فراخوانی متند نمایش.

$('#identifier').on('show.bs.collapse', function () {
   // do something
})

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

// do something

})

shown.bs.collapse

این رویداد هنگامی که یک عنصر collapse در معرض دید کاربر قرار گرفت، خاموش می شود (منتظر می ماند تا انتقال CSS کامل شود).

$('#identifier').on('shown.bs.collapse', function () {
   // do something
})

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

// do something

})

hide.bs.collapse

وقتی فراخوانی شده است ، روش پنهان می شود.

$('#identifier').on('hide.bs.collapse', function () {
   // do something
})

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

// do something

})

hidden.bs.collapse

این رویداد هنگامی که یک عنصر collapse از کاربر پنهان شده است شروع می شود (منتظر می ماند تا انتقال CSS کامل شود).

$('#identifier').on('hidden.bs.collapse', function () {
   // do something
})

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

// do something

})

مثال

مثال زیر استفاده از رویدادها را نشان می دهد –

&lt;div class = "panel-group" id = "accordion"&gt;
   &lt;div class = "panel panel-info"&gt;
   
      &lt;div class = "panel-heading"&gt;
         &lt;h4 class = "panel-title"&gt;
            &lt;a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseexample"&gt;
               Click me to expand. Click me again to collapse. Section --shown event
            &lt;/a&gt;
         &lt;/h4&gt;
      &lt;/div&gt;
      
      &lt;div id = "collapseexample" class = "panel-collapse collapse"&gt;
         &lt;div class = "panel-body"&gt;
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         &lt;/div&gt;
      &lt;/div&gt;
      
   &lt;/div&gt;
&lt;/div&gt;

&lt;script type = "text/javascript"&gt;
   $(function () { 
      $('#collapseexample').on('show.bs.collapse', function () {
         alert('Hey, this alert shows up when you expand it');
      })
   });
&lt;/script&gt;

Click me to expand. Click me again to collapse. Section --shown event

</a>

</h4>

</div>

Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt

sapiente ea proident. Ad vegan excepteur butcher vice lomo.

</div>

$(function () {

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

alert('Hey, this alert shows up when you expand it');

})

});

</script>

منبع.

لیست جلسات قبل آموزش بوت استرپ

امتیاز دهید post

برچسب ها : آموزش بوت استرپ آموزش طراحی وب سایت

نویسنده مطلب saber

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

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

کاربردهای پلاگین collapse

گزینه ها

متدها

مثال

رویداد ها

مثال

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

بدون دیدگاه

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

کاربردهای پلاگین collapse

گزینه ها

متدها

مثال

رویداد ها

مثال

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه