Source

پاپاورها

اسناد و نمونه هایی برای افزودن پاپاورهای بوت استرپ، مانند مواردی که در 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>، نه<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ویژگی تعاملی نیستند، به این معنی که کاربران نمی توانند ماوس را نگه دارند یا روی آنها کلیک کنند تا پاپ اور (یا راهنمای ابزار) راه اندازی شود. به عنوان یک راه حل، شما می خواهید 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="".

نام تایپ کنید پیش فرض شرح
انیمیشن بولی درست است، واقعی یک انتقال محو شدن CSS به پاپاور اعمال کنید
ظرف رشته | عنصر | نادرست نادرست

popover را به یک عنصر خاص اضافه می کند. مثال: container: 'body'. این گزینه مخصوصاً از این جهت مفید است که به شما امکان می‌دهد پاپاور را در جریان سند نزدیک عنصر راه‌انداز قرار دهید - که از شناور شدن پاپاور از عنصر راه‌انداز در طول تغییر اندازه پنجره جلوگیری می‌کند.

محتوا رشته | عنصر | عملکرد ''

data-contentاگر ویژگی وجود نداشته باشد، مقدار محتوای پیش‌فرض را تعیین کنید .

اگر تابعی داده شود، با thisمجموعه مرجع خود به عنصری که popover به آن متصل است فراخوانی می شود.

تاخیر انداختن شماره | هدف - شی 0

تاخیر در نمایش و پنهان کردن پاپاور (ms) - برای نوع ماشه دستی اعمال نمی شود

اگر شماره ای ارائه شود، تاخیر برای هر دو پنهان/نمایش اعمال می شود

ساختار شیء عبارت است از:delay: { "show": 500, "hide": 100 }

html بولی نادرست HTML را در پاپاور قرار دهید. textاگر نادرست باشد، از روش jQuery برای درج محتوا در DOM استفاده می شود. اگر نگران حملات XSS هستید از متن استفاده کنید.
تعیین سطح رشته | عملکرد 'درست'

نحوه قرار دادن پاپاور - خودکار | بالا | پایین | چپ | درست.
وقتی autoمشخص شد، به صورت پویا جهت پاپاور را تغییر می دهد.

هنگامی که یک تابع برای تعیین مکان استفاده می شود، با گره popover 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مجموعه مرجع خود به عنصری که popover به آن متصل است فراخوانی می شود.

ماشه رشته 'کلیک' چگونه پاپاور راه اندازی می شود - کلیک کنید | شناور | تمرکز | کتابچه راهنمای. شما ممکن است چندین محرک عبور دهید. آنها را با فاصله جدا کنید. «دستی» را نمی توان با هیچ محرک دیگری ترکیب کرد.
انحراف شماره | رشته 0 جبران پوپاور نسبت به هدفش. برای اطلاعات بیشتر به اسناد افست Popper.js مراجعه کنید .
جایگزینی رشته | آرایه تلنگر اجازه دهید مشخص کنید که پوپر از کدام موقعیت در بازگشت استفاده می کند. برای اطلاعات بیشتر به اسناد رفتاری Popper.js مراجعه کنید
مرز رشته | عنصر 'scrollParent' مرز محدودیت سرریز پاپاور. مقادیر 'viewport', 'window', 'scrollParent'یا مرجع HTMLElement (فقط جاوا اسکریپت) را می پذیرد. برای اطلاعات بیشتر به اسناد preventOverflow Popper.js مراجعه کنید .

ویژگی های داده برای پاپاورهای فردی

همانطور که در بالا توضیح داده شد، می‌توان گزینه‌های مربوط به پاپاورهای فردی را از طریق استفاده از ویژگی‌های داده مشخص کرد.

مواد و روش ها

روش ها و انتقال های ناهمزمان

همه متدهای API ناهمزمان هستند و یک انتقال را شروع می کنند . آنها به محض شروع انتقال اما قبل از پایان آن به تماس گیرنده باز می گردند . علاوه بر این، فراخوانی متد بر روی یک جزء انتقال نادیده گرفته خواهد شد .

برای اطلاعات بیشتر به مستندات جاوا اسکریپت ما مراجعه کنید.

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

مناسبت ها

نوع رویداد شرح
show.bs.popover این رویداد بلافاصله پس از showفراخوانی متد نمونه فعال می شود.
نشان داده شده.ب.اس.پاپور این رویداد زمانی فعال می شود که پاپاور برای کاربر قابل مشاهده باشد (منتظر تکمیل انتقال CSS می شود).
hide.bs.popover این رویداد بلافاصله پس از hideفراخوانی متد نمونه فعال می شود.
hidden.bs.popover این رویداد زمانی فعال می شود که پاپ اور از کاربر مخفی شود (منتظر تکمیل انتقال CSS می شود).
درج شده.bs.popover این رویداد پس از show.bs.popoverرویداد زمانی که قالب popover به DOM اضافه شده است فعال می شود.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})