in English

פופ-אוברים

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

סקירה כללית

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

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

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

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

דרך אחת לאתחל את כל הפופ-אוברים בדף תהיה לבחור אותם לפי 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="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התכונה אינם אינטראקטיביים, כלומר המשתמשים אינם יכולים לרחף או ללחוץ עליהם כדי להפעיל פופ-אובר (או טיפים). כדרך לעקיפת הבעיה, תרצה להפעיל את הפופ-אובר מתוך עטיפה <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)
האצת GPU

חלונות קופצים מופיעים לפעמים מטושטשים במכשירי Windows 10 עקב האצת GPU ו-DPI של מערכת שונה. הדרך לעקיפת הבעיה ב-v4 היא להשבית את האצת ה-GPU לפי הצורך ב-Popovers שלך.

תיקון מוצע:

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

הפיכת חלונות קופצים לעבודה עבור משתמשי מקלדת וטכנולוגיה מסייעת

כדי לאפשר למשתמשי מקלדת להפעיל את הפופ-אובר שלך, עליך להוסיף אותם רק לרכיבי HTML שבאופן מסורתי ניתנים למיקוד מקלדת ואינטראקטיביים (כגון קישורים או פקדי טופס). למרות שניתן להפוך רכיבי HTML שרירותיים (כגון <span>s) לניתנים למיקוד על ידי הוספת tabindex="0"התכונה, הדבר יוסיף עצירות טאב שעלולות להיות מעצבנות ומבלבלות ברכיבים לא אינטראקטיביים עבור משתמשי מקלדת, ורוב הטכנולוגיות המסייעות כרגע אינן מכריזות על תוכן הפופ-אובר במצב זה . בנוסף, אל תסתמך רק על hoverהטריגר עבור הפופ-אובר שלך, מכיוון שהדבר יהפוך אותם לבלתי אפשריים להפעלה עבור משתמשי מקלדת.

בעוד שאתה יכול להוסיף HTML עשיר ומובנה בחלונות קופצים עם htmlהאפשרות, אנו ממליצים בחום להימנע מהוספת כמות מוגזמת של תוכן. הדרך שבה פופ-אוברים פועלים כעת היא שברגע שהוצגו, התוכן שלהם קשור לרכיב הטריגר עם aria-describedbyהתכונה. כתוצאה מכך, כל התוכן של הפופ-אובר יוכרז למשתמשי טכנולוגיה מסייעת כזרם אחד ארוך ללא הפרעה.

בנוסף, למרות שניתן לכלול גם פקדים אינטראקטיביים (כגון רכיבי טופס או קישורים) ב-Popover שלך (על ידי הוספת אלמנטים אלה whiteListלתכונות והתגים המותרים), שים לב שכרגע ה-Popover אינו מנהל את סדר המיקוד של המקלדת. כאשר משתמש מקלדת פותח פופ-אובר, הפוקוס נשאר באלמנט המפעיל, ומכיוון שה-popover בדרך כלל לא עוקב מיד אחרי הדק במבנה המסמך, אין ערובה לכך שמתקדם/לחיצהTABיעביר משתמש מקלדת לתוך הפופ-אובר עצמו. בקיצור, הוספת פקדים אינטראקטיביים לפופ-אובר עשויה להפוך את הפקדים הללו לבלתי ניתנים להשגה/לא שמישה עבור משתמשי מקלדת ומשתמשים בטכנולוגיות מסייעות, או לכל הפחות ליצור סדר מיקוד כולל לא הגיוני. במקרים אלה, שקול להשתמש במקום דו-שיח מודאלי.

אפשרויות

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

שים לב שמסיבות אבטחה לא ניתן לספק את האפשרויות sanitize, sanitizeFnו באמצעות תכונות נתונים.whiteList
שֵׁם סוּג בְּרִירַת מֶחדָל תיאור
אנימציה בוליאני נָכוֹן החל מעבר דהייה של 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כשההתייחסות שלה מוגדרת לאלמנט שאליו מחובר הפופ-אובר.

הדק חוּט 'נְקִישָׁה' כיצד מופעל פופ-אובר - לחץ על | לרחף | מיקוד | מדריך ל. אתה יכול לעבור טריגרים מרובים; להפריד ביניהם עם רווח. manualלא ניתן לשלב עם כל טריגר אחר.
לְקַזֵז מספר | חוּט 0 קיזוז הפופ-אובר ביחס למטרה שלו. למידע נוסף עיין במסמכי האופסט של פופר .
מיקום fallback מחרוזת | מַעֲרָך 'לְהַעִיף' אפשר לציין באיזו עמדה פופר ישתמש ב-fallback. למידע נוסף עיין במסמכי ההתנהגות של פופר
customClass מחרוזת | פוּנקצִיָה ''

הוסף כיתות לפופ-אובר כאשר הוא מוצג. שימו לב ששיעורים אלו יתווספו בנוסף לכל השיעורים המצוינים בתבנית. כדי להוסיף מחלקות מרובות, הפרד אותן באמצעות רווחים: 'a b'.

אתה יכול גם להעביר פונקציה שאמורה להחזיר מחרוזת אחת המכילה שמות מחלקות נוספים.

גְבוּל מחרוזת | אֵלֵמֶנט 'scrollPrent' גבול אילוץ הצפת של הפופ-אובר. מקבל את הערכים של 'viewport', 'window', 'scrollParent'או הפניה ל-HTMLElement (JavaScript בלבד). למידע נוסף עיין במסמכי preventOverflow של Popper .
לחטא בוליאני נָכוֹן הפעל או השבת את החיטוי. אם יופעל 'template', 'content'והאפשרויות 'title'יעברו חיטוי. עיין בסעיף חיטוי בתיעוד ה-JavaScript שלנו .
רשימה לבנה לְהִתְנַגֵד ערך ברירת מחדל אובייקט המכיל תכונות ותגים מותרים
sanitizeFn null | פוּנקצִיָה ריק כאן אתה יכול לספק פונקציית חיטוי משלך. זה יכול להיות שימושי אם אתה מעדיף להשתמש בספרייה ייעודית לביצוע חיטוי.
popperConfig null | לְהִתְנַגֵד ריק כדי לשנות את ברירת המחדל של תצורת Popper של Bootstrap, ראה את התצורה של Popper

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

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

שיטות

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

כל שיטות ה-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...
})