פּאָפּאָווערס
דאַקיומענטיישאַן און ביישפילן פֿאַר אַדינג באָאָטסטראַפּ פּאָפּאָווערס, ווי די געפֿונען אין יאָס, צו קיין עלעמענט אויף דיין פּלאַץ.
איבערבליק
טינגז צו וויסן ווען איר נוצן די פּאָפּאָווער פּלוגין:
- פּאָפּאָווערס פאַרלאָזנ זיך די 3rd פּאַרטיי ביבליאָטעק פּאָפּער פֿאַר פּאַזישאַנינג. איר מוזן אַרייַננעמען popper.min.js איידער bootstrap.js אָדער נוצן
bootstrap.bundle.min.js
/bootstrap.bundle.js
וואָס כּולל פּאָפּער אין סדר פֿאַר פּאָפּאָווערס צו אַרבעטן! - פּאָפּאָווערס דאַרפן די טאָאָלטיפּ פּלוגין ווי אַ דעפּענדענסי.
- אויב איר בויען אונדזער דזשאַוואַסקריפּט פֿון מקור, עס ריקווייערז
util.js
. - פּאָפּאָווערס זענען אַפּט-אין פֿאַר פאָרשטעלונג סיבות, אַזוי איר מוזן ינישאַלייז זיי זיך .
- נול-לענג
title
אוןcontent
וואַלועס וועט קיינמאָל ווייַזן אַ פּאָפּאָווער. - ספּעציפיצירן
container: 'body'
צו ויסמיידן רענדערינג פּראָבלעמס אין מער קאָמפּליצירט קאַמפּאָונאַנץ (ווי אונדזער אַרייַנשרייַב גרופּעס, קנעפּל גרופּעס, עטק). - טריגערינג פּאָפּאָווערס אויף פאַרבאָרגן עלעמענטן וועט נישט אַרבעטן.
- פּאָפּאָווערס פֿאַר
.disabled
אָדערdisabled
עלעמענטן מוזן זיין טריגערד אויף אַ ראַפּער עלעמענט. - ווען טריגערד פון אַנגקערז וואָס ייַנוויקלען אַריבער קייפל שורות, פּאָפּאָווערס וועט זיין סענטערד צווישן די אַנגקערז ' קוילעלדיק ברייט. ניצן
.text-nowrap
אויף דיין<a>
s צו ויסמיידן דעם נאַטור. - פּאָפּאָווערס מוזן זיין פאַרבאָרגן איידער זייער קאָראַספּאַנדינג עלעמענטן זענען אַוועקגענומען פון די DOM.
- פּאָפּאָווערס קענען זיין טריגערד דאַנק צו אַן עלעמענט אין אַ שאָטן DOM.
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
אַטריביוט זענען נישט ינטעראַקטיוו, טייַטש די ניצערס קענען נישט האָווער אָדער גיט זיי צו צינגל אַ פּאָפּאָווער (אָדער טאָאָלטיפּ). ווי אַ וואָרקאַראָונד, איר וועט וועלן צו צינגל די פּאָפּאָווער פֿון אַ ראַפּער <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)
גפּו אַקסעלעריישאַן
פּאָפּאָווערס מאל דערשייַנען בלערי אויף Windows 10 דעוויסעס רעכט צו גפּו אַקסעלעריישאַן און אַ מאַדאַפייד סיסטעם דפּי. די וואָרקאַראָונד פֿאַר דעם אין v4 איז צו דיסייבאַל גפּו אַקסעלעריישאַן ווי דארף אויף דיין פּאָפּאָווערס.
פארגעלייגט פאַרריכטן:
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))
מאַכן פּאָפּאָווערס אַרבעט פֿאַר קלאַוויאַטור און אַסיסטאַנט טעכנאָלאָגיע ניצערס
צו לאָזן קלאַוויאַטור ניצערס צו אַקטאַווייט דיין פּאָפּאָווערס, איר זאָל נאָר לייגן זיי צו HTML עלעמענטן וואָס זענען טראַדישאַנאַלי קלאַוויאַטור-פאָוקאָוסאַבאַל און ינטעראַקטיוו (אַזאַ ווי לינקס אָדער פאָרעם קאָנטראָלס). כאָטש אַרביטראַריש HTML עלעמענטן (אַזאַ ווי <span>
s) קענען זיין פאָוקיסטאַבאַל דורך אַדינג די tabindex="0"
אַטריביוט, דאָס וועט לייגן פּאַטענטשאַלי אַנויינג און קאַנפיוזינג קוויטל סטאַפּס אויף ניט-ינטעראַקטיוו עלעמענטן פֿאַר קלאַוויאַטור יוזערז, און רובֿ אַסיסטיוו טעקנאַלאַדזשיז דערווייַל מעלדן די אינהאַלט פון די פּאָפּאָווער אין דעם סיטואַציע. . דערצו, טאָן ניט פאַרלאָזנ זיך בלויז hover
די צינגל פֿאַר דיין פּאָפּאָווערס, ווייַל דאָס וועט מאַכן זיי אוממעגלעך צו צינגל פֿאַר קלאַוויאַטור יוזערז.
כאָטש איר קענען אַרייַנלייגן רייַך, סטראַקטשערד HTML אין פּאָפּאָווערס מיט די html
אָפּציע, מיר שטארק רעקאָמענדירן אַז איר ויסמיידן צו לייגן אַ יבעריק סומע פון אינהאַלט. דער וועג פּאָפּאָווערס איצט אַרבעט איז אַז, אַמאָל געוויזן, זייער אינהאַלט איז טייד צו די צינגל עלעמענט מיט די aria-describedby
אַטריביוט. ווי אַ רעזולטאַט, דער גאנצער פון די פּאָפּאָווער ס אינהאַלט וועט זיין מודיע צו אַסיסטיוו טעכנאָלאָגיע יוזערז ווי איין לאַנג, אַנינעראַפּטיד טייַך.
דערצו, כאָטש עס איז מעגלעך צו אַרייַננעמען ינטעראַקטיוו קאָנטראָלס (אַזאַ ווי פאָרעם עלעמענטן אָדער פֿאַרבינדונגען) אין דיין פּאָפּאָווער (דורך אַדינג די עלעמענטן צו די whiteList
אָדער ערלויבט אַטריביוץ און טאַגס), זיין אַווער אַז דערווייַל די פּאָפּאָווער קען נישט פירן קלאַוויאַטור פאָקוס סדר. ווען אַ קלאַוויאַטור באַניצער עפֿנט אַ פּאָפּאָווער, פאָקוס בלייבט אויף די טריגערינג עלעמענט, און ווי דער פּאָפּאָווער יוזשאַוואַלי טוט נישט מיד נאָכפאָלגן די צינגל אין די דאָקומענט סטרוקטור, עס איז קיין גאַראַנטירן אַז פאָרויס / דרינגלעךTABוועט מאַך אַ קלאַוויאַטור באַניצער אין די פּאָפּאָווער זיך. אין קורץ, פשוט אַדינג ינטעראַקטיוו קאָנטראָלס צו אַ פּאָפּאָווער איז מסתּמא צו מאַכן די קאָנטראָלס אַנריאַטשאַבאַל / אַניוזאַבאַל פֿאַר קלאַוויאַטור יוזערז און יוזערז פון אַסיסטיוו טעקנאַלאַדזשיז, אָדער בייַ מינדסטער מאַכן אַ ילאַדזשיקאַל קוילעלדיק פאָקוס סדר. אין די קאַסעס, באַטראַכטן ניצן אַ מאָדאַל דיאַלאָג אַנשטאָט.
אָפּציעס
אָפּציעס קענען זיין דורכגעגאנגען דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט. פֿאַר דאַטן אַטריביוץ, צולייגן די אָפּציע נאָמען צו data-
, ווי אין data-animation=""
.
sanitize
,
sanitizeFn
און
whiteList
אָפּציעס קענען ניט זיין סאַפּלייד מיט דאַטן אַטריביוץ.
נאָמען | טיפּ | פעליקייַט | באַשרייַבונג |
---|---|---|---|
אַנאַמיישאַן | בוליאַן | אמת | צולייגן אַ CSS וועלקן יבערגאַנג צו די פּאָפּאָווער |
קאנטעינער | שטריקל | עלעמענט | פאַלש | פאַלש | אַפּענדז די פּאָפּאָווער צו אַ ספּעציפיש עלעמענט. בייַשפּיל: |
אינהאַלט | שטריקל | עלעמענט | פֿונקציע | '' | פעליקייַט אינהאַלט ווערט אויב אויב אַ פֿונקציע איז געגעבן, עס וועט זיין גערופֿן מיט זיין |
פאַרהאַלטן | נומער | כייפעץ | 0 | פאַרהאַלטן ווייזן און כיידינג די פּאָפּאָווער (מס) - איז נישט אַפּלייז צו מאַנואַל צינגל טיפּ אויב אַ נומער איז סאַפּלייד, פאַרהאַלטן איז געווענדט צו ביידע באַהאַלטן / ווייַזן כייפעץ סטרוקטור איז: |
HTML | בוליאַן | פאַלש | אַרייַנלייגן HTML אין די פּאָפּאָווער. אויב פאַלש, jQuery ס text אופֿן וועט זיין געניצט צו אַרייַנלייגן אינהאַלט אין די 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 | אָפסעט פון די פּאָפּאָווער קאָרעוו צו זייַן ציל. פֿאַר מער אינפֿאָרמאַציע אָפּשיקן צו פּאָפּער ס פאָטאָ דאָקומענטן . |
פאַלבאַקקפּלייסמאַנט | שטריקל | מענגע | 'פליפּן' | לאָזן צו ספּעציפיצירן וואָס שטעלע פּאָפּער וועט נוצן אויף פאַלבאַק. פֿאַר מער אינפֿאָרמאַציע אָפּשיקן צו פּאָפּער ס נאַטור דאָקס |
customClass | שטריקל | פֿונקציע | '' | לייג קלאסן צו די פּאָפּאָווער ווען עס איז געוויזן. באַמערקונג אַז די קלאסן וועט זיין צוגעגעבן אין אַדישאַן צו קיין קלאסן ספּעסיפיעד אין די מוסטער. צו לייגן קייפל קלאסן, באַזונדער זיי מיט ספּייסאַז: איר קענט אויך פאָרן אַ פֿונקציע וואָס זאָל צוריקקומען אַ איין שטריקל מיט נאָך קלאַס נעמען. |
גרענעץ | שטריקל | עלעמענט | 'סקראָלפּאַרענט' | אָוווערפלאָו קאַנסטריינץ גרענעץ פון די פּאָפּאָווער. אַקסעפּץ די וואַלועס פון 'viewport' , 'window' , 'scrollParent' , אָדער אַן HTMLElement דערמאָנען (בלויז דזשאַוואַסקריפּט). פֿאַר מער אינפֿאָרמאַציע, אָפּשיקן צו Popper's preventOverflow docs . |
סאַניטיזירן | בוליאַן | אמת | געבן אָדער דיסייבאַל די סאַניטיזיישאַן. אויב אַקטיווייטיד 'template' , 'content' און 'title' אָפּציעס וועט זיין סאַניטייזד. זען די סאַניטיזער אָפּטיילונג אין אונדזער דזשאַוואַסקריפּט דאַקיומענטיישאַן . |
ווייַס רשימה | כייפעץ | פעליקייַט ווערט | אָבדזשעקט וואָס כּולל ערלויבט אַטריביוץ און טאַגס |
sanitizeFn | null | פֿונקציע | null | דאָ איר קענען צושטעלן דיין אייגענע סאַניטיז פונקציע. דאָס קען זיין נוציק אויב איר בעסער וועלן צו נוצן אַ דעדאַקייטאַד ביבליאָטעק צו דורכפירן סאַניטיזיישאַן. |
popperConfig | null | כייפעץ | null | צו טוישן די פעליקייַט פּאָפּער קאַנפיגיעריישאַן פון Bootstrap, זען פּאָפּער ס קאַנפיגיעריישאַן |
דאַטאַ אַטריביוץ פֿאַר יחיד פּאָפּאָווערס
אָפּציעס פֿאַר יחיד פּאָפּאָווערס קענען אַלטערנאַטיוועלי זיין ספּעסיפיעד דורך די נוצן פון דאַטן אַטריביוץ, ווי דערקלערט אויבן.
מעטהאָדס
אַסינטשראָנאָוס מעטהאָדס און טראַנזישאַנז
אַלע אַפּי מעטהאָדס זענען ייסינגקראַנאַס און אָנהייבן אַ יבערגאַנג . זיי צוריקקומען צו די קאַללער ווי באַלד ווי די יבערגאַנג איז סטאַרטעד אָבער איידער עס ענדס . אין אַדישאַן, אַ מעטאָד רופן אויף אַ יבערגאַנג קאָמפּאָנענט וועט זיין איגנאָרירט .
זען אונדזער דזשאַוואַסקריפּט דאַקיומענטיישאַן פֿאַר מער אינפֿאָרמאַציע .
$().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 בייַשפּיל אופֿן איז גערופן. |
געוויזן.בס.פּאָפּאָווער | דער געשעעניש איז פייערד ווען די פּאָפּאָווער איז געווען קענטיק צו דער באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן). |
hide.bs.popover | דעם געשעעניש איז פייערד מיד ווען דער hide בייַשפּיל אופֿן איז גערופן. |
hidden.bs.popover | דער געשעעניש איז פייערד ווען די פּאָפּאָווער איז פאַרטיק צו זיין פאַרבאָרגן פון די באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן). |
ינסערטאַד.בס.פּאָפּאָווער | דער געשעעניש איז פייערד נאָך די show.bs.popover געשעעניש ווען די פּאָפּאָווער מוסטער איז צוגעגעבן צו די DOM. |
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})