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

אראפקאפיע

ניצן באָאָצטראַפּ-מאָדאַל

$ ( '#מיין-מאָדאַל' ). מאָדאַל ( אָפּציעס )

אָפּציעס

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

מאַרקאַפּ

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

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "סטאַטיק" > קאַטער מאָדאַל </a>    

נאָטיץ אויב איר ווילן דיין מאָדאַל צו ופלעבן אין און אויס, נאָר לייגן אַ .fadeקלאַס צו דיין .modalעלעמענט (אָפּשיקן צו די דעמאָ צו זען דעם אין קאַמף).

מעטהאָדס

.מאָדאַל (אָפּציעס)

אַקטאַווייץ דיין אינהאַלט ווי אַ מאָדאַל. אַקסעפּץ אַן אַפּשאַנאַל אָפּציעס object.

$ ( '#מיין-מאָדאַל' ). מאָדאַל ({
  קלאַוויאַטור : אמת 
})

.modal('טאַגאַל')

מאַניואַלי טאַגאַלז אַ מאָדאַל.

$ ( '#מיין-מאָדאַל' ). מאָדאַל ( 'טאַגאַל' )

.modal('ווייַזן')

מאַניואַלי אָפּענס אַ מאָדאַל.

$ ( '#מיין-מאָדאַל' ). מאָדאַל ( 'ווייַזן' )

.modal('באַהאַלטן')

מאַניואַלי כיידז אַ מאָדאַל.

$ ( '#מיין-מאָדאַל' ). מאָדאַל ( 'באַהאַלטן' )

.modal(true)

רעטורנס אַן עלעמענטן מאָדאַל קלאַס בייַשפּיל.

$ ( '#מיין-מאָדאַל' ). מאָדאַל ( אמת )

נאָטיץ אַלטערנאַטיוועלי, דאָס קענען זיין ריטריווד מיט $().data('modal').

געשעענישן

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

געשעעניש	באַשרייַבונג
ווייַזן	דער געשעעניש פירט גלייך ווען דער showבייַשפּיל אופֿן איז גערופן.
געוויזן	דעם געשעעניש איז פייערד ווען די מאָדאַל איז געווען קענטיק צו דער באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן).
באַהאַלטן	דעם געשעעניש איז פייערד מיד ווען דער hideבייַשפּיל אופֿן איז גערופן.
פאַרבאָרגן	דער געשעעניש איז פייערד ווען די מאָדאַל איז פאַרטיק צו זיין פאַרבאָרגן פון דער באַניצער (וועט וואַרטן פֿאַר די CSS טראַנזישאַנז צו פאַרענדיקן).

$ ( '#מיין-מאָדאַל' ). בינדן ( 'פאַרבאָרגן' , פֿונקציע () {   
  // טאָן עפּעס ...
})

דעמאָ

קאַטער מאָדאַל

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

אראפקאפיע

ניצן bootstrap-dropdown.js

$ ( '#טאָפּבאַר' ). דראָפּדאָוון ()

מאַרקאַפּ

צו געשווינד לייגן דראָפּדאָוון פאַנגקשאַנאַליטי צו קיין נאַוו עלעמענט, נוצן די data-dropdownאַטריביוט. קיין גילטיק באָוץטראַפּ דראָפּדאָוון וועט אויטאָמאַטיש זיין אַקטיווייטיד.

<ul class = "טאַבס" > 
  <li class = "active" ><a href = "#" > היים </a></li>  
  <לי קלאַס = "דראָפּדאָוון" data-dropdown = "דראָפּדאָוון" >   
    <a href = "#" class = "dropdown-toggle" > דראָפּדאָוון </a>  
    <ul class = "דראָפּדאָוון מעניו" > 
      <li><a href = "#" > צווייטיק לינק </a></li> 
      <li><a href = "#" > עפּעס אַנדערש דאָ </a></li> 
      <לי קלאַס = "דיווידער" ></li> 
      <li><a href = "#" > אן אנדער לינק </a></li> 
    </ul>
  </li>
</ul>

באַמערקונג אויב דיין וי האט עטלעכע דראָפּדאָוונס, באַטראַכטן צו לייגן דעם data-dropdownאַטריביוט צו אַ מער באַטייטיק קאַנטיינער עלעמענט ווי .tabsאָדער .topbar.

מעטהאָדס

