تتعلم هذه المقالة بشكل أساسي مربع JavaScript Plug-in-pop-up.
قضية
أضف تراكبًا صغيرًا إلى محتوى الصفحة ، تمامًا مثل التأثيرات على iPad ، وإضافة معلومات إضافية إلى عناصر الصفحة.
دعونا نلقي نظرة على عدد قليل من عروض الحالة الثابتة البسيطة
التأثير بسيط نسبيًا ، وخاصة الشكل الصغير الذي يظهر بشكل ثابت ، مقسمة إلى عنوان النموذج ومحتوى النموذج.
<viv> <viv> <viv> </viv> <h3> popover top </h3> <viv> <p> sed posuere incectetur est at lobortis. AENEAN EU LEO QUAM. Pellentesque Ornare Sem lacinia quam venenatis. AENEAN EU LEO QUAM. Pellentesque Ornare Sem lacinia quam venenatis. </p> </viv> <viv> <viv> </viv> <h3> popover right </h3> <viv> <p> sed posuere incectetur est at lobortis. AENEAN EU LEO QUAM. Pellentesque Ornare Sem lacinia quam venenatis الدهليز. </p> </viv> <viv> <viv> </viv> <h3> قاع popover </h3> <v> <p> sed posuere incectetur est في lobortis. AENEAN EU LEO QUAM. Pellentesque Ornare Sem lacinia quam venenatis الدهليز. </p> </viv> <viv> <viv> </viv> <h3> popover left </h3> <viv> <p> sed posuere incectetur est at st at lobortis. AENEAN EU LEO QUAM. pellentesque ornare sem lacinia quam venenatis. </p> </viv> <viv> <viv> </viv> <h3> popover left </h3> <viv> <p> sed posuere incectetur est at lobortis. AENEAN EU LEO QUAM. Pellentesque Ornare Sem lacinia quam venenatis الدهلي
لكننا ما زلنا بحاجة إلى تعيين تصميم أساسي بسيط للعناصر
<type type = "text/css">. العرض: كتلة ؛ تعويم: اليسار. العرض: 240 بكسل ؛ الهامش: 20px ؛} </style>
العرض التوضيحي الديناميكي
دعونا نلقي نظرة على العروض أولاً
سوف يظهر زر عند النقر فوق الزر.
من السهل جدًا قراءة الكود.
[رمز] <a id = "a2" data-placement = "right"-content-content = "أي ، للتعبير عن ازدراء السلوكيات والأفكار المروعة المختلفة التي لها خصائص سمة مثل القصيرة والدهنية والفقراء والقبيحة والغبية والغبية والاستمناء. تشير إلى معظمهم من العائلات الفقيرة ، مثل العديد من الأسر البسيطة في المناطق الحضرية ، دون أن تكون العديد من المدارس الثانوية المبتدئة ، وذهبت إلى المدينة ، أو أصبحت نادلة مطعم ، أو مديري إنترنت على الإنترنت ، لكنهم عادة ما يكونون على سبيل المثال. HREF = "#" البيانات الأثرية = "الحرير الأصلي المعنى"> يرجى النقر لتبديل popover </a> [رمز]
إنها مجرد تسمية ، ولكنها تعطي فئة النمط من الزر ، ثم يعطي عدة سمات ، والتي تستخدم بشكل أساسي لعرض مربع المنبثقة:
الأول: العنوان-العنوان-العنوان الأصليون-
والثاني: محتوى محتوى البيانات
ثالثًا: موقع توصيل البيانات (لأعلى ، أسفل ، يسار ، يمين)
ولكن الآن إذا قمت بتشغيله ، فإن الزر يحتوي عليه ، ولن يظهر المربع المنبثق عند النقر فوق الزر. اتضح أنه بسيط للغاية ، أي أننا لم نهيئته حتى الآن ، تمامًا مثل تلميح الأدوات في القسم السابق.
فقط أضف رمز JavaScript بسيط.
<script type = "text/javaScript"> $ ("#a1"). popover () ؛ </script>أربعة اتجاهات
<div style = "margin-left: 200px ؛ margin-top: 100px ؛ margin-bottom: 200px ؛"> <viv> <button type = "button" data-container = "body" data-toggle = "popover" data-plancy = "left" data-content = "vivamus sacitis lacus laoreet laore rautrum < type = "button" data-container = "body" data-toggle = "popover" data-placement = "top" data-content = "vivamus sagittis lacus vel ugue laoreet rutrum faucibus. sagittis lacus vel ugue laoreet rutrum faucibus.
ثم استخدم JavaScript لتنشيط
<script type = "text/javaScript"> $ ("#a1"). popover () ؛ $ ("[data-toggle = popover]"). popover () ؛ </script>وظيفة إضافة انتقائية
لاعتبارات الأداء ، تتم إضافة واجهة برمجة تطبيقات سمة البيانات من تلميحات الأدوات والمكونات المنبثقة اختياريا ، مما يعني أنه يجب عليك تهيئتها بنفسك.
هناك حاجة إلى إعدادات إضافية عند استخدام المربعات المنبثقة في مجموعات الأزرار ومجموعات مربع الإدخال
عند استخدام مربع المطالبة بالاقتران مع .BTN-Group أو .input-Group ، تحتاج إلى تحديد خيار الحاوية: "Body" (انظر الوثائق أدناه) لتجنب الآثار الجانبية غير المرغوب فيها (على سبيل المثال ، عندما يظهر مربع المنبثقة ، قد تصبح عناصر الصفحة التي تتعاون معها أوسع أو مُعد).
عند استخدام مربعات منبثقة على عناصر الصفحات المحظورة ، تحتاج إلى إضافة عنصر إضافي للفه
من أجل إضافة مربع منبثقة إلى عنصر معطل أو .disabled ، قم بلف عنصر الصفحة الذي يجب إضافته إلى مربع المنبثقة في <viv> ، ثم قم بتطبيق مربع منبثقة على هذا العنصر <Div>.
الاستخدام
تمكين الصناديق المنبثقة عبر JavaScript:
$ ('#مثال'). popover (خيارات)
خيارات
يمكن تمرير الخيارات من خلال خصائص البيانات أو JavaScript. بالنسبة إلى سمة البيانات ، تحتاج إلى وضع اسم الخيار بعد البيانات ، على سبيل المثال-إعادة تشكيل البيانات = "".
طريقة
$ (). popover (خيارات)
تهيئة مربع المنبثقة لمجموعة من العناصر.
$ ('#element'). popover ('show')
يظهر مربع المنبثقة.
$ ('#element'). popover ('Hide')
إخفاء مربع المنبثقة.
$ ('#element'). popover ('Toggle')
إظهار أو إخفاء مربع المنبثقة.
$ ('#element'). popover ('Destroy')
إخفاء وتدمير صندوق المنبثقة.
حدث
$ ('[data-toggle = popover]'). on ('shown.bs.popover' ، function () {Alert (1) ؛})إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون من المفيد للجميع تعلم برمجة JavaScript.