Source

פּאָפּאָווערס

דאַקיומענטיישאַן און ביישפילן פֿאַר אַדינג באָאָטסטראַפּ פּאָפּאָווערס, ווי די געפֿונען אין יאָס, צו קיין עלעמענט אויף דיין פּלאַץ.

איבערבליק

טינגז צו וויסן ווען איר נוצן די פּאָפּאָווער פּלוגין:

פּאָפּאָווערס פאַרלאָזנ זיך די 3rd פּאַרטיי ביבליאָטעק Popper.js פֿאַר פּאַזישאַנינג. איר מוזן אַרייַננעמען popper.min.js איידער bootstrap.js אָדער נוצן bootstrap.bundle.min.js/ bootstrap.bundle.jsוואָס כּולל Popper.js אין סדר פֿאַר פּאָפּאָווערס צו אַרבעטן!
פּאָפּאָווערס דאַרפן די טאָאָלטיפּ פּלוגין ווי אַ דעפּענדענסי.
אויב איר בויען אונדזער דזשאַוואַסקריפּט פֿון מקור, עס ריקווייערזutil.js .
פּאָפּאָווערס זענען אַפּט-אין פֿאַר פאָרשטעלונג סיבות, אַזוי איר מוזן ינישאַלייז זיי זיך .
נול-לענג titleאון contentוואַלועס וועט קיינמאָל ווייַזן אַ פּאָפּאָווער.
ספּעציפיצירן container: 'body'צו ויסמיידן רענדערינג פּראָבלעמס אין מער קאָמפּליצירט קאַמפּאָונאַנץ (ווי אונדזער אַרייַנשרייַב גרופּעס, קנעפּל גרופּעס, עטק).
טריגערינג פּאָפּאָווערס אויף פאַרבאָרגן עלעמענטן וועט נישט אַרבעטן.
פּאָפּאָווערס פֿאַר .disabledאָדער disabledעלעמענטן מוזן זיין טריגערד אויף אַ ראַפּער עלעמענט.
ווען טריגערד פון אַנגקערז וואָס ייַנוויקלען אַריבער קייפל שורות, פּאָפּאָווערס וועט זיין סענטערד צווישן די אַנגקערז ' קוילעלדיק ברייט. ניצן .text-nowrapאויף דיין <a>s צו ויסמיידן דעם נאַטור.
פּאָפּאָווערס מוזן זיין פאַרבאָרגן איידער זייער קאָראַספּאַנדינג עלעמענטן זענען אַוועקגענומען פון די DOM.

האַלטן לייענען צו זען ווי פּאָפּאָווערס אַרבעט מיט עטלעכע ביישפילן.

בייַשפּיל: געבן פּאָפּאָווערס אומעטום

איין וועג צו ינישאַלייז אַלע פּאָפּאָווערס אויף אַ בלאַט איז צו סעלעקטירן זיי לויט זייער 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="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"אַזוי אַז די פּאָפּאָווער איז ווי באַלדיק וויזשאַוואַל באַמערקונגען צו דיין יוזערז, ווייַל זיי קען נישט דערוואַרטן צו געבן אַ קליק אויף אַ פאַרקריפּלט עלעמענט.

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

אָפּציעס

אָפּציעס קענען זיין דורכגעגאנגען דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט. פֿאַר דאַטן אַטריביוץ, צולייגן די אָפּציע נאָמען צו data-, ווי אין data-animation="".

נאָמען	טיפּ	פעליקייַט	באַשרייַבונג
אַנאַמיישאַן	בוליאַן	אמת	צולייגן אַ CSS וועלקן יבערגאַנג צו די פּאָפּאָווער
קאנטעינער	שטריקל \| עלעמענט \| פאַלש	פאַלש	אַפּענדז די פּאָפּאָווער צו אַ ספּעציפיש עלעמענט. בייַשפּיל: `container: 'body'`. דער אָפּציע איז דער הויפּט נוציק ווייַל עס אַלאַוז איר צו שטעלן די פּאָפּאָווער אין די לויפן פון דעם דאָקומענט לעבן די טריגערינג עלעמענט - וואָס וועט פאַרמייַדן די פּאָפּאָווער פון פלאָוטינג אַוועק פון די טריגערינג עלעמענט בעשאַס אַ פֿענצטער גרייס.
אינהאַלט	שטריקל \| עלעמענט \| פֿונקציע	''	פעליקייַט אינהאַלט ווערט אויב `data-content`אַטריביוט איז נישט פאָרשטעלן. אויב אַ פֿונקציע איז געגעבן, עס וועט זיין גערופֿן מיט זיין `this`רעפֿערענץ שטעלן צו די עלעמענט וואָס די פּאָפּאָווער איז אַטאַטשט צו.
פאַרהאַלטן	נומער \| כייפעץ	0	פאַרהאַלטן ווייזן און כיידינג די פּאָפּאָווער (מס) - איז נישט אַפּלייז צו מאַנואַל צינגל טיפּ אויב אַ נומער איז סאַפּלייד, פאַרהאַלטן איז געווענדט צו ביידע באַהאַלטן / ווייַזן כייפעץ סטרוקטור איז:`delay: { "show": 500, "hide": 100 }`
HTML	בוליאַן	פאַלש	אַרייַנלייגן HTML אין די פּאָפּאָווער. אויב פאַלש, די `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	אָפסעט פון די פּאָפּאָווער קאָרעוו צו זייַן ציל. פֿאַר מער אינפֿאָרמאַציע אָפּשיקן צו Popper.js ס פאָטאָ דאָקומענטן .
פאַלבאַקקפּלייסמאַנט	שטריקל \| מענגע	'פליפּן'	לאָזן צו ספּעציפיצירן וואָס שטעלע פּאָפּער וועט נוצן אויף פאַלבאַק. פֿאַר מער אינפֿאָרמאַציע אָפּשיקן צו Popper.js ס נאַטור דאָקומענטן
גרענעץ	שטריקל \| עלעמענט	'סקראָלפּאַרענט'	אָוווערפלאָו קאַנסטריינץ גרענעץ פון די פּאָפּאָווער. אַקסעפּץ די וואַלועס פון `'viewport'`, `'window'`, `'scrollParent'`, אָדער אַן HTMLElement דערמאָנען (בלויז דזשאַוואַסקריפּט). פֿאַר מער אינפֿאָרמאַציע אָפּשיקן צו Popper.js's preventOverflow docs .

דאַטאַ אַטריביוץ פֿאַר יחיד פּאָפּאָווערס

אָפּציעס פֿאַר יחיד פּאָפּאָווערס קענען אַלטערנאַטיוועלי זיין ספּעסיפיעד דורך די נוצן פון דאַטן אַטריביוץ, ווי דערקלערט אויבן.

מעטהאָדס

אַסינטשראָנאָוס מעטהאָדס און טראַנזישאַנז

אַלע אַפּי מעטהאָדס זענען ייסינגקראַנאַס און אָנהייבן אַ יבערגאַנג . זיי צוריקקומען צו די קאַללער ווי באַלד ווי די יבערגאַנג איז סטאַרטעד אָבער איידער עס ענדס . אין אַדישאַן, אַ מעטאָד רופן אויף אַ יבערגאַנג קאָמפּאָנענט וועט זיין איגנאָרירט .

זען אונדזער דזשאַוואַסקריפּט דאַקיומענטיישאַן פֿאַר מער אינפֿאָרמאַציע.

`$().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…
})