Bootstrap ، من Twitter ، هو الإطار الأمامي الأكثر شعبية في الوقت الحاضر. يعتمد Bootstrap على HTML و CSS و JavaScript. إنها بسيطة ومرنة ، مما يجعل تطوير الويب أسرع. بعد ذلك ، من خلال هذه المقالة ، سأقدم لك مثال استخدام المكون الإضافي القابل للطي (الانهيار). دعونا نلقي نظرة!
يجعل المكون الإضافي للانهيار من السهل طي منطقة الصفحة. سواء كنت تستخدمه لإنشاء تنقل منهار أو لوحة محتوى ، فإنه يسمح بالكثير من خيارات المحتوى.
إذا كنت ترغب في الرجوع إلى وظيفة المكون الإضافي بشكل منفصل ، فأنت بحاجة إلى الرجوع إلى Cllapse.js. في الوقت نفسه ، تحتاج أيضًا إلى الرجوع إلى المكون الإضافي الانتقالي في إصدار Bootstrap الخاص بك. أو ، كما هو مذكور في الفصل الإضافي في Bootstrap ، يمكنك الرجوع إلى bootstrap.js أو إصدارات مضغوطة من bootstrap.min.js.
يمكنك استخدام المكون الإضافي للانهيار:
قم بإنشاء لوحة قابلة للطي أو لوحة قابلة للطي على النحو التالي:
<! doctype html> <html> <head> <title> مثيل bootstrap - لوحة طي </title> <link href = "/bootstrap/css/botstrap.min.css" rel = "stylesher" src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "orcordion"> <viv> <h4> <a data-toggle = "collapse" data-parent = "#orcordion" href = "#collapseone" الجزء 1 </a> </h4> </viv> <div id = "collapseone"> <viv> nihil anim keffiyeh helvetica ، حرف البيرة الحرفية Wes Anderson cred Nesciunt sapiente ea proident. AD Vegan Prodeur Butcher Vice Lomo. </viv> </viv> <viv> <h4> <a data-toggle = "collapse" data-parent = "#corrcorion" href = "#collapsetwo"> انقر فوق لي للتوسيع ، انقر فوق لي للانهيار مرة أخرى. الجزء 2 </a> </h4> </viv> <div id = "collapsetwo"> <viv> nihil anim keffiyeh helvetica ، حرف البيرة الحرفية Wes Anderson nesciunt sapiente ea proident. AD Vegan Prodeur Butcher Vice Lomo. </viv> </viv> <viv> <h4> <a data-toggle = "collapse" data-parent = "#concludion" href = "#collapsethree"> انقر على التوسيع ، انقر فوق لي للانهيار مرة أخرى. الجزء 3 </a> </h4> </viv> <div id = "collapsethree"> <viv> nihil anim keffiyeh helvetica ، حرف البيرة الحرفية Wes Anderson cred Nesciunt sapiente ea proident. AD Vegan Prodeur Butcher Vice Lomo. </viv> </viv> </viv> </viv> </body> </html>
النتائج كما يلي:
تتم إضافة البيانات toggle = "الانهيار" إلى رابط المكون الذي تريد توسيعه أو الانهيار.
تتم إضافة خاصية HREF أو استهدف البيانات إلى المكون الأصل ، وقيمتها هي معرف المكون الطفل.
تضيف الخاصية الوالدة الوالدة من البيانات معرف اللوحة المنهارة إلى رابط المكون المراد توسيعه أو انهياره.
قم بإنشاء مكون بسيط قابل للطي دون علامة الأكورديون ، كما هو موضح أدناه:
<! doctype html> <html> <head> <title> مثيل bootstrap- مكون بسيط قابل للطي </title> <link href = "/bootstrap/css/botstrap.min.css" crimt> src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <button type = "button" data-toggle = "collapse" data-target = "#demo"> مكون قابلة للطي بسيط </button> <div id = "demo" AD Vegan Prodeur Butcher Vice Lomo. </div> </body> </html>
النتائج كما يلي:
كما ترون في المثيل ، أنشأنا مكونًا قابلًا للطي ، على عكس اللوحة المطوية ، لم نضيف خصائص البيانات الوالدة.
الاستخدام
يسرد الجدول التالي المكون الإضافي للانهيار للتعامل مع التحجيم الثقيل:
يمكنك استخدام المكون الإضافي للانهيار بطريقتين:
من خلال سمة البيانات: أضف البيانات toggle = "الانهيار" واستهداف البيانات للعنصر لتعيين عناصر التحكم تلقائيًا للعناصر القابلة للطي. تقبل خاصية استهداف البيانات محدد CSS وتطبق تأثير الانهيار عليه. تأكد من إضافة فئة. collapse إلى العنصر القابل للطي. إذا كنت تريد أن تكون بشكل افتراضي ، فأضف فئة إضافية. في.
لإضافة إدارة تجميع تشبه اللوحة المطوية إلى عنصر التحكم القابل للطي ، أضف بيانات خصائص البيانات-"#"#Selector ".
من خلال JavaScript: يمكن تنشيط طريقة الانهيار من خلال JavaScript ، كما هو موضح أدناه:
$ ('. الانهيار'). الانهيار ()خيارات
هناك بعض الخيارات التي يتم تمريرها من خلال خصائص البيانات أو JavaScript. يسرد الجدول التالي هذه الخيارات:
طريقة
فيما يلي بعض الطرق المفيدة في المكونات الإضافية:
مثال
يوضح المثال التالي استخدام الطريقة:
<! doctype html> <html> <head> <title> مثيل bootstrap - انهيار طريقة المكونات الإضافية </title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "styleshele src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "orcordion"> <viv> <h4> <a data-toggle = "collapse" data-parent = "#orcordion" href = "#collapseone" الجزء 1-hide </a> </h4> </viv> <div id = "collapseone"> <viv> nihil anim keffiyeh helvetica ، حرف البيرة الحرفية wes Anderson cred Nesciunt sapiente ea proident. AD Vegan Prodeur Butcher Vice Lomo. </viv> </viv> <viv> <h4> <a data-toggle = "collapse" data-parent = "#corrcorion" href = "#collapsetwo"> انقر فوق لي للتوسيع ، انقر فوق لي للانهيار مرة أخرى. الجزء 2 -طريقة العرض </a> </h4> </viv> <div id = "collapsetwo"> <viv> nihil anim keffiyeh helvetica ، حرف البيرة الحرفية wes wes Anderson nesciunt sapiente ea proident. AD Vegan Prodeur Butcher Vice Lomo. </viv> </viv> <viv> <viv> <h4> <a data-toggle = "collapse" data-parent = "#corrcorion" href = "#collapsethree"> انقر على التوسع ، انقر على الانهيار مرة أخرى. الجزء 3-toggle </a> </h4> </viv> <div id = "collapsethree"> <viv> nihil anim keffiyeh helvetica ، حرف البيرة الحرفية wes Anderson cred nesciunt sapiente ea proident. AD Vegan Prodeur Butcher Vice Lomo. </viv> </viv> <viv> <h4> <a data-toggle = "collapse" data-parent = "#corrcorion" href = "#collapsefour"> انقر على التوسيع ، انقر فوق لي للانهيار مرة أخرى. الجزء 4-طريقة الاختصار </a> </h4> </viv> <div id = "collapsefour"> <viv> nihil anim keffiyeh helvetica ، حرف البيرة الحرفية ويس أندرسون AD VEGAN ESTEREUR BUTCHER VICE LOMO. </div> </viv> </viv> <script type = "text/javaScript"> $ (function () {$ ('#cllapsefour'). cllapse ({sogle: false}) ؛ $ (function () {$ ('#collapsew'). $ ('#collapsethree'). الانهيار ('Toggle')}) ؛ $ (function () {$ ('#collapseone'). الانهيار ('Hide')}) ؛ </script> </body> </html>النتائج كما يلي:
حدث
يسرد الجدول التالي الأحداث المراد استخدامها في المكون الإضافي للانهيار. يمكن استخدام هذه الأحداث كخطافات في الوظائف.
مثال
يوضح المثال التالي استخدام الأحداث:
<! doctype html> <html> <head> <title> مثيل bootstrap - حدث مكون إضافي </title> <link href = "/bootstrap/css/bootstrap.min.css" crimt ” src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "orcordion"> <viv> <h4> <a data-toggle = "cllapse" data-parent = "#orcordion" href = "#collapseexample"> انقر على التوسيع ، انقر على collapse مرة أخرى. -الحدث shown </a> </h4> </viv> <div id = "collapSeexample"> <viv> nihil ript keffiyeh helvetica ، حرف البيرة الحرف Wes Anderson cred nesciunt sapiente ea proident. AD VEGAN ESTEREUR BUTCHER VICE LOMO. </div> </viv> </viv> <script type = "text/javaScript"> $ (function () {$ ('#cllapseexample'). on ('show.bs.collapse' ، function () {enlert ('hey ، يتم تحريك هذا التحذير عند توسيعك'})النتائج كما يلي:
ما سبق هو التفسير التفصيلي لاستخدام المكون الإضافي القابل للطي (الانهيار) الذي أدخله المحرر. آمل أن يكون ذلك مفيدًا للجميع!