بوبوفرز

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

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

طُرق

$().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')

الأحداث

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})