تتعلم هذه المقالة أساسًا عن مكونات JavaScript - قابلة للطي.
1. تأثير الانتقال
حول آثار الانتقال
لتأثيرات الانتقال البسيطة ، فقط تقديم Transition.js وملفات JS الأخرى معًا. إذا كنت تستخدم ملف BOOTSTRAP.JS مجمع (أو مضغوط) ، فلن تحتاج إلى تقديمه بشكل منفصل.
ماذا في الداخل
Transition.js هو مساعد أساسي لحدث الانتقال وهو أيضًا محاكاة لتأثيرات الانتقال CSS. يتم استخدامه بواسطة المكونات الإضافية الأخرى لاكتشاف ما إذا كان المتصفح الحالي يدعم تأثيرات انتقال CSS.
2. أضعاف
إعطاء النمط الأساسي والدعم المرن للمكونات التي تدعم وظائف الطي ، مثل الأكرونات والتنقل.
تبعيات البرنامج المساعد
يعتمد المكون الإضافي للانهيار على المكون الإضافي لتأثير الانتقال.
قضية
باستخدام المكون الإضافي القابل للطي ، يتم تصميم مكون Acron بسيط عن طريق تمديد مكون اللوحة.
دعونا نلقي نظرة على التأثير أولاً.
بعد ذلك ، دعونا نلقي نظرة على تنفيذ الكود.
<div style = "margin-top: 140px ؛"> <div id = "orcordion"> <viv> <viv> <h4> <a data-toggle = "collapse" data-toggle = "collapse" data-parent = "#orcorion" href = "#cllapseone كليشيه Refrehenderit ، enim eiusmod high life accusamus terry richardson ad squid. 3 Wolf Moon Officialaute ، Nonboatboat Dolor Dolor Brunch. شاحنة الطعام Quinoa nesciunt Laborum eiusmod. Brunch 3 Wolf Moon Tempor ، Sunt Aliqua وضعت طائرًا على القهوة ذات الأصل الواحد nulla nulla dortuenda shoreditch et. nihil anim keffiyeh helvetica ، الحرفية البيرة العمل wes Anderson cred Nesciunt sapiente ea proidide. إعلان نباتي باستثناء جزار نائب لومو. طماق OccaeCat Craft Beer Farm-table ، nesciunt الدنيم الجمالية الخام ربما لم تسمع عنها accusamus العمل VHS المستدامة. </viv> </viv> </viv> <viv> <h4> <a data-toggle = "collapse" data-toggle = "collapse" data-parent = "#corrcorion" href = "#collapsetwo" ريتشاردسون إعلان الحبار. 3 Wolf Moon Officialaute ، Nonboatatat Skatoboard Dolor Brunch. شاحنة الطعام Quinoa nesciunt Laborum eiusmod. Brunch 3 Wolf Moon Tempor ، Sunt Aliqua وضعت طائرًا على القهوة ذات الأصل الواحد nulla nulla dortuenda shoreditch et. nihil anim keffiyeh helvetica ، الحرفية البيرة العمل wes Anderson cred Nesciunt sapiente ea proidide. إعلان نباتي باستثناء جزار نائب لومو. طماق OccaeCat Craft Beer Farm-table ، nesciunt الدنيم الجمالية الخام ربما لم تسمع عنها accusamus العمل VHS المستدامة. </viv> </viv> </viv> <viv> <h4> <a data-toggle = "collapse" data-toggle = "collapse" data-parent = "#corrcorion" href = "#collapsethree"> group eis cliche cliche eis eis eis eis eiseender ، enim eiseender ، ماكساموس تيري ريتشاردسون إعلان الحبار. 3 Wolf Moon الرسمية AUTE ، NONT CUPIDATAT SKATBOARD DOLOR BRANCH. شاحنة الطعام Quinoa nesciunt Laborum eiusmod. Brunch 3 Wolf Moon Tempor ، Sunt Aliqua وضعت طائرًا على القهوة ذات الأصل الواحد nulla nulla dortuenda shoreditch et. nihil anim keffiyeh helvetica ، الحرفية البيرة العمل wes Anderson cred Nesciunt sapiente ea proidide. إعلان نباتي باستثناء جزار نائب لومو. Leggings occucaecat Craft Beer Farm-table ، nesciunt الجينز التجميلي الخام ربما لم تسمع عنها accusamus العمال VHS المستدامة. </viv> </viv> </viv> </viv> </viv> </viv>
الخطوة 1: أولاً ، تتضمن الطبقة الخارجية لمجموعة اللوحة عدة مجموعات أدناه.
الخطوة 2: ألق نظرة على بعض المجموعات البسيطة
<viv> <h4> <a data-toggle = "collapse" data-toggle = "collapse" data-parent = "#orcordion" href = "#collapseOne"> collapsible group#1 </a> </h4> </viv>
يمكن رؤية هيكل اللوحة بوضوح من خلال الكود.
يمكن أن يحتوي Header و Pandl-Body ، ثم رئيس اللوحة على عناوين وروابط. تواصل مع لوحة اللوحة عبر الرابط.
الخطوة 3: يمكنك أن تجد أن هناك معرف = "الأكورديون" في مجموعة اللوحة ، ثم هناك مادة بيانات = "#أكورديون" في الرابط تحت كل عنوان أدناه.
إذا تمت إزالتها ، فإن التأثير هو أنه بعد النقر على روابط أخرى ، لن تتقلص اللوحة الأصلية مرة أخرى.
يمكنك إظهار تأثير الطي بطريقة أخرى.
<div style = "margin-top: 140px ؛"> <button type = "button" data-toggle = "collapse" data-target = "#demo"> انهيار بسيط </button> <div id = "demo"> anim pariatur cliche refrehenderit ، enim eiusmod high life accusamus terry strimid. 3 Wolf Moon الرسمية AUTE ، NONT CUPIDAT SKATBOARD DOLOR BUNCH. شاحنة الطعام Quinoa nesciunt Laborum eiusmod. Brunch 3 Wolf Moon Tempor ، Sunt Aliqua وضعت طائرًا على القهوة ذات الأصل الواحد nulla nulla dortuenda shoreditch et. nihil anim keffiyeh helvetica ، الحرفية البيرة العمل wes Anderson cred Nesciunt sapiente ea proidide. إعلان نباتي باستثناء جزار نائب لومو. Leggings OccaeCat Craft Beer Farm-table ، nesciunt الجينز الجمالي الخام ربما لم تسمع عنها
الاستخدام
يتحكم المكون الإضافي في الأنماط من خلال عدة فصول بسيطة
. collapse إخفاء المحتوى
. collapse في محتوى العرض
. تتم إضافته عند بدء الانتقال ، وإزالته عند الانتهاء ، ربما يعني أن تأثير الانتقال سيكون متاحًا بعد إضافة الطية ، ثم إذا تمت إزالته ، فستنتهي.
من خلال سمة البيانات
مجرد إضافة البيانات toggle = "الانهيار" واستهداف البيانات لعنصر الصفحة يمنحها القدرة على التحكم في عناصر الصفحة القابلة للطي. تقبل خاصية استهداف البيانات محدد CSS ككائن التحكم الخاص به. تأكد من إضافة فئة الانهيار إلى عنصر الصفحة المنهار. إذا كنت تريد توسيع الحالة الافتراضية لعنصر الصفحة المنهار ، فأضف في الفصل.
لإضافة وحدة تحكم إلى مجموعة من عناصر الصفحات القابلة للطي ، أضف البيانات-"#Selector". يرجى الرجوع إلى المثال أعلاه.
عبر JavaScript
<button type = "button" onClick = "Open ()"> افتح </button> <button type = "button" onClick = "Hide ()"> أضعاف </button> <div id = "demo"> anim pariatur cliche refrehenderit ، enim eiusmod high life accusamus terry richards. 3 Wolf Moon الرسمية AUTE ، NONT CUPIDAT SKATBOARD DOLOR BUNCH. شاحنة الطعام Quinoa nesciunt Laborum eiusmod. Brunch 3 Wolf Moon Tempor ، Sunt Aliqua وضعت طائرًا على القهوة ذات الأصل الواحد nulla nulla dortuenda shoreditch et. nihil anim keffiyeh helvetica ، الحرفية البيرة العمل wes Anderson cred Nesciunt sapiente ea proidide. إعلان نباتي باستثناء جزار نائب لومو. Leggings occucaecat Craft Beer Farm-table ، nexiunt dener typer nesciunt ربما لم تسمع عنها accusamus for vhs المستدامة. </div> <div id = "الأكورديون"
<script type = "text/javaScript"> $ (function () {$ ("#demo"). collapse ({toggle: false})}) function Open () {$ ("#demo"). collapse ("show") ؛ } وظيفة Hide () {$ ("#Demo"). الانهيار ("Hide") ؛ } </script>ألق نظرة على التأثير أعلاه
طريقة
إعطاء عناصر الصفحة وظيفة قابلة للطي. يقبل كائن اختياري كوسيطة.
$ ("#Demo"). الانهيار ({Toggle: false})
وبهذه الطريقة ، سيتم توسيع العناصر عند تهيئتها.
1. يعرض الانهيار ('Toggle') أو يخفي عنصر الصفحة القابل للطي.
2. collapse ('show') يعرض عنصر صفحة قابلية للطي.
3. collapse ('Hide') يخفي عنصر صفحة قابلية للطي.
حدث
المكون الإضافي المنهار في bootstrap يكشف مجموعة من الأحداث التي يمكن الاستماع إليها.
هذا يربط الأحداث المخفية للعنصر.
إذا كنت لا تزال ترغب في التعلم بعمق ، فيمكنك النقر هنا للتعلم وإرفاق موضوعين مثيرين لك: Bootstrap التعلم التعليمي التعليمي التعليمي العملي
ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون مفيدًا لتعلم الجميع.