Bootstrap 4

Popovers




bootstrap

وثائق وأمثلة لإضافة برامج Bootstrap ، مثل تلك الموجودة في iOS ، إلى أي عنصر على موقعك.

نظرة عامة

أشياء يجب معرفتها عند استخدام المكون الإضافي popover:

  • يعتمد Popovers على مكتبة 3rd Popper.js لتحديد المواقع. يجب عليك تضمين popper.min.js قبل bootstrap.js أو استخدام bootstrap.bundle.min.js / bootstrap.bundle.js الذي يحتوي على Popper.js لكي يعمل popovers!
  • يتطلب Popovers المكون الإضافي لتلميحات الأدوات كإعتماد.
  • إذا كنت تقوم ببناء جافا سكريبت لدينا من المصدر ، فإنه يتطلب util.js
  • يختار Popover لأداء أسباب ، لذلك يجب عليك تهيئة لهم بنفسك .
  • لن تظهر قيم title وقيم content ذات طول الصفر مطلقًا صورة منقطعة.
  • حدد container: 'body' لتجنب مشاكل العرض في مكونات أكثر تعقيدًا (مثل مجموعات الإدخال ومجموعات الأزرار ، إلخ).
  • لن تعمل البوبكات على العناصر المخفية.
  • يجب أن يتم تشغيل Popovers لعناصر .disabled أو disabled على عنصر مجمّع.
  • عندما يتم إطلاقها من المراس التي تلتف عبر خطوط متعددة ، فإن البوبفيد سوف يكون مركزًا بين العرض الإجمالي للمراسي. استخدم white-space: nowrap; على <a> s لتجنب هذا السلوك.
  • يجب إخفاء Popovers قبل إزالة العناصر المقابلة لها من DOM.

تابع القراءة لمعرفة كيف يعمل popovers مع بعض الأمثلة.

مثال: تمكين الأشخاص المنبثقين في كل مكان

تتمثل إحدى الطرق لتهيئة جميع عمليات الزحف على الصفحة في تحديدها حسب سمة data-toggle :

$(function () {
  $('[data-toggle="popover"]').popover()
})

مثال: استخدام خيار container

عندما يكون لديك بعض الأنماط على عنصر رئيسي يتداخل مع عنصر popover ، فستحتاج إلى تحديد container مخصصة بحيث يظهر HTML الخاص ب popover داخل هذا العنصر بدلاً من ذلك.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

مثال

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

أربعة اتجاهات

تتوفر أربعة خيارات: أعلى ، يمين ، أسفل ، ومحاذاة إلى اليمين.

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

رفض على النقرة التالية

استخدم أداة focus لاستبعاد الزائرين من نقرة المستخدم التالية لعنصر مختلف عن عنصر التبديل.

ترميز محدد مطلوب للنقر عند النقر التالي

بالنسبة إلى السلوك المتقاطع tabindex عبر النظام الأساسي السليم ، يجب استخدام العلامة <a> ، وليس العلامة <button> ، ويجب أيضًا تضمين سمة tabindex .

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
$('.popover-dismiss').popover({
  trigger: 'focus'
})

العناصر المعطلة

العناصر ذات السمة disabled ليست تفاعلية ، بمعنى أنه لا يمكن للمستخدمين التمرير فوقها أو النقر عليها لتشغيل عنصر منبثق (أو تلميح الأداة). كحل بديل ، ستحتاج إلى تشغيل العنصر من الغلاف <div> أو <span> وتجاوز pointer-events على العنصر الذي تم تعطيله.

بالنسبة إلى مشغلات popover المعوقين ، قد تفضل أيضًا تشغيل data-trigger="hover" بحيث يظهر الرمز الظاهر على أنه تعليقات مرئية فورية للمستخدمين نظرًا لأنها قد لا تتوقع النقر على عنصر معطَّل.

<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

استعمال

تمكين popover عبر JavaScript:

$('#example').popover(options)

خيارات

يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. بالنسبة لسمات البيانات ، قم بإلحاق اسم الخيار data- ، كما هو الحال في data-animation="" .

اسم اكتب افتراضي وصف
الرسوم المتحركة منطقية صحيح تطبيق انتقال تتلاشى CSS إلى popover
حاوية سلسلة | عنصر | خاطئة خاطئة

إلحاق popover إلى عنصر محدد. مثال: container: 'body' . يعتبر هذا الخيار مفيدًا بشكل خاص لأنه يسمح لك بتحديد موضع popover في تدفق المستند بالقرب من عنصر التشغيل - مما سيحول دون تحريك العنصر من عنصر التحفيز أثناء تغيير حجم النافذة.

يحتوى سلسلة | عنصر | وظيفة ''

قيمة المحتوى الافتراضية إذا كانت سمة data-content غير موجودة.

إذا تم إعطاء دالة ، فسيتم استدعائها مع مجموعة المراجع this إلى العنصر الذي تم إرفاقه بالبابوي.

تأخير رقم | موضوع 0

لا ينطبق التأخير الذي يظهر وإخفاء popover (ms) - على نوع المشغل اليدوي

إذا تم توفير رقم ، يتم تطبيق التأخير على كل من إخفاء / إظهار

بنية الكائن هي: delay: { "show": 500, "hide": 100 }

أتش تي أم أل منطقية خاطئة أدخل HTML في popover. إذا كانت false ، فسيتم استخدام طريقة text jQuery لإدراج محتوى في DOM. استخدم النص إذا كنت قلقًا بشأن هجمات XSS.
تحديد مستوى سلسلة | وظيفة 'حق'

