in English

پاپاورها

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

بررسی اجمالی

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

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

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

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

یک راه برای مقداردهی اولیه همه پاپاورها در یک صفحه این است که آنها را با ویژگی آنها انتخاب کنید 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="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
  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)
شتاب پردازنده گرافیکی

پاپاورها گاهی اوقات در دستگاه های ویندوز 10 به دلیل شتاب GPU و تغییر DPI سیستم تار به نظر می رسند. راه حل برای این کار در نسخه 4 این است که شتاب GPU را در صورت نیاز در پاپاورهای خود غیرفعال کنید.

راه حل پیشنهادی:

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

ساخت پاپاورها برای کاربران صفحه کلید و فناوری کمکی

برای اینکه به کاربران صفحه کلید اجازه دهید پاپاورهای شما را فعال کنند، باید آنها را فقط به عناصر HTML اضافه کنید که به طور سنتی قابل تمرکز روی صفحه کلید و تعاملی هستند (مانند پیوندها یا کنترل های فرم). اگرچه عناصر HTML دلخواه (مانند <span>s) را می توان با افزودن این tabindex="0"ویژگی قابل تمرکز کرد، اما این کار باعث می شود تا تب های بالقوه آزاردهنده و گیج کننده بر روی عناصر غیر تعاملی برای کاربران صفحه کلید اضافه شود، و اکثر فناوری های کمکی در حال حاضر محتوای popover را در این شرایط اعلام نمی کنند. . علاوه بر این، صرفاً به hoverعنوان محرک پاپاورهای خود متکی نباشید، زیرا این کار باعث می‌شود که آنها را برای کاربران صفحه کلید غیرممکن کند.

در حالی که می‌توانید با این گزینه HTML غنی و ساختار یافته را در پاپ‌اورها وارد htmlکنید، ما قویاً توصیه می‌کنیم که از افزودن بیش از حد محتوا خودداری کنید. روشی که پاپاورها در حال حاضر کار می کنند این است که پس از نمایش، محتوای آنها به عنصر ماشه با aria-describedbyویژگی گره خورده است. در نتیجه، کل محتوای پاپاور به عنوان یک جریان طولانی و بدون وقفه به کاربران فناوری کمکی اعلام خواهد شد.

علاوه بر این، در حالی که می‌توانید کنترل‌های تعاملی (مانند عناصر فرم یا پیوندها) را نیز در پاپاور خود بگنجانید (با افزودن این عناصر به whiteListویژگی‌ها و برچسب‌ها یا مجاز)، توجه داشته باشید که در حال حاضر popover ترتیب فوکوس صفحه‌کلید را مدیریت نمی‌کند. هنگامی که کاربر صفحه کلید یک پاپاور را باز می کند، تمرکز روی عنصر آغازگر باقی می ماند، و از آنجایی که پاپاور معمولاً بلافاصله از ماشه در ساختار سند پیروی نمی کند، هیچ تضمینی برای حرکت به جلو/فشار دادن وجود ندارد.TABکاربر صفحه کلید را به خود پاپاور منتقل می کند. به طور خلاصه، افزودن ساده کنترل‌های تعاملی به یک پاپ‌اور احتمالاً این کنترل‌ها را برای کاربران صفحه‌کلید و کاربران فناوری‌های کمکی غیرقابل دسترس/غیرقابل استفاده می‌کند، یا حداقل یک ترتیب تمرکز کلی غیرمنطقی را ایجاد می‌کند. در این موارد، به جای آن از یک گفتگوی مودال استفاده کنید.

گزینه ها

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

توجه داشته باشید که به دلایل امنیتی نمی توان گزینه sanitizeهای sanitizeFnو whiteListرا با استفاده از ویژگی های داده ارائه کرد.
نام تایپ کنید پیش فرض شرح
انیمیشن بولی درست است، واقعی یک انتقال محو شدن 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 به آن متصل است فراخوانی می شود.

ماشه رشته 'کلیک' چگونه پاپاور راه اندازی می شود - کلیک کنید | شناور | تمرکز | کتابچه راهنمای. شما ممکن است چندین محرک عبور دهید. آنها را با فاصله جدا کنید. manualنمی توان با هیچ محرک دیگری ترکیب کرد.
انحراف شماره | رشته 0 جبران پوپاور نسبت به هدفش. برای اطلاعات بیشتر به اسناد افست پوپر مراجعه کنید .
جایگزینی رشته | آرایه تلنگر اجازه دهید مشخص کنید که پوپر از کدام موقعیت در بازگشت استفاده می کند. برای اطلاعات بیشتر به اسناد رفتاری پوپر مراجعه کنید
کلاس سفارشی رشته | عملکرد ''

وقتی پاپاور نشان داده شد، کلاس‌ها را به آن اضافه کنید. توجه داشته باشید که این کلاس ها علاوه بر کلاس های مشخص شده در قالب اضافه خواهند شد. برای اضافه کردن چند کلاس، آنها را با فاصله از هم جدا کنید 'a b':

همچنین می‌توانید تابعی را ارسال کنید که باید یک رشته حاوی نام‌های کلاس اضافی را برگرداند.

مرز رشته | عنصر 'scrollParent' مرز محدودیت سرریز پاپاور. مقادیر 'viewport', 'window', 'scrollParent'یا مرجع HTMLElement (فقط جاوا اسکریپت) را می پذیرد. برای اطلاعات بیشتر به اسناد Popper's preventOverflow مراجعه کنید .
ضدعفونی کردن بولی درست است، واقعی پاکسازی را فعال یا غیرفعال کنید. در صورت فعال شدن 'template'، گزینه 'content'ها 'title'ضد عفونی خواهند شد. بخش ضدعفونی کننده را در مستندات جاوا اسکریپت ما ببینید.
لیست سفید هدف - شی مقدار پیش فرض شیئی که حاوی ویژگی ها و برچسب های مجاز است
sanitizeFn null | عملکرد خالی در اینجا می توانید عملکرد ضدعفونی کننده خود را ارائه دهید. اگر ترجیح می دهید از یک کتابخانه اختصاصی برای انجام پاکسازی استفاده کنید، می تواند مفید باشد.
popperConfig null | هدف - شی خالی برای تغییر تنظیمات Popper پیش‌فرض Bootstrap، به پیکربندی Popper مراجعه کنید

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

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

مواد و روش ها

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

همه متدهای 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...
})