Source

פופ-אוברים

תיעוד ודוגמאות להוספת חלונות קופצים של 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אלמנטים ברכיב עטיפה.
  • כאשר מופעלים מעוגנים העוטפים קווים מרובים, הפופ-אוברים יתרכזו בין הרוחב הכללי של העוגנים. השתמש white-space: nowrap;ב- <a>s שלך כדי להימנע מהתנהגות זו.
  • יש להסתיר חלונות קופצים לפני שהרכיבים התואמים שלהם יוסרו מה-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>בתג, לא בתג<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התכונה אינם אינטראקטיביים, כלומר המשתמשים אינם יכולים לרחף או ללחוץ עליהם כדי להפעיל פופ-אובר (או טיפים). כדרך לעקיפת הבעיה, תרצה להפעיל את הפופ-אובר מתוך עטיפה <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)

אפשרויות

ניתן להעביר אפשרויות באמצעות תכונות נתונים או JavaScript. עבור תכונות נתונים, הוסף את שם האפשרות ל- data-, כמו ב- data-animation="".

שֵׁם סוּג בְּרִירַת מֶחדָל תיאור
אנימציה בוליאני נָכוֹן החל מעבר דהייה של CSS על הפופ-אובר
מְכוֹלָה מחרוזת | אלמנט | שֶׁקֶר שֶׁקֶר

מוסיף את הפופ-אובר לרכיב מסוים. דוגמה: container: 'body'. אפשרות זו שימושית במיוחד בכך שהיא מאפשרת למקם את הפופ-אובר בזרימת המסמך ליד האלמנט המפעיל - מה שימנע מהפופ-אובר להתרחק מהאלמנט המפעיל במהלך שינוי גודל החלון.

תוֹכֶן מחרוזת | אלמנט | פוּנקצִיָה ''

ערך ברירת המחדל של תוכן אם data-contentהמאפיין אינו קיים.

אם ניתנת פונקציה, היא תיקרא thisכשההתייחסות שלה מוגדרת לאלמנט שאליו מחובר הפופ-אובר.

לְעַכֵּב מספר | לְהִתְנַגֵד 0

עיכוב הצגת והסתרת הפופ-אובר (ms) - אינו חל על סוג טריגר ידני

אם מסופק מספר, השהיה מוחל גם על הסתרה/הצגה

מבנה האובייקט הוא:delay: { "show": 500, "hide": 100 }

html בוליאני שֶׁקֶר הכנס HTML לתוך הפופ-אובר. אם False, textהשיטה של ​​jQuery תשמש להכנסת תוכן ל-DOM. השתמש בטקסט אם אתה מודאג מהתקפות XSS.
מיקום מחרוזת | פוּנקצִיָה 'ימין'

כיצד למקם את הפופ-אובר - אוטומטי | למעלה | תחתון | שמאל | ימין.
כאשר autoצוין, הוא יכוון מחדש באופן דינמי את הפופ-אובר.

כאשר משתמשים בפונקציה לקביעת המיקום, היא נקראת עם צומת DOM המוקפץ כארגומנט הראשון שלה והצומת המפעיל DOM כצומת השני שלו. ההקשר thisמוגדר למופע המוקפץ.

בוחר מחרוזת | שֶׁקֶר שֶׁקֶר אם מסופק בורר, אובייקטים קופצים יואצלו ליעדים שצוינו. בפועל, זה משמש כדי לאפשר לתוכן 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כשההתייחסות שלה מוגדרת לאלמנט שאליו מחובר הפופ-אובר.

הדק חוּט 'נְקִישָׁה' כיצד מופעל פופ-אובר - לחץ על | לרחף | מיקוד | מדריך ל. אתה יכול לעבור טריגרים מרובים; להפריד ביניהם עם רווח. לא ניתן לשלב את 'ידני' עם כל טריגר אחר.
לְקַזֵז מספר | חוּט 0 קיזוז הפופ-אובר ביחס ליעדו. למידע נוסף עיין במסמכי האופסט של Popper.js .
מיקום fallback מחרוזת | מַעֲרָך 'לְהַעִיף' אפשר לציין באיזו עמדה פופר ישתמש ב-fallback. למידע נוסף עיין במסמכי ההתנהגות של Popper.js
גְבוּל מחרוזת | אֵלֵמֶנט 'סcrollPrent' גבול אילוץ הצפת של הפופ-אובר. מקבל את הערכים של 'viewport', 'window', 'scrollParent'או הפניה ל-HTMLElement (JavaScript בלבד). למידע נוסף עיין במסמכי preventOverflow של Popper.js .

תכונות נתונים עבור פופ-אובר בודדים

לחלופין ניתן לציין אפשרויות עבור פופ-אובר בודדים באמצעות שימוש בתכונות נתונים, כפי שהוסבר לעיל.

שיטות

שיטות ומעברים אסינכרוניים

כל שיטות ה-API הן אסינכרוניות ומתחילות מעבר . הם חוזרים למתקשר ברגע שהמעבר מתחיל אבל לפני שהוא מסתיים . בנוסף, תתעלם מקריאת שיטה על רכיב מעבר .

עיין בתיעוד JavaScript שלנו למידע נוסף.

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

אירועים

סוג אירוע תיאור
show.bs.popover אירוע זה מופעל מיד כאשר showשיטת המופע נקראת.
מוצג.bs.popover אירוע זה מופעל כאשר הפופ-אובר נעשה גלוי למשתמש (יחכה לסיום מעברי CSS).
hide.bs.popover אירוע זה מופעל מיד כאשר hideשיטת המופע נקראה.
hidden.bs.popover אירוע זה מופעל כאשר הפופ-אובר סיים להיות מוסתר מהמשתמש (יחכה לסיום מעברי CSS).
inserted.bs.popover אירוע זה מופעל לאחר show.bs.popoverהאירוע כאשר תבנית הפופ-אובר נוספה ל-DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})