بوبوفرز

وثائق وأمثلة لإضافة 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.

استمر في القراءة لترى كيف يعمل 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)

خيارات

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

اسم	يكتب	تقصير	وصف
الرسوم المتحركة	قيمة منطقية	حقيقي	تطبيق انتقال تلاشي 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 .

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

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

طُرق

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

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