پاپاورها

اسناد و نمونه هایی برای افزودن پاپاورهای بوت استرپ، مانند مواردی که در iOS یافت می شوند، به هر عنصری در سایت شما.

بررسی اجمالی

نکاتی که هنگام استفاده از افزونه popover باید بدانید:

• Popover ها برای موقعیت یابی به کتابخانه شخص ثالث Popper.js متکی هستند . شما باید popper.min.js را قبل از bootstrap.js اضافه کنید یا از bootstrap.bundle.min.js/ bootstrap.bundle.jsکه حاوی Popper.js است استفاده کنید تا پاپاورها کار کنند!
• Popover ها به افزونه tooltip به عنوان یک وابستگی نیاز دارند.
• اگر جاوا اسکریپت ما را از منبع می‌سازید، به آن نیاز داردutil.js .
• Popover ها به دلایل عملکردی انتخاب می شوند، بنابراین باید خودتان آنها را مقداردهی اولیه کنید .
• طول صفر titleو contentمقادیر هرگز پاپاور را نشان نمی دهند.
• container: 'body'برای جلوگیری از بروز مشکلات در مؤلفه‌های پیچیده‌تر (مانند گروه‌های ورودی، گروه‌های دکمه‌ها و غیره) آن را مشخص کنید .
• راه اندازی پاپاور روی عناصر پنهان کار نخواهد کرد.
• پاپاور برای .disabledیا disabledعناصر باید روی یک عنصر لفافی فعال شوند.
• هنگامی که از لنگرهایی که در چندین خط قرار می گیرند، پاپاورها بین عرض کلی لنگرها در مرکز قرار می گیرند. برای جلوگیری از این رفتار از white-space: nowrap;روی s خود استفاده کنید.<a>
• Popover ها باید قبل از حذف عناصر مربوطه از DOM پنهان شوند.

به خواندن ادامه دهید تا ببینید پاپاورها با چند مثال چگونه کار می کنند.

مثال: پاپاورها را در همه جا فعال کنید

یک راه برای مقداردهی اولیه همه پاپاورها در یک صفحه این است که آنها را با ویژگی آنها انتخاب کنید 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ویژگی تعاملی نیستند، به این معنی که کاربران نمی توانند ماوس را نگه دارند یا روی آنها کلیک کنند تا پاپ اور (یا راهنمای ابزار) راه اندازی شود. به عنوان یک راه حل، شما می خواهید popover را از یک wrapper فعال کنید <div>یا عنصر غیرفعال را <span>لغو کنید .pointer-events

برای راه‌اندازهای پاپ‌اور غیرفعال، ممکن است ترجیح 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>

استفاده

فعال کردن پاپاورها از طریق جاوا اسکریپت:

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

گزینه ها

گزینه ها را می توان از طریق ویژگی های داده یا جاوا اسکریپت منتقل کرد. data-برای ویژگی های داده، نام گزینه را به مانند در ضمیمه کنید data-animation="".

مواد و روش ها

$().popover(options)

پاپاورها را برای یک مجموعه عناصر راه اندازی می کند.

.popover('show')

پاپاور یک عنصر را آشکار می کند. قبل از اینکه پاپاور واقعاً نشان داده شود (یعنی قبل از shown.bs.popoverوقوع رویداد) به تماس گیرنده برمی گردد. این به عنوان یک راه‌اندازی «دستی» پاپاور در نظر گرفته می‌شود. پاپاورهایی که هم عنوان و هم محتوای آنها صفر است هرگز نمایش داده نمی شوند.

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

.popover('hide')

پاپاور یک عنصر را پنهان می کند. قبل از اینکه پاپاور واقعاً پنهان شود (یعنی قبل از hidden.bs.popoverوقوع رویداد) به تماس گیرنده برمی گردد. این به عنوان یک راه‌اندازی «دستی» پاپاور در نظر گرفته می‌شود.

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

.popover('toggle')

popover یک عنصر را تغییر می دهد. قبل از اینکه پاپاور واقعاً نشان داده یا پنهان شود (یعنی قبل از وقوع رویداد shown.bs.popoverیا hidden.bs.popoverرویداد) به تماس گیرنده برمی گردد. این به عنوان یک راه‌اندازی «دستی» پاپاور در نظر گرفته می‌شود.

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

.popover('dispose')

پاپاور یک عنصر را پنهان کرده و از بین می برد. پاپاورهایی که از تفویض استفاده می‌کنند (که با استفاده از selectorگزینه ایجاد می‌شوند ) را نمی‌توان به‌صورت جداگانه در عناصر ماشه‌ای نزول از بین برد.

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

.popover('enable')

به پاپاور یک عنصر قابلیت نشان دادن می دهد. Popover ها به طور پیش فرض فعال هستند.

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

.popover('disable')

قابلیت نمایش پاپاور یک عنصر را حذف می کند. Popover فقط در صورت فعال شدن مجدد قابل نمایش است.

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

.popover('toggleEnabled')

قابلیت نمایش یا پنهان کردن پاپاور یک عنصر را تغییر می‌دهد.

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

.popover('update')

موقعیت popover یک عنصر را به روز می کند.

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

مناسبت ها

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