פופ-אוברים

תיעוד ודוגמאות להוספת חלונות קופצים של Bootstrap, כמו אלה שנמצאים ב-iOS, לכל רכיב באתר שלך.

סקירה כללית

דברים שכדאי לדעת בעת שימוש בתוסף popover:

• Popovers מסתמכים על ספריית הצד השלישי Popper.js לצורך מיקום. עליך לכלול popper.min.js לפני bootstrap.js או להשתמש ב- bootstrap.bundle.min.js/ bootstrap.bundle.jsשמכיל את Popper.js על מנת ש-popovers יפעלו!
• חלונות קופצים דורשים את הפלאגין של תיאור כלי כתלות.
• אם אתה בונה את JavaScript שלנו מהמקור, זה דורשutil.js .
• חלונות קופצים ניתנים להצטרפות מסיבות ביצועים, לכן עליך לאתחל אותם בעצמך .
• אורך אפס titleוערכים contentלעולם לא יראו פופ-אובר.
• ציין container: 'body'כדי להימנע מעיבוד בעיות ברכיבים מורכבים יותר (כמו קבוצות הקלט שלנו, קבוצות לחצנים וכו').
• הפעלת popovers על אלמנטים מוסתרים לא תעבוד.
• יש להפעיל פופ-אובר עבור אלמנטים .disabledאו disabledאלמנטים ברכיב עטיפה.
• כאשר מופעלים מעוגנים העוטפים קווים מרובים, הפופ-אוברים יתרכזו בין הרוחב הכללי של העוגנים. השתמש .text-nowrapב- <a>s שלך כדי להימנע מהתנהגות זו.
• יש להסתיר חלונות קופצים לפני שהרכיבים התואמים שלהם יוסרו מה-DOM.
• ניתן להפעיל פופ-אובר הודות לאלמנט בתוך DOM בצל.

המשך לקרוא כדי לראות כיצד פופ-אובר עובד עם כמה דוגמאות.

דוגמה: אפשר פופ-אובר בכל מקום

דרך אחת לאתחל את כל הפופ-אוברים בדף תהיה לבחור אותם לפי data-toggleהתכונה שלהם:

$(function () {
  $('[data-toggle="popover"]').popover()
})

דוגמה: שימוש containerבאפשרות

כאשר יש לך כמה סגנונות ברכיב אב שמפריעים ל-popover, תרצה לציין התאמה אישית containerכך שה-HTML של ה-pover יופיע בתוך הרכיב הזה במקום זאת.

$(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הרכיב המושבת.

עבור מפעילי פופ-אובר מושבתים, ייתכן שתעדיף גם data-trigger="hover"כך שה-pover יופיע כמשוב ויזואלי מיידי למשתמשים שלך, מכיוון שהם עשויים שלא לצפות ללחוץ על אלמנט מושבת.

<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)

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

אפשרויות

ניתן להעביר אפשרויות באמצעות תכונות נתונים או 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...
})