פופ-אוברים
תיעוד ודוגמאות להוספת חלונות קופצים של 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 בצל.
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 על הפופ-אובר |
מְכוֹלָה | מחרוזת | אלמנט | שֶׁקֶר | שֶׁקֶר | מוסיף את הפופ-אובר לרכיב מסוים. דוגמה: |
תוֹכֶן | מחרוזת | אלמנט | פוּנקצִיָה | '' | ערך ברירת המחדל של תוכן אם אם ניתנת פונקציה, היא תיקרא |
לְעַכֵּב | מספר | לְהִתְנַגֵד | 0 | השהיה בהצגה והסתרה של הפופ-אובר (ms) - אינו חל על סוג טריגר ידני אם מסופק מספר, השהיה מוחל גם על הסתרה/הצגה מבנה האובייקט הוא: |
html | בוליאני | שֶׁקֶר | הכנס HTML לתוך הפופ-אובר. אם False, text השיטה של jQuery תשמש להכנסת תוכן ל-DOM. השתמש בטקסט אם אתה מודאג מהתקפות XSS. |
מיקום | מחרוזת | פוּנקצִיָה | 'ימין' | כיצד למקם את הפופ-אובר - אוטומטי | למעלה | תחתון | שמאל | ימין. כאשר נעשה שימוש בפונקציה לקביעת המיקום, היא נקראת עם צומת DOM המוקפץ כארגומנט הראשון שלה והצומת המפעיל DOM כצומת השני שלו. ההקשר |
בוחר | מחרוזת | שֶׁקֶר | שֶׁקֶר | אם מסופק בורר, אובייקטים קופצים יואצלו ליעדים שצוינו. בפועל, זה משמש כדי לאפשר לתוכן HTML דינמי להוסיף חלונות קופצים. ראה זאת ודוגמה אינפורמטיבית . |
תבנית | חוּט | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
בסיס HTML לשימוש בעת יצירת הפופ-אובר. הפופ-אובר הפופ-אובר
רכיב העטיפה החיצוני ביותר צריך לכלול את |
כותרת | מחרוזת | אלמנט | פוּנקצִיָה | '' | ערך כותרת ברירת מחדל אם אם ניתנת פונקציה, היא תיקרא |
הדק | חוּט | 'נְקִישָׁה' | כיצד מופעל פופ-אובר - לחץ על | לרחף | מיקוד | מדריך ל. אתה יכול לעבור טריגרים מרובים; להפריד ביניהם עם רווח. manual לא ניתן לשלב עם כל טריגר אחר. |
לְקַזֵז | מספר | חוּט | 0 | קיזוז הפופ-אובר ביחס למטרה שלו. למידע נוסף עיין במסמכי האופסט של פופר . |
מיקום fallback | מחרוזת | מַעֲרָך | 'לְהַעִיף' | אפשר לציין באיזו עמדה פופר ישתמש ב-fallback. למידע נוסף עיין במסמכי ההתנהגות של פופר |
customClass | מחרוזת | פוּנקצִיָה | '' | הוסף כיתות לפופ-אובר כאשר הוא מוצג. שימו לב ששיעורים אלו יתווספו בנוסף לכל השיעורים המצוינים בתבנית. כדי להוסיף מחלקות מרובות, הפרד אותן באמצעות רווחים: אתה יכול גם להעביר פונקציה שאמורה להחזיר מחרוזת אחת המכילה שמות מחלקות נוספים. |
גְבוּל | מחרוזת | אֵלֵמֶנט | 'scrollPrent' | גבול אילוץ הצפת של הפופ-אובר. מקבל את הערכים של 'viewport' , 'window' , 'scrollParent' או הפניה ל-HTMLElement (JavaScript בלבד). למידע נוסף עיין במסמכי preventOverflow של Popper . |
לחטא | בוליאני | נָכוֹן | הפעל או השבת את החיטוי. אם יופעל 'template' , 'content' והאפשרויות 'title' יעברו חיטוי. עיין בסעיף חיטוי בתיעוד ה-JavaScript שלנו . |
רשימה לבנה | לְהִתְנַגֵד | ערך ברירת מחדל | אובייקט המכיל תכונות ותגים מותרים |
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')
מחליף את הפופ-אובר של רכיב. חוזר אל המתקשר לפני שהפופ-אובר הוצג או הוסתר בפועל (כלומר לפני שהאירוע 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...
})