$().דראָפּדאָוון()

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

דעמאָ

דעם פּלוגין איז פֿאַר אַדינג די סקראָלספּי (אָטאַמאַטיק אַפּדייטינג נאַוו) ינטעראַקשאַן צו די באָאָטסטראַפּ טאַפּבאַר.

אראפקאפיע

ניצן bootstrap-scrollspy.js

$ ( '#טאָפּבאַר' ). סקראָלספּי ()

מאַרקאַפּ

צו לייכט לייגן סקראָלספּי נאַטור צו דיין נאַוויגאַציע, נאָר לייגן די data-scrollspyאַטריביוט צו די .topbar.

<div class = "topbar" data-scrollspy = "סקראָלספּי" > ... </div>   

מעטהאָדס

$().סקראָלספּי()

אַוטאָ אַקטאַווייץ נאַוויגאַציע קנעפּלעך דורך די מעגילע שטעלע פון ​​די באַניצער.

$ ( 'גוף > .טאָפּבאַר' ). סקראָלספּי ()

נאָטיץ Topbar אַנקער טאַגס מוזן האָבן סאַלוואַבאַל שייַן טאַרגאַץ. פֿאַר בייַשפּיל, אַ <a href="#home">home</a>מוזן שטימען צו עפּעס אין די דאָם ווי <div id="home"></div>.

.scrollSpy('דערפרישן')

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

$ ( 'גוף' ). scrollSpy ( 'דערפרישן' )

דעמאָ

טשעק די שפּיץ באַר נאַוויגאַציע אויף דעם בלאַט.

דעם פּלוגין אָפפערס נאָך פאַנגקשאַנאַליטי פֿאַר אָנפירונג קנעפּל שטאַט.

אראפקאפיע

ניצן bootstrap-buttons.js

$ ( '.טאַבס' ). קנעפּל ()

מעטהאָדס

$().קנעפּל('טאַגאַל')

טאַגאַלז שטופּן שטאַט. גיט btn די קוק אַז עס איז אַקטיווייטיד.

נאָטיץ איר קענען געבן אַוטאָ טאַגאַלינג פון אַ קנעפּל דורך ניצן די data-toggleאַטריביוט.

<button class = "btn" data-toggle = "טאַגאַל" > ... </button>   

$().button('לאָודינג')

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

<button class = "btn" data-loading-text = "לאָודינג שטאָפּן ..." > ... </button>   

$().button('באַשטעטיק')

רעסעץ קנעפּל שטאַט - סוואַפּס טעקסט צו אָריגינעל טעקסט.

$().קנעפּל(שטריקל)

רעסעץ קנעפּל שטאַט - סוואַפּס טעקסט צו קיין דאַטן דיפיינד טעקסט שטאַט.

<קנעפּל קלאַס = "בטן" data-complete-text = "פאַרטיק!" > ... </button>   
<שריפט>
  $('.btn').button('complete')
</script>

דעמאָ

לאָודינג דעמאָ באַשטימען דעמאָ

דעם פּלוגין מוסיף שנעל, דינאַמיש קוויטל און פּיל פאַנגקשאַנאַליטי.

אראפקאפיע

ניצן bootstrap-tabs.js

$ ( '.טאַבס' ). טאַבס ()

מאַרקאַפּ

איר קענען אַקטאַווייט אַ קוויטל אָדער פּיל נאַוויגאַציע אָן שרייבן קיין דזשאַוואַסקריפּט דורך פשוט געבן זיי אַ data-tabsאָדער data-pillsאַטריביוט.

 <ul class = "tabs" data-tabs = "טאַבס" > ... </ul>   

מעטהאָדס

$().טאַבס אָדער $().pills

אַקטאַווייץ קוויטל און פּיל פאַנגקשאַנאַליטי פֿאַר אַ געגעבן קאַנטיינער. קוויטל פֿאַרבינדונגען זאָל דערמאָנען די ID ס אין דעם דאָקומענט.

<ul class = "טאַבס" > 
  <li class = "active" ><a href = "#home" > היים </a></li>  
  <li><a href = "#פּראָפיל" > פּראָפיל </a></li> 
  <li><a href = "#מעססאַגעס" > אַרטיקלען </a></li> 
  <li><a href = "#סעטטינגס" > סעטטינגס </a></li> 
</ul>
 
