بوبوفرز
وثائق وأمثلة لإضافة Bootstrap popovers ، مثل تلك الموجودة في iOS ، إلى أي عنصر على موقعك.
ملخص
أشياء يجب معرفتها عند استخدام المكون الإضافي Popover:
- تعتمد العناصر المنبثقة على مكتبة Popper التابعة لجهة خارجية لتحديد المواقع. يجب عليك تضمين popper.min.js قبل bootstrap.js أو استخدام
bootstrap.bundle.min.js
/bootstrap.bundle.js
الذي يحتوي على Popper حتى يعمل popovers! - تتطلب العناصر المنبثقة إضافة تلميح الأدوات كتبعية.
- إذا كنت تقوم ببناء JavaScript من المصدر ، فهذا يتطلب
util.js
. - يتم تمكين العناصر المنبثقة لأسباب تتعلق بالأداء ، لذا يجب عليك تهيئتها بنفسك .
- الطول الصفري
title
والقيمcontent
لن تظهر أبدًا نافذة منبثقة. - حدد
container: 'body'
لتجنب مشاكل العرض في المكونات الأكثر تعقيدًا (مثل مجموعات الإدخال ومجموعات الأزرار وما إلى ذلك). - لن يعمل تشغيل العناصر المنبثقة على العناصر المخفية.
- يجب تشغيل العناصر المنبثقة لـ
.disabled
أوdisabled
العناصر على عنصر مجمّع. - عند التشغيل من المراسي التي تلتف عبر خطوط متعددة ، سيتم توسيط العناصر المنبثقة بين العرض الإجمالي للمراسي. استخدمه لتجنب هذا السلوك
.text-nowrap
.<a>
- يجب إخفاء العناصر المنبثقة قبل إزالة العناصر المقابلة لها من DOM.
- يمكن تشغيل النوافذ المنبثقة بفضل عنصر داخل ظل DOM.
prefers-reduced-motion
الاستعلام عن الوسائط. راجع
قسم الحركة المخفضة في وثائق إمكانية الوصول الخاصة بنا .
استمر في القراءة لترى كيف يعمل popovers مع بعض الأمثلة.
مثال: تمكين العناصر المنبثقة في كل مكان
تتمثل إحدى طرق تهيئة جميع العناصر المنبثقة على الصفحة في تحديدها حسب data-toggle
السمة الخاصة بها:
$(function () {
$('[data-toggle="popover"]').popover()
})
مثال: استخدام container
الخيار
عندما يكون لديك بعض الأنماط على عنصر أصلي تتداخل مع نافذة منبثقة ، سترغب في تحديد مخصص container
بحيث يظهر HTML المنبثق داخل هذا العنصر بدلاً من ذلك.
$(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="Top popover">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
Popover on left
</button>
رفض عند النقر التالي
استخدم focus
المشغل لتجاهل العناصر المنبثقة عند نقرة المستخدم التالية على عنصر مختلف عن عنصر التبديل.
مطلوب ترميز محدد للرفض عند النقرة التالية
للحصول على سلوك سليم عبر المتصفحات وعبر الأنظمة الأساسية ، يجب عليك استخدام <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>
إستعمال
تمكين العناصر المنبثقة عبر JavaScript:
$('#example').popover(options)
تسريع GPU
تظهر العناصر المنبثقة أحيانًا ضبابية على أجهزة Windows 10 بسبب تسريع GPU ونظام DPI المعدل. الحل البديل لذلك في الإصدار 4 هو تعطيل تسريع وحدة معالجة الرسومات حسب الحاجة في العناصر المنبثقة.
الإصلاح المقترح:
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))
جعل popovers تعمل مع لوحة المفاتيح ومستخدمي التكنولوجيا المساعدة
للسماح لمستخدمي لوحة المفاتيح بتنشيط العناصر المنبثقة الخاصة بك ، يجب عليك فقط إضافتها إلى عناصر HTML التي تكون عادةً قابلة للتركيز على لوحة المفاتيح وتفاعلية (مثل الروابط أو عناصر التحكم في النموذج). على الرغم من أنه يمكن جعل عناصر HTML التعسفية (مثل العناصر <span>
) قابلة للتركيز عن طريق إضافة tabindex="0"
السمة ، إلا أن هذا سيضيف علامات تبويب مزعجة ومربكة على العناصر غير التفاعلية لمستخدمي لوحة المفاتيح ، ومعظم التقنيات المساعدة لا تعلن حاليًا عن محتوى popover في هذه الحالة . بالإضافة إلى ذلك ، لا تعتمد فقط على hover
المشغل لمستخدمي لوحة المفاتيح ، لأن هذا سيجعل من المستحيل تشغيلها لمستخدمي لوحة المفاتيح.
بينما يمكنك إدراج HTML منسق ومنظم في العناصر المنبثقة مع html
الخيار ، نوصي بشدة بتجنب إضافة كمية زائدة من المحتوى. الطريقة التي تعمل بها العناصر المنبثقة حاليًا هي أنه بمجرد عرضها ، يتم ربط محتواها بعنصر المشغل aria-describedby
بالسمة. نتيجة لذلك ، سيتم الإعلان عن محتوى popover بالكامل لمستخدمي التكنولوجيا المساعدة كدفق واحد طويل غير متقطع.
بالإضافة إلى ذلك ، في حين أنه من الممكن أيضًا تضمين عناصر تحكم تفاعلية (مثل عناصر النموذج أو الروابط) في النافذة المنبثقة (عن طريق إضافة هذه العناصر إلى whiteList
السمات والعلامات المسموح بها) ، يجب أن تدرك أن العنصر المنبثق حاليًا لا يدير ترتيب تركيز لوحة المفاتيح. عندما يفتح مستخدم لوحة المفاتيح نافذة منبثقة ، يظل التركيز على عنصر التشغيل ، وبما أن العنصر المنبثق عادةً لا يتبع فورًا المشغل في بنية المستند ، فلا يوجد ضمان بالتحرك إلى الأمام / الضغطTABسينقل مستخدم لوحة المفاتيح إلى النافذة المنبثقة نفسها. باختصار ، من المرجح أن تؤدي إضافة عناصر تحكم تفاعلية إلى نافذة منبثقة إلى جعل عناصر التحكم هذه غير قابلة للوصول / غير قابلة للاستخدام لمستخدمي لوحة المفاتيح ومستخدمي التقنيات المساعدة ، أو على الأقل إجراء ترتيب تركيز عام غير منطقي. في هذه الحالات ، ضع في اعتبارك استخدام مربع حوار مشروط بدلاً من ذلك.
خيارات
يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. لسمات البيانات ، قم بإلحاق اسم الخيار بـ data-
، كما في data-animation=""
.
sanitize
،
لا يمكن توفير الخيارات باستخدام سمات البيانات
sanitizeFn
.
whiteList
اسم | يكتب | تقصير | وصف |
---|---|---|---|
الرسوم المتحركة | قيمة منطقية | حقيقي | تطبيق انتقال تلاشي CSS إلى العنصر المنبثق |
وعاء | سلسلة | عنصر | خاطئة | خاطئة | لإلحاق العنصر المنبثق بعنصر معين. مثال |
المحتوى | سلسلة | عنصر | وظيفة | " | قيمة المحتوى الافتراضية إذا إذا تم توفير وظيفة ، فسيتم استدعاؤها مع |
تأخير | رقم | هدف | 0 | التأخير في إظهار وإخفاء النافذة المنبثقة (بالمللي ثانية) - لا ينطبق على نوع المشغل اليدوي إذا تم توفير رقم ، فسيتم تطبيق التأخير على كل من الإخفاء / العرض هيكل الكائن هو: |
لغة البرمجة | قيمة منطقية | خاطئة | أدخل HTML في النافذة المنبثقة. text إذا كانت القيمة false ، فسيتم استخدام طريقة jQuery لإدراج المحتوى في DOM. استخدم النص إذا كنت قلقًا بشأن هجمات XSS. |
تحديد مستوى | سلسلة | وظيفة | 'حقا' | كيفية وضع المنبثقة - تلقائي | أعلى | أسفل | غادر | حقا. عند استخدام دالة لتحديد الموضع ، يتم استدعاؤها باستخدام عقدة DOM المنبثقة باعتبارها الوسيطة الأولى لها وعقدة DOM المشغلة كعقدة ثانية لها. يتم |
محدد | سلسلة | خاطئة | خاطئة | إذا تم توفير محدد ، فسيتم تفويض الكائنات المنبثقة إلى الأهداف المحددة. في الممارسة العملية ، يتم استخدام هذا لتمكين محتوى HTML الديناميكي لإضافة العناصر المنبثقة. انظر إلى هذا ومثال إعلامي . |
قالب | سلسلة | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
قاعدة HTML لاستخدامها عند إنشاء العنصر المنبثق.
يجب أن يحتوي عنصر الغلاف الخارجي على |
لقب | سلسلة | عنصر | وظيفة | " | قيمة العنوان الافتراضية إذا إذا تم توفير وظيفة ، فسيتم استدعاؤها مع |
اثار | سلسلة | 'انقر' | كيف يتم تشغيل المنبثقة - انقر فوق | تحوم | التركيز | كتيب. يمكنك تمرير عدة مشغلات ؛ افصلهم بمسافة. manual لا يمكن دمجها مع أي مشغل آخر. |
عوض | رقم | سلسلة | 0 | إزاحة العنصر المنبثق بالنسبة إلى هدفه. لمزيد من المعلومات راجع مستندات تعويض Popper . |
احتياطي | سلسلة | مجموعة مصفوفة | 'يواجه' | السماح بتحديد الموضع الذي سيستخدمه بوبر عند الرجوع. لمزيد من المعلومات ، راجع مستندات سلوك Popper |
CustomClass | سلسلة | وظيفة | " | أضف فئات إلى النافذة المنبثقة عند عرضها. لاحظ أنه ستتم إضافة هذه الفئات بالإضافة إلى أي فئات محددة في النموذج. لإضافة عدة فئات ، افصل بينها بمسافات يمكنك أيضًا تمرير دالة يجب أن تُرجع سلسلة واحدة تحتوي على أسماء فئات إضافية. |
الحدود | سلسلة | عنصر | "scrollParent" | تجاوز حدود القيد من المنبثقة. يقبل قيم 'viewport' ، 'window' أو 'scrollParent' ، أو مرجع HTMLElement (JavaScript فقط). لمزيد من المعلومات ، راجع مستندات Popper 's PreventionOverflow . |
عقم | قيمة منطقية | حقيقي | تمكين أو تعطيل التطهير. في حالة التنشيط 'template' ، سيتم تعقيم الخيارات 'content' . 'title' راجع قسم المطهر في وثائق JavaScript الخاصة بنا . |
القائمة البيضاء | هدف | القيمة الافتراضية | الكائن الذي يحتوي على السمات والعلامات المسموح بها |
تعقيم | فارغ | وظيفة | لا شيء | هنا يمكنك توفير وظيفة التعقيم الخاصة بك. يمكن أن يكون هذا مفيدًا إذا كنت تفضل استخدام مكتبة مخصصة لإجراء التعقيم. |
popperConfig | فارغ | هدف | لا شيء | لتغيير تكوين Popper الافتراضي الخاص بـ Bootstrap ، راجع تكوين Popper |
سمات البيانات للأفراد المنبثقين
يمكن بدلاً من ذلك تحديد خيارات العناصر المنبثقة الفردية من خلال استخدام سمات البيانات ، كما هو موضح أعلاه.
طُرق
الطرق غير المتزامنة والانتقالات
جميع طرق API غير متزامنة وتبدأ في الانتقال . يعودون إلى المتصل بمجرد بدء الانتقال ولكن قبل أن ينتهي . بالإضافة إلى ذلك ، سيتم تجاهل استدعاء طريقة على مكون انتقالي .
راجع وثائق JavaScript الخاصة بنا للحصول على مزيد من المعلومات .
$().popover(options)
يقوم بتهيئة العناصر المنبثقة لمجموعة عنصر.
.popover('show')
يكشف عن العنصر المنبثق. يعود إلى المتصل قبل أن يتم عرض العنصر المنبثق بالفعل (أي قبل shown.bs.popover
وقوع الحدث). يعتبر هذا بمثابة تشغيل "يدوي" للقافزة المنبثقة. لا يتم أبدًا عرض العناصر المنبثقة التي يكون عنوانها ومحتواها صفريًا.
$('#element').popover('show')
.popover('hide')
يخفي العنصر المنبثق. يعود إلى المتصل قبل إخفاء العنصر المنبثق بالفعل (أي قبل hidden.bs.popover
وقوع الحدث). يعتبر هذا بمثابة تشغيل "يدوي" للقافزة المنبثقة.
$('#element').popover('hide')
.popover('toggle')
يبدل العنصر المنبثق. يعود إلى المتصل قبل إظهار أو إخفاء العنصر المنبثق بالفعل (أي قبل وقوع الحدث shown.bs.popover
أو ). hidden.bs.popover
يعتبر هذا بمثابة تشغيل "يدوي" للقافزة المنبثقة.
$('#element').popover('toggle')
.popover('dispose')
يخفي العنصر المنبثق ويدمره. العناصر المنبثقة التي تستخدم التفويض (التي تم إنشاؤها باستخدام الخيارselector
) لا يمكن إتلافها بشكل فردي على عناصر المشغل التابعة .
$('#element').popover('dispose')
.popover('enable')
يمنح العنصر المنبثق القدرة على الظهور. يتم تمكين العناصر المنبثقة افتراضيًا.
$('#element').popover('enable')
.popover('disable')
يزيل إمكانية إظهار العنصر المنبثق. لن يتم عرض النافذة المنبثقة إلا إذا تمت إعادة تمكينها.
$('#element').popover('disable')
.popover('toggleEnabled')
يبدل إمكانية إظهار أو إخفاء العنصر المنبثق.
$('#element').popover('toggleEnabled')
.popover('update')
يحدّث موضع العنصر المنبثق.
$('#element').popover('update')
الأحداث
نوع الحدث | وصف |
---|---|
show.bs.popover | يتم تشغيل هذا الحدث فورًا عند show استدعاء أسلوب المثيل. |
معروض. bs.popover | يتم تشغيل هذا الحدث عندما يصبح العنصر المنبثق مرئيًا للمستخدم (سينتظر حتى تكتمل انتقالات CSS). |
إخفاء. bs.popover | يتم تشغيل هذا الحدث فورًا عند hide استدعاء أسلوب المثيل. |
مخفي. bs.popover | يتم تشغيل هذا الحدث عند انتهاء إخفاء العنصر المنبثق عن المستخدم (سينتظر حتى تكتمل انتقالات CSS). |
المدرجة. bs.popover | يتم تشغيل هذا الحدث بعد show.bs.popover الحدث عند إضافة القالب المنبثق إلى DOM. |
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})