سبد (0)

پلاگین collapse در بوت استرپ

پلاگین باز و بسته شدن یا JS Collapse  در بوت استرپ

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

این پلاگین به چه چیزهایی نیاز دارد؟

پلاگین مذکور نیاز دارد که شما پلاگین transitions را به بوت استرپ خود اضافه کرده باشید. 

 

کلاس های پلاگین collapse

کلاس توضیحات مثال
collapse. محتوا را محو می کند. Try it
collapse in. محتوا را نشان می دهد. Try it
collapsing.

هنگامی که انتقال(transition)  شروع می شود، اضافه شده و هنگام پایان انتقال، پایان می یابد.

  

 استفاده از پلاگین باز و بسته شدن از طریق خصوصیات *-data

برای اینکه به طور اتوماتیک، یک عنصر با قابلیت جمع شدن(collapsible) را ایجاد کنید، تنها کافی است که عبارات "data-toggle="collapse و data-target را به عنصر مورد نظر اضافه کنید. خصوصیت data-target برای اعمال کردن قابلیت جمع شدن، id یک عنصر را می پذیرد. همچنین شما باید کلاس collapse. را به عنصری که می خواهید قابلیت باز و بسته شدن داشته باشد، اضافه کنید. در صورتی که می خواهید حالت باز شدن پیش فرض باشد، کلاس اضافه ی in را نیز به عنصر مورد نظر اعمال کنید:

مثال (js collapse)

<button class="btn" data-toggle="collapse" data-target="#demo">قابلیت باز و بسته شدن</button>

<div id="demo" class="collapse">
مقداری متن فارسی یا انگلیسی
</div>
خودتان امتحان کنید »

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

به صورت دستی آن را اضافه کنید:

$('.collapse').collapse()

گزینه ها

گزینه ها(options) می توانند از طریق خصوصیت های data یا javascript پاس داده شوند. برای خصوصیت های data، نام گزینه را به عبارت -data اضافه کنید، درست مانند data-parent:

Name Type Default Description
parent selector false

اگر انتخاب شود آنگاه عناصر با قابلیت جمع شدن، که در عنصر والد(parent) مشخص شده قرار دارند، هنگامی که، این آیتم قابل جمع شدن، نمایش یابد،جمع خواهند شد(بسته می شوند). (درست مانند آکاردئون های رایج).
toggle boolean true

به هنگام فراخوانی، یک ویژگی دوحالته را به عنصر مورد نظر اضافه می کند.

مثال

قابلیت جمع شدن ساده

مثال زیر یک دکمه ی دوحالته را برای گسترده شدن و جمع شدن یک عنصر دیگر، ایجاد می کند:

مثال (js collapse)

<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">
  Simple collapsible
</button>

<div id="demo" class="collapse in">
  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.
</div>

خودتان امتحان کنید »

آکاردئون

مثال زیر، یک آکاردئون ساده را با گسترش کامپوننت panel نشان می دهد:

مثال (js collapse)

<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="#collapse1">
        Collapsible Group 1</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">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.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
        Collapsible Group 2</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">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.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
        Collapsible Group 3</a>
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">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.</div>
    </div>
  </div>
</div>

خودتان امتحان کنید »
نوشته شده توسط احسان عباسی
بازدید: 16569

آموزش صوتی Bootstrap

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

در میان شش هزار مطلب آموزشی منتشر شده در بیاموز، جستجو نمایید ...

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین - بانک ملت معرفی بیاموز در شبکه سه