js collapse

js collapse

(JS Collapse (collapse.js

به دست آوردن استایل های پایه و پشتیبانی انعطاف پذیر برای کامپوننت های پیش ساخته، مانند آکاردئون ها و ناوبری ها.

پلاگین وابسته: قابلیت جمع شدن(collapse)، استفاده از پلاگین transitions که در ورژن بوتسترپ شما اضافه شده است را ضروری کرده است.


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

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

 از طریق خصوصیات *-data

برای اینکه به طور اتوماتیک یک عنصر با قابلیت جمع شدن(collapsible) را ایجاد کنید، تنها کافی است که

عبارات “data-toggle=”collapse و data-target را به عنصر مورد نظر اضافه کنید. خصوصیت data-target برای اعمال کردن قابلیت جمع شدن، یک سلکتور css را می پذیرد.مطمئن شوید که کلاس جمع شدن را به عنصر مورد نظر اضافه کرده اید. در صورتی که می خواهید حالت باز شدن(open) به صورت پیش فرض باشد، کلاس اضافی مورد نظر را به آن اضافه کنید.

برای اضافه کردن یک گروه بندی شبه آکاردئون خصوصیت “data-parent=”#selector را اضافه کنید.


از طریق جاوا اسکریپت

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

$(‘.collapse’).collapse()

گزینه ها

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

Name Type Default Description
parent selector false اگر انتخاب شود آنگاه عناصر با قابلیت جمع شدن، که در عنصر والد(parent) مشخص شده قرار دارند، هنگامی که، این آیتم قابل جمع شدن، نمایش یابد،جمع خواهند شد(بسته می شوند). (درست مانند آکاردئون های رایج).
toggle boolean true به هنگام فراخوانی، یک ویژگی دوحالته را به عنصر مورد نظر اضافه می کند.

مثال

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

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

مثال

<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 نشان می دهد:

مثال

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

اگه به اشتراک نزاشتی حداقل لایک کن:(

نظر شما در رابطه با این آموزش چیست


بالا

تمامی حقوق مادی و معنوی این وبسایت محفوظ میباشد و متعلق است به Webtekar.ir.
Google