كيفية وضع popover - السيارات | أعلى | أسفل اليسار | حق.
عندما يتم تحديد auto ، سيقوم بإعادة توجيه popover بشكل حيوي.

عند استخدام دالة لتحديد الموضع ، يتم استدعاؤه باستخدام العقدة DOM popover كوسيطة أولى وعقدة DOM لعنصر المشغل كدليل لها. يتم تعيين this السياق إلى مثيل popover.

منتخب سلسلة | خاطئة خاطئة إذا تم توفير محدد ، سيتم تفويض كائنات popover للأهداف المحددة. في الممارسة العملية ، يتم استخدام هذا لتمكين محتوى HTML الديناميكي لإضافة popovers. انظر this ومثال غني بالمعلومات .
قالب خيط '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

قاعدة HTML لاستخدامها عند إنشاء popover.

سيتم إدخال title popover في title .popover-header .

سيتم حقن content .popover-body في .popover-body .

سوف يصبح السهم سهم السهم.

يجب أن يكون عنصر المجمّع الخارجي فئة .popover .

عنوان سلسلة | عنصر | وظيفة ''

قيمة العنوان الافتراضية إذا لم تكن سمة title موجودة.

إذا تم إعطاء دالة ، فسيتم استدعائها مع مجموعة المراجع this إلى العنصر الذي تم إرفاقه بالبابوي.

اثار خيط 'انقر' كيف يتم تشغيل popover - انقر فوق | تحوم | التركيز | كتيب. قد تمر عدة محفزات. فصلها مع الفضاء. لا يمكن الجمع بين 'manual` مع أي مشغل آخر.
الأوفست رقم | خيط 0 إزاحة popover نسبة إلى هدفه. لمزيد من المعلومات ، راجع مستندات إزاحة Popper.js.
fallbackPlacement سلسلة | مجموعة مصفوفة 'يواجه' السماح لتحديد أي موقف ستستخدم بوبر على التراجع. لمزيد من المعلومات ، راجع مستندات سلوك Popper.js
حدود سلسلة | جزء "scrollParent" حدود تجاوز الحد من popover. يقبل قيم 'viewport' أو 'window' أو 'scrollParent' أو مرجع HTMLElement (JavaScript فقط). للحصول على مزيد من المعلومات ، راجع مستندات منع Poperver.js .

سمات البيانات ل popovers الفردية

بدلا من ذلك يمكن تحديد خيارات للأشخاص المنبثقين من خلال استخدام سمات البيانات ، كما هو موضح أعلاه.

أساليب

أساليب غير متزامنة وانتقالات

جميع طرق API غير متزامنة وتبدأ مرحلة انتقالية . يعودون إلى المتصل حالما يبدأ الانتقال ولكن قبل أن ينتهي . بالإضافة إلى ذلك ، سيتم تجاهل استدعاء الأسلوب على مكون النقل .

راجع وثائق جافا سكريبت لدينا لمزيد من المعلومات.

$().popover(options)

تهيئة popovers لمجموعة عنصر.

.popover('show')

تكشف عن عنصر أيقونة. العودة إلى المتصل قبل أن يتم إظهارها بالفعل (أي قبل shown.bs.popover الحدث shown.bs.popover ). هذا يعتبر "دليل" تحريك من popover. لا يتم أبدًا عرض الإعلانات التي لا يتم عرض عنوانها ومحتواها مطلقًا.

$('#element').popover('show')

.popover('hide')

إخفاء عنصر العنصر. العودة إلى المتصل قبل أن يكون قد تم اخفاؤها بالفعل (أي قبل حدث hidden.bs.popover ). هذا يعتبر "دليل" تحريك من popover.

$('#element').popover('hide')

.popover('toggle')

يقوم بتبديل أحد عناصر العنصر. العودة إلى المتصل قبل أن يكون قد تم إظهاره بالفعل أو إخفاءه (أي قبل hidden.bs.popover حدث hidden.bs.popover أو hidden.bs.popover ). هذا يعتبر "دليل" تحريك من popover.

$('#element').popover('toggle')

.popover('dispose')

يخفي ويدمر عنصر أي عنصر. Popover التي تستخدم التفويض (التي يتم إنشاؤها باستخدام خيار selector ) لا يمكن تدميرها بشكل فردي على عناصر المشغل descendant.

$('#element').popover('dispose')

.popover('enable')

يمنح عنصرًا مميزًا للعنصر القدرة على الظهور. يتم تمكين Popovers بشكل افتراضي.

$('#element').popover('enable')

.popover('disable')

يزيل القدرة على ظهور عنصر من عناصر العنصر. سيتمكن عرض الصورة فقط في حالة إعادة تمكينها.

$('#element').popover('disable')

.popover('toggleEnabled')

لتبديل القدرة على إظهار عنصر عنصر أو إخفاؤه.

$('#element').popover('toggleEnabled')

.popover('update')

يحدّث موقع عنصر العنصر.

$('#element').popover('update')

أحداث

نوع الحدث وصف
show.bs.popover ينطلق هذا الحدث فورًا عندما يتم استدعاء طريقة مثيل show .
shown.bs.popover يتم تشغيل هذا الحدث عندما يتم جعل popover مرئيًا للمستخدم (سينتظر انتهاء انتقالات CSS).
hide.bs.popover يتم تشغيل هذا الحدث على الفور عندما تم استدعاء أسلوب مثيل المخفية.
hidden.bs.popover يتم تشغيل هذا الحدث عند انتهاء ظهور popover من المستخدم (سينتظر انتهاء انتقالات CSS).
inserted.bs.popover يتم تشغيل هذا الحدث بعد الحدث show.bs.popover عند إضافة قالب popover إلى DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})