<דייוו קלאַס = "פּיל-אינהאַלט" > 
  <div class = "active" id = "היים" > ... </div>  
  <div id = "פּראָפיל" > ... </div> 
  <div id = " אַרטיקלען " > ... </div> 
  <div id = "סעטטינגס" > ... </div> 
</div>
 
<שריפט>
  $ ( פונקציע () {  
    $ ( '.טאַבס' ). טאַבס ()
  })
</script>

געשעענישן

געשעעניש	באַשרייַבונג
טוישן	דעם געשעעניש פירז אויף קוויטל טוישן. ניצן event.targetאון event.relatedTargetצו ציל די אַקטיוו קוויטל און די פריערדיקע אַקטיוו קוויטל ריספּעקטיוולי.

$ ( '#.טאַבס' ). בינדן ( 'טוישן' , פֿונקציע ( e ) {   
  ע . ציל // אַקטיווייטיד קוויטל
  ע . RelatedTarget // פרייַערדיק קוויטל
})

דעמאָ

• היים
• פּראָפיל
• אַרטיקלען
• סעטטינגס
• דראָפּדאָוון
  • @פעט
  • @מדאָ

באַזירט אויף די ויסגעצייכנט jQuery.tipsy פּלוגין געשריבן דורך Jason Frame; טוויפּסי איז אַ דערהייַנטיקט ווערסיע, וואָס איז נישט פאַרלאָזנ אויף בילדער, ניצט css3 פֿאַר אַנאַמיישאַנז און דאַטן אַטריביוץ פֿאַר טיטל סטאָרידזש!

אראפקאפיע

ניצן bootstrap-twipsy.js

$ ( '#עקסאַמפּלע' ). טוויפּסי ( אָפּציעס )

אָפּציעס

נאָמען	טיפּ	פעליקייַט	באַשרייַבונג
ופלעבן	בוליאַן	אמת	צולייגן אַ css וועלקן יבערגאַנג צו די טאָאָלטיפּ
פאַרהאַלטן	נומער	0	פאַרהאַלטן איידער ווייַזונג מכשירים (ms)
פאַרהאַלטן	נומער	0	פאַרהאַלטן איידער כיידינג מכשירים (ms)
צוריקפאַל	שטריקל	''	טעקסט צו נוצן ווען קיין טאָאָלטיפּ טיטל איז פאָרשטעלן
פּלייסמאַנט	שטריקל	'אויבן'	ווי צו שטעלן די טאָאָלטיפּ - אויבן | אונטן | לינקס | רעכט
HTML	בוליאַן	פאַלש	אַלאַוז HTML אינהאַלט אין טאָאָלטיפּ
לעבן	בוליאַן	פאַלש	נוצן געשעעניש דעלאַגיישאַן אַנשטאָט פון יחיד געשעעניש האַנדלערס
אָפסעט	נומער	0	פּיקסעל פאָטאָ פון טאָאָלטיפּ פון ציל עלעמענט
טיטל	שטריקל, פֿונקציע	'טיטל'	אַטריביוט אָדער אופֿן פֿאַר ריטריווינג טיטל טעקסט
צינגל	שטריקל	'שוועבן'	ווי טאָאָלטיפּ איז טריגערד - האָווער | פאָקוס | מאַנואַל
מוסטער	שטריקל	[פעליקייַט מאַרקאַפּ]	דער HTML מוסטער געניצט פֿאַר רענדערינג אַ טוויפּסי.

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

<a href = "#" data-placement = "אונטער" rel = 'טוויפּסי' טיטל = 'עטלעכע טיטל טעקסט' > טעקסט </a>    

מעטהאָדס

$().טוויפּסי(אָפּציעס)

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

.טוויפּסי('ווייַזן')

ריווילז אַן עלעמענטן טוויפּסי.

$ ( '# עלעמענט' ). טוויפּסי ( 'ווייַזן' )

.טוויפּסי('באַהאַלטן')

כיידז אַן עלעמענטן טוויפּסי.

$ ( '# עלעמענט' ). טוויפּסי ( 'באַהאַלטן' )

.טוויפּסי (אמת)

קערט אַן עלעמענטן טוויפּסי קלאַס בייַשפּיל.

$ ( '# עלעמענט' ). טוויפּסי ( אמת )

נאָטיץ אַלטערנאַטיוועלי, דאָס קענען זיין ריטריווד מיט $().data('twipsy').

דעמאָ

די פּאָפּאָווער פּלוגין גיט אַ פּשוט צובינד פֿאַר אַדינג פּאָפּאָווערס צו דיין אַפּלאַקיישאַן. עס יקסטענדז די bootstrap-twipsy.js פּלוגין, אַזוי זיין זיכער צו כאַפּן די טעקע אויך ווען אַרייַנגערעכנט פּאָפּאָווערס אין דיין פּרויעקט!

באַמערקונג איר מוזן אַרייַננעמען די bootstrap-twipsy.js טעקע איידער bootstrap-popover.js.

אראפקאפיע

ניצן bootstrap-popover.js

$ ( '#עקסאַמפּלע' ). פּאָפּאָווער ( אָפּציעס )

אָפּציעס

נאָמען	טיפּ	פעליקייַט	באַשרייַבונג
ופלעבן	בוליאַן	אמת	צולייגן אַ css וועלקן יבערגאַנג צו די טאָאָלטיפּ
פאַרהאַלטן	נומער	0	פאַרהאַלטן איידער ווייַזונג מכשירים (ms)
פאַרהאַלטן	נומער	0	פאַרהאַלטן איידער כיידינג מכשירים (ms)
צוריקפאַל	שטריקל	''	טעקסט צו נוצן ווען קיין טאָאָלטיפּ טיטל איז פאָרשטעלן
פּלייסמאַנט	שטריקל	'רעכט'	ווי צו שטעלן די טאָאָלטיפּ - אויבן | אונטן | לינקס | רעכט
HTML	בוליאַן	פאַלש	אַלאַוז HTML אינהאַלט אין טאָאָלטיפּ
לעבן	בוליאַן	פאַלש	נוצן געשעעניש דעלאַגיישאַן אַנשטאָט פון יחיד געשעעניש האַנדלערס
אָפסעט	נומער	0	פּיקסעל פאָטאָ פון טאָאָלטיפּ פון ציל עלעמענט
טיטל	שטריקל, פֿונקציע	'טיטל'	אַטריביוט אָדער אופֿן פֿאַר ריטריווינג טיטל טעקסט
אינהאַלט	שטריקל, פֿונקציע	'דאַטן אינהאַלט'	אַ שטריקל אָדער אופֿן פֿאַר ריטריווינג אינהאַלט טעקסט. אויב קיינער איז נישט צוגעשטעלט, אינהאַלט וועט זיין מקור פון אַ דאַטן אינהאַלט אַטריביוט.
צינגל	שטריקל	'שוועבן'	ווי טאָאָלטיפּ איז טריגערד - האָווער | פאָקוס | מאַנואַל
מוסטער	שטריקל	[פעליקייַט מאַרקאַפּ]	דער HTML מוסטער געניצט פֿאַר רענדערינג אַ פּאָפּאָווער.

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

<אַ דאַטן-פּלייסמאַנט = "ונטער" href = "#" קלאַס = " בטן געפאַר" rel = "פּאָפּאָווער" > טעקסט </a>    

מעטהאָדס

$().פּאָפּאָווער(אָפּציעס)

יניטיאַליזעס פּאָפּאָווערס פֿאַר אַן עלעמענט זאַמלונג.

.popover('ווייַזן')

ריווילז אַן עלעמענט פּאָווער.

$ ( '# עלעמענט' ). פּאָפּאָווער ( 'ווייַזן' )

.popover('באַהאַלטן')

כיידז אַן עלעמענטן פּאָפּאָווער.

$ ( '# עלעמענט' ). פּאָפּאָווער ( 'באַהאַלטן' )

דעמאָ

האָווער פֿאַר פּאָפּאָווער

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

אראפקאפיע

ניצן bootstrap-alerts.js

$ ( ".אַלערט-מעסעדזש" ). פלינק ()

מאַרקאַפּ

נאָר לייגן אַ data-alertאַטריביוט צו דיין פלינק אַרטיקלען צו אויטאָמאַטיש געבן זיי נאָענט פאַנגקשאַנאַליטי.

אָפּציעס

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

מעטהאָדס

$().אַלערט()

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

.alert('נאָענט')

קלאָוזיז אַ פלינק.

$ ( ".אַלערט-מעסעדזש" ). פלינק ( 'נאָענט' )

דעמאָ