Bootstrap JS

דזשאַוואַסקריפּט פֿאַר באָאָטסטראַפּ

ברענגען די קאַמפּאָונאַנץ פון Bootstrap צו לעבן מיט נייַע, מנהג פּלוגינס וואָס אַרבעט מיט jQuery און Ender .

← צוריק צו באָאָטסטראַפּ היים

ScrollSpy bootstrap-scrollspy.js

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

אראפקאפיע

ניצן boostrap-scrollspy.js

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

מאַרקאַפּ

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

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

מעטהאָדס

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

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

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

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

.סקראָלספּי('דערפרישן')

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

  1. $ ( 'גוף' ). סקראָלספּי ( 'דערפרישן' )

דעמאָ

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

טאַבס bootstrap-tabs.js

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

אראפקאפיע

ניצן boostrap-tabs.js

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

מאַרקאַפּ

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

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

מעטהאָדס

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

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

  1. <ul class = "טאַבס" > 
  2.   <li class = "active" ><a href = "#home" > היים </a></li>  
  3.   <li><a href = "#פּראָפיל" > פּראָפיל </a></li> 
  4.   <li><a href = "#מעססאַגעס" > אַרטיקלען </a></li> 
  5.   <li><a href = "#סעטטינגס" > סעטטינגס </a></li> 
  6. </ul>
  7.  
  8. <דייוו קלאַס = "פּיל-אינהאַלט" > 
  9.   <div class = "active" id = "היים" > ... </div>  
  10.   <div id = "פּראָפיל" > ... </div> 
  11.   <div id = " אַרטיקלען " > ... </div> 
  12.   <div id = "סעטטינגס" > ... </div> 
  13. </ul>
  14.  
  15. <שריפט>
  16.   $ ( פונקציע () {  
  17.     $ ( '.טאַבס' ). טאַבס ()
  18.   })
  19. </script>

דעמאָ

רוי דענים איר מיסטאָמע האָבן נישט געהערט פון זיי דזשין קורצע הייזלעך אַוסטין. Nesciunt Tofu Stumptown Aliqua, רעטראָ סינטה בעל רייניקן. וואָנצעס קליינטשיק טעמפּער, וויליאַמסבורג קאַרלעס וועגאַן העלוועטיקאַ. רעפּרעהענדעריט בוטשער רעטראָ קעפיה דרעאַמקאַטשער סינטה. קאָסבי סוועטער אי.יו. באַנה מי, וואָס איז געווען טערי ריטשאַרדסאָן עקס טינטפיש. ייַנטיילן דעם פּלאַץ פון יפאָנע. סעיטאַן אַליקוויפּ מיט קאַרדיגאַן אמעריקאנער קליידונג, קאַצעוו וואָלופּטאַטע איז וואָס.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Banksy do proident, brooklyn photo booth delectus sunt artisan sed organic exercitation eiusmod four loko. Quis tattooed iphone esse aliqua. Master cleanse vero fixie mcsweeney's. Ethical portland aute, irony food truck pitchfork lomo eu anim. Aesthetic blog DIY, ethical beard leggings tofu consequat whatever cardigan nostrud. Helvetica you probably haven't heard of them carles, marfa veniam occaecat lomo before they sold out in shoreditch scenester sustainable thundercats. Consectetur tofu craft beer, mollit brunch fap echo park pitchfork mustache dolor.

Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seitan squid ad wolf bicycle rights blog. Et aute readymade farm-to-table carles 8-bit, nesciunt nulla etsy adipisicing organic ea. Master cleanse mollit high life, next level Austin nesciunt american apparel twee mustache adipisicing reprehenderit hoodie portland irony. Aliqua tofu quinoa +1 commodo eiusmod. High life williamsburg cupidatat twee homo leggings. Four loko vinyl DIY consectetur nisi, marfa retro keffiyeh vegan. Fanny pack viral retro consectetur gentrify fap.

Twipsy bootstrap-twipsy.js

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

אראפקאפיע

ניצן bootstrap-twipsy.js

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

אָפּציעס

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

מעטהאָדס

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

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

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

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

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

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

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

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

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

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

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

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

דעמאָ

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

פּאָפּאָווערס bootstrap-popover.js

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

אראפקאפיע

ניצן boostrap-popover.js

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

אָפּציעס

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

מעטהאָדס

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

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

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

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

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

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

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

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

דעמאָ

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

אַלערץ bootstrap-alerts.js

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

אראפקאפיע

ניצן bootstrap-alerts.js

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

מאַרקאַפּ

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

מעטהאָדס

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

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

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

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

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

דעמאָ

×

הייליק גאָואַקאַמאָלע! בעסטער טשעק יאָ זיך, איר ניטאָ קוקן צו גוט.

×

אוי קנעפל! איר האָט אַ טעות! טוישן דעם און אַז און פּרובירן ווידער. דויס מאָליס, עס איז ניט קאָממאָדאָ לאַקטוס, עס איז קיין פּאָרטטיטאָר ליגולאַ, לעגאַט לאַסין אָדיאָו ווי ניט עליט. Cras Mattis Consectetur Purus Sit Amet Fermentum.

נעמען דעם קאַמף אָדער טאָן דאָס