9.0 KiB
title | localeTitle |
---|---|
Collapse | انهدام |
انهدام
يعد Collapse مكونًا إضافيًا يساعدك في إخفاء العناصر أو إظهارها باستخدام صورة متحركة سلسة. يستخدم المطورون عادةً انهيار bootstrap لإخفاء أو كشف التفاصيل الثانوية لقسم صفحة الويب. على سبيل المثال ، يمكن أن يكون لديك قائمة بالعناصر ذات الأوصاف الطويلة للغاية. عرض كل شيء سوف يستهلك الكثير من المساحة حتى يمكن استخدام انهيار bootstrap لإخفاء ووصف الوصف.
يتم توفير انهيار Bootstrap على أنه ملحق منفصل يسمى collapse.js ، مما يعني أنه يمكن استخدامه خارج بيئة التشغيل. يمكن العثور على البرنامج المساعد نفسه هنا http://getbootstrap.com/2.0.4/javascript.html#collapse.
يمكن استخدام انهيار Bootstrap مع بعض العناصر ، زر ، علامة ارتساء أو لوحة. لاستخدام الانهيار ، تحتاج إلى عنصرين على الأقل ، وسيتحكم عنصر واحد في حالة إخفاء أو كشف العنصر الآخر.
يعمل المكوِّن الإضافي للانهيار عن طريق تغيير الفئة على العنصر القابل للطي. هناك ثلاث فئات محتملة:
- .collapse - يخفي هذا الفصل العنصر
- .collapsing - يتم إرفاق هذه الفئة أثناء الانتقال
- .collapse.in - يعرض هذا الفصل العنصر
كيفية استخدامها
لاستخدام الانهيار ، يمكنك القيام بذلك بطريقتين:
- باستخدام
href
على العلامة<a>
- استخدام
data-target
على علامة<button>
ستكون القيمة في href
أو data-target
هي محدد العنصر الذي سيتم تصغيره. وقرر أنك تستخدم <a>
أو علامة <button>
، يلزم data-toggle="collapse"
.
يجب أن يحتوي عنصر التصغير على class .collapse
.
أمثلة مع الأزرار
` Link with href Button with data-target
في المثال أعلاه ، نستخدم زرًا وعلامة ارتساء للتحكم في عنصر div. يحتاج الزر والمرسلان وهما عنصران للتحكم إلى شيئين ، السمة التي تحدد أن عنصر التحكم هو من أجل الانهيار وسمة أخرى لتحديد العنصر الذي يتحكم فيه (يخفي أو يكشف).
كلاهما يحتوي على سمة تبديل البيانات مع انهيار القيمة الذي يحدد أنه سيتم استخدامها لتصغير عنصر. تستخدم علامة الربط خاصية href لتحديد العنصر الذي يتحكم فيه ، بينما يستخدم الزر سمة بيانات الهدف لتحديد العنصر الذي يتحكم فيه.
يمكنك عرض تجريبي للزر هنا https://www.w3schools.com/bootstrap/tryit.asp؟filename=trybs_collapsible&stacked=h
يمكنك عرض عرض لعلامة الارتساء هنا https://www.w3schools.com/bootstrap/tryit.asp؟filename=trybs_collapsible2&stacked=h
مثال مع الأكورديون
`
في المثال أعلاه نستخدم انهيار bootstrap لإنشاء الأكورديون. الأكورديون هو مجرد لوحة bootstrap حيث يتم عرض الرأس ويستخدم للتحكم في جسم اللوحة.
يحتوي رأس اللوحة على علامة ارتساء تستخدم للتحكم في حالة انهيار الجسم. لذا نرفق مفتاح تبديل البيانات لتحديد أن هذا العنصر يستخدم في طي و href لتحديد العنصر الذي يخفيه أو يكشف عنه. يمكننا أيضًا إنشاء مجموعة من اللوحات لإنشاء مجموعة لوحات قابلة للطي.
يمكنك الاطلاع على عرض تجريبي لانهيار اللوحة هنا https://www.w3schools.com/bootstrap/tryit.asp؟filename=trybs according collion & stacked = h
عنصر المحتوى
فقرة!
`
Lorem ipsum dolar, Free Code Camp rocks...
`- إضافة class
.collapse
إلى أن الفقرة عنصر قابل للطي. - إضافة
id
لجعل هذا العنصر القابل للطي قابلًا لعنصر وحدة التحكم.
`
Lorem ipsum dolar, Free Code Camp rocks...
`عنصر تحكم
الزر!
<button>Click Me To See Some Magic!</button>
- إضافة سمة
data-toggle="collapse"
للسيطرة على عنصر قابل للطي. - إضافة سمة
data-target="#id"
للإشارة إلى العنصر القابل للطي بمعرّفه.
<button data-toggle="collapse" data-target="#myParagraph">Click Me To See Some Magic!</button>
مثال
`
Link with href Button with data-target
استخدامه مع JavaScript
يتيح لك هذا المكون الإضافي استخدامه مع JavaScript حيث تحتاج فقط إلى تحديد العنصر الذي تريد طيه لتمكينه:
$('.collapsible-element').collapse();
تقبل طريقة collapse
كائنًا اختياريًا حيث يمكنك تعيين الحالة الأولية للعنصر القابل للطي. الخيارات هي:
toggle
: سيتم إخفاء العنصر أو إظهاره بناءً على حالته. إذا كانت مخفية ، فسيتم عرضها ، إذا تم إظهارها ، فسيتم إخفاؤها.hide
: إخفاء العنصر.show
: يعرض العنصر.
$('.collapsible-element').collapse('hide');
أيضا هناك بعض الطرق المكشوفة للربط في وظائف الانهيار:
show.bs.collapse
: يتمshow.bs.collapse
فورًا عندما يتم استدعاء طريقة مثيلshow
.shown.bs.collapse
: يتمshown.bs.collapse
عندما يكون عنصر الانهيار مرئياً للمستخدم (سوف تنتظر حتى تكتمل انتقالات CSS).hide.bs.collapse
: تمhide.bs.collapse
فورًا عند استدعاء طريقةhide
.hidden.bs.collapse
: تمhidden.bs.collapse
عندما يكون عنصر الانهيار مخفيًا عن المستخدم (سينتظر اكتمال انتقالات CSS).
$('.collapsible-element').on('show.bs.collapse', function() { // for example you want to make an AJAX call to get some data to put in the collapsible element. })