بوبوفرز

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

ملخص

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

تعتمد العناصر المنبثقة على مكتبة الطرف الثالث Popper.js لتحديد المواقع. يجب عليك تضمين popper.min.js قبل bootstrap.js أو استخدام bootstrap.bundle.min.js/ bootstrap.bundle.jsالذي يحتوي على Popper.js حتى يعمل 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="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المشغل لتجاهل العناصر المنبثقة عند نقرة المستخدم التالية على عنصر مختلف عن عنصر التبديل.

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

للحصول على سلوك سليم عبر المتصفحات وعبر الأنظمة الأساسية ، يجب عليك استخدام <a>العلامة ، وليس العلامة <button>، كما يجب تضمين tabindexسمة.

popover غير مقبول

<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 إلى العنصر المنبثق
وعاء	سلسلة \| عنصر \| خاطئة	خاطئة	لإلحاق العنصر المنبثق بعنصر معين. مثال `container: 'body'`:. هذا الخيار مفيد بشكل خاص لأنه يسمح لك بوضع النافذة المنبثقة في تدفق المستند بالقرب من عنصر التشغيل - مما سيمنع العنصر المنبثق من الطفو بعيدًا عن عنصر التشغيل أثناء تغيير حجم النافذة.
المحتوى	سلسلة \| عنصر \| وظيفة	"	قيمة المحتوى الافتراضية إذا `data-content`لم تكن السمة موجودة. إذا تم توفير وظيفة ، فسيتم استدعاؤها مع `this`مجموعة مرجعية لها إلى العنصر الذي يتم إرفاق العنصر المنبثق به.
تأخير	رقم \| هدف	0	التأخير في إظهار وإخفاء النافذة المنبثقة (بالمللي ثانية) - لا ينطبق على نوع المشغل اليدوي إذا تم توفير رقم ، فسيتم تطبيق التأخير على كل من الإخفاء / العرض هيكل الكائن هو:`delay: { "show": 500, "hide": 100 }`
لغة البرمجة	قيمة منطقية	خاطئة	أدخل HTML في النافذة المنبثقة. `text`إذا كانت القيمة false ، فسيتم استخدام طريقة jQuery لإدراج المحتوى في DOM. استخدم النص إذا كنت قلقًا بشأن هجمات XSS.
تحديد مستوى	سلسلة \| وظيفة	'حقا'	كيفية وضع المنبثقة - تلقائي \| أعلى \| أسفل \| غادر \| حقا. عند `auto`تحديده ، سيعيد توجيه النافذة المنبثقة ديناميكيًا. عندما يتم استخدام دالة لتحديد الموضع ، يتم استدعاؤها باستخدام عقدة DOM المنبثقة باعتبارها الوسيطة الأولى لها وعقدة DOM المشغلة كعقدة ثانية لها. يتم `this`تعيين السياق على مثيل popover.
محدد	سلسلة \| خاطئة	خاطئة	إذا تم توفير محدد ، فسيتم تفويض الكائنات المنبثقة إلى الأهداف المحددة. في الممارسة العملية ، يتم استخدام هذا لتمكين محتوى HTML الديناميكي لإضافة العناصر المنبثقة. انظر إلى هذا ومثال إعلامي .
قالب	سلسلة	`'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'`	قاعدة HTML لاستخدامها عند إنشاء العنصر المنبثق. `title`سيتم حقن العناصر المنبثقة في ملف `.popover-header`. `content`سيتم حقن العناصر المنبثقة في ملف `.popover-body`. `.arrow`سيصبح سهم المنبثقة. يجب أن يحتوي عنصر الغلاف الخارجي على `.popover`الفئة.
لقب	سلسلة \| عنصر \| وظيفة	"	قيمة العنوان الافتراضية إذا `title`لم تكن السمة موجودة. إذا تم توفير وظيفة ، فسيتم استدعاؤها مع `this`مجموعة مرجعية لها إلى العنصر الذي يتم إرفاق العنصر المنبثق به.
اثار	سلسلة	'انقر'	كيف يتم تشغيل المنبثقة - انقر فوق \| تحوم \| التركيز \| كتيب. يمكنك تمرير عدة مشغلات ؛ افصلهم بمسافة. `manual`لا يمكن دمجها مع أي مشغل آخر.
عوض	رقم \| سلسلة	0	إزاحة العنصر المنبثق بالنسبة إلى هدفه. لمزيد من المعلومات ، راجع مستندات تعويض Popper.js .
احتياطي	سلسلة \| مجموعة مصفوفة	'يواجه'	السماح بتحديد الموضع الذي سيستخدمه بوبر عند الرجوع. لمزيد من المعلومات ، راجع مستندات سلوك Popper.js
الحدود	سلسلة \| عنصر	"scrollParent"	تجاوز حدود القيد من المنبثقة. يقبل قيم `'viewport'`، `'window'`أو `'scrollParent'`، أو مرجع HTMLElement (JavaScript فقط). لمزيد من المعلومات ، راجع مستندات منع Popper.js 's PreventionOverflow .
عقم	قيمة منطقية	حقيقي	تمكين أو تعطيل التطهير. في حالة التنشيط `'template'`، سيتم تعقيم الخيارات `'content'`.`'title'`
القائمة البيضاء	هدف	القيمة الافتراضية	الكائن الذي يحتوي على السمات والعلامات المسموح بها
تعقيم	فارغ \| وظيفة	لا شيء	هنا يمكنك توفير وظيفة التعقيم الخاصة بك. يمكن أن يكون هذا مفيدًا إذا كنت تفضل استخدام مكتبة مخصصة لإجراء التعقيم.
popperConfig	فارغ \| هدف	لا شيء	لتغيير تكوين Popper.js الافتراضي الخاص بـ Bootstrap ، راجع تكوين Popper.js

سمات البيانات للأفراد المنبثقين

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

طُرق

الطرق غير المتزامنة والانتقالات

جميع طرق 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...
})