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

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

מאָדאַלס

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

דראָפּדאָוונס

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

סקראָלספּי

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

טאַגלאַבלע טאַבס

ניצן דעם פּלוגין צו מאַכן טאַבס און פּילז מער נוציק דורך אַלאַוינג זיי צו מאַך דורך טאַבאַבלע פּאַנעס פון היגע אינהאַלט.

מכשירים

א נייַע נעמען אויף די jQuery Tipsy פּלוגין, Tooltips טאָן ניט פאַרלאָזנ זיך בילדער - זיי נוצן CSS3 פֿאַר אַנאַמיישאַנז און דאַטן אַטריביוץ פֿאַר היגע טיטל סטאָרידזש.

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

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

* ריקוויירז טאָאָלטיפּס צו זיין אַרייַנגערעכנט

פלינק אַרטיקלען

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

קנעפּלעך

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

ייַנבראָך

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

קעראַסעל

שאַפֿן אַ לעבעדיק-גיין-קייַלעכיק פון קיין אינהאַלט איר ווילט צו צושטעלן אַן ינטעראַקטיוו סלידעשאָוו פון אינהאַלט.

טיפּ-העאַד

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

יבערגאַנג *

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

* פארלאנגט פֿאַר אַנאַמיישאַן אין פּלוגינס

קאָפּ אַרויף! כל דזשאַוואַסקריפּט פּלוגינס דאַרפן די לעצטע ווערסיע פון ​​​​דזשקווערי.

וועגן מאָדס

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

אראפקאפיע טעקע

סטאַטיק בייַשפּיל

ונטער איז אַ סטאַטיקלי רענדערד מאָדאַל.

לעבן דעמאָ

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

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

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

רופן די מאָדאַל דורך דזשאַוואַסקריפּט:

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

אָפּציעס

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

מאַרקאַפּ

איר קענען לייכט אַקטאַווייט מאָדאַלז אויף דיין בלאַט אָן אַ איין שורה פון דזשאַוואַסקריפּט. נאָר שטעלן data-toggle="modal"אויף אַ קאָנטראָללער עלעמענט מיט אַ data-target="#foo"אָדער href="#foo"וואָס קאָראַספּאַנדז צו אַ מאָדאַל עלעמענט שייַן, און ווען קליקט, עס וועט קאַטער דיין מאָדאַל.

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

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > קאַטער מאָדאַל </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <דייוו קלאַס = "מאָדאַל-כעדער" >
  3. <קנעפּל טיפּ = "קנעפּל" קלאַס = "נאָענט" דאַטן-אָפּזאָגן = "מאָדאַל" > × </button>
  4. <h3> מאָדאַל כעדער </h3>
  5. </div>
  6. <דייוו קלאַס = "מאָדאַל גוף" >
  7. <p> איין פייַן גוף ... </p>
  8. </div>
  9. <דייוו קלאַס = "מאָדאַל-פאָטער" >
  10. <a href = "#" class = "btn" data-dismiss = "מאָדאַל" > נאָענט </a>
  11. <a href = "#" class = "btn btn-primary" > היט ענדערונגען </a>
  12. </div>
  13. </div>
קאָפּ אַרויף! אויב איר ווילן דיין מאָדאַל צו ופלעבן אין און אויס, נאָר לייגן אַ .fadeקלאַס צו די .modalעלעמענט (אָפּשיקן צו די דעמאָ צו זען דעם אין קאַמף) און אַרייַננעמען bootstrap-transition.js.

מעטהאָדס

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

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

  1. $ ( '#מימאָדאַל' ). מאָדאַל ({
  2. קלאַוויאַטור : פאַלש
  3. })

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

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

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

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

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

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

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

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

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

געשעענישן

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

געשעעניש באַשרייַבונג
ווייַזן דער געשעעניש פירט גלייך ווען דער showבייַשפּיל אופֿן איז גערופן.
געוויזן דעם געשעעניש איז פייערד ווען די מאָדאַל איז געווען קענטיק צו דער באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן).
באַהאַלטן דעם געשעעניש איז פייערד מיד ווען דער hideבייַשפּיל אופֿן איז גערופן.
פאַרבאָרגן דער געשעעניש איז פייערד ווען די מאָדאַל איז פאַרטיק צו זיין פאַרבאָרגן פון דער באַניצער (וועט וואַרטן פֿאַר די CSS טראַנזישאַנז צו פאַרענדיקן).
  1. $ ( '#מימאָדאַל' ). אויף ( 'פאַרבאָרגן' , פֿונקציע () {
  2. // טאָן עפּעס ...
  3. })

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

אראפקאפיע טעקע

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

מעגילע די געגנט אונטן און היטן די נאַוויגאַציע דערהייַנטיקן. די דראָפּדאָוון סאַב-ייטאַמז וועט זיין כיילייטיד אויך. פּרוּווט עס!

@פעט

אַד לעגינגז קייטאַר, בראַנטש שייַן קונסט פּאַרטיי דאָלאָר אַרבעט. פּיטשפאָרק יר ענים לא-פי איידער זיי סאָלד אויס קווי. טומבלר פאַרם-צו-טיש וועלאָסיפּעד רעכט וועלכער. ענים כאפיע קארלס קארדיגן. וועליט סעיטאַן מקססוועעעני ס פאָטאָ בוט 3 וואָלף לבנה ירורע. קאָסבי סוועטער לאָמאָ דזשין קורצע הייזלעך, וויליאַמסבורג האָאָדיע מינים וואָס איר מיסטאָמע האָבן נישט געהערט פון זיי און קאַרדיגאַן טראַסט פאָנד culpa biodiesel Wes anderson esthetic. ניהיל טאַטוד אַקסאַמוס, קרעד איראָניע ביאָדיעסעל קעפייעה האַרטמאַן וללאַמקאָ קאָנסעקוואַט.

@מדאָ

וועניאַם מאַרפאַ וואָנצעס סקייטבאָרד, אַדאַפּיסיסינג פוגיאַט וועליט פּיטשפאָרק באָרד. פרעעגאַן באָרד אַליקוואַפּידאַטאַט מאַקסוועיני ס וועראָ. קופּידאַט פיר לאָקאָ ניסי, ea helvetica nulla carles. טאַטאָאָעד קאָסבי סוועטער עסנוואַרג טראָק, Mcsweeney's איז ניט פריגאַן וויינאַל. לאָ-פי וואס אַנדערסאָן +1 סאַרטאָריאַל. קאַרלעס ניט עסטעטיש עקסערסיטיישאַן quis gentrify. ברוקלין אַדאַפּיסיסינג מעלאָכע ביר וויצע קיטאַר דעזעראַנט.

איינער

Occaecat commodo aliqua delectus. Fap קראַפט ביר דעסערט סקייטבאָרד עאַ. לאָמאָ וועלאָסיפּעד רעכט אַדאַפּיסיסינג באַה מי, און איר וועט זיין ווייַטער מדרגה לאָקאַוואָרע איין-אָריגינעל קאַווע אין מאַגנאַ וועניאַם. הויך-לעבן שייַן וויינאַל, עקאָו פּאַרק קאַנסעקוואַט מיט אַלעליקוויפּ באַן מי פּיטשפאָרק. וועראָ VHS איז אַדאַפּייזינג. קאָנסעקטעטור איז DIY מינים שליח זעקל. קרעד עקס אין, סאַסטיינאַבאַל דעלעקטוס קאַנסעקטור פאַני פּאַק יפאָנע.

צוויי

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

קיטאַר צוויי בלאָג, אַ שליח טאַש מיט וועלכער דילעקטוס עסנוואַרג טראָק. סאַפּיענט סינטה שייַן אַססומענדאַ. לאָקאַוואָרע סעד העלוועטיקאַ קליינטשיק איראָניע, טאַנדערקאַץ איר מיסטאָמע האָבן נישט געהערט פון זיי קאָנסעקוואַט האָאָדיע גלוטען-פֿרייַ לאָ-פי פאַפּ אַליקוויפּ. לאַבאָר עליט אָרט איידער זיי סאָלד אויס, טערי ריטשאַרדסאָן פּראָידענט בראַנטש נעססיונט quis cosby sweater pariatur keffiyeh ut helvetica artisan. קאַרדיגאַן מעלאָכע ביר סעיטאַן פאַרטיק וועליט. VHS טשאַמברייַ לאַבאָראַטאָריע צייט. אַנימע מאָלליט מינימאַל קאָממאָדאָ וללאַמקאָ טאַנדערקאַץ.


ניצן bootstrap-scrollspy.js

רופן די סקראָלספּי דורך דזשאַוואַסקריפּט:

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

מאַרקאַפּ

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

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

מעטהאָדס

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

ווען איר נוצן סקראָלספּי אין קאַנדזשאַנגקשאַן מיט אַדינג אָדער רימוווינג עלעמענטן פון די DOM, איר דאַרפֿן צו רופן דעם דערפרישן אופֿן ווי אַזוי:

  1. $ ( '[דאַטן-שפּיאָן = מעגילע"]' ). יעדער ( פונקציע () {
  2. וואַר $ספּיאָן = $ ( דעם ). סקראָלספּי ( 'דערפרישן' )
  3. });

אָפּציעס

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

געשעענישן

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

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

אראפקאפיע טעקע

בייַשפּיל טאַבס

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

רוי דענים איר מיסטאָמע האָבן נישט געהערט פון זיי דזשין קורצע הייזלעך אַוסטין. 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.


ניצן bootstrap-tab.js

געבן טאַבאַבלע טאַבס דורך דזשאַוואַסקריפּט (יעדער קוויטל דאַרף זיין אַקטיווייטיד ינדיווידזשואַלי):

  1. $ ( '#מיין טאַב אַ' ). גיט ( פֿונקציע ( e ) {
  2. ע . פאַרהיטןDefault ();
  3. $ ( דעם ). קוויטל ( 'ווייַזן' );
  4. })

איר קענען אַקטאַווייט יחיד טאַבס אין עטלעכע וועגן:

  1. $ ( '#מיטאַב אַ[הרעף="#פּראָפיל"]' ). קוויטל ( 'ווייַזן' ); // אויסקלייַבן קוויטל דורך נאָמען
  2. $ ( '#myTab a:first' ). קוויטל ( 'ווייַזן' ); // אויסקלייַבן ערשטער קוויטל
  3. $ ( '#myTab a:last' ). קוויטל ( 'ווייַזן' ); // אויסקלייַבן לעצט קוויטל
  4. $ ( '#myTab li:eq(2) a' ). קוויטל ( 'ווייַזן' ); // אויסקלייַבן דריט קוויטל (0-ינדעקסט)

מאַרקאַפּ

איר קענען אַקטאַווייט אַ קוויטל אָדער פּיל נאַוויגאַציע אָן שרייבן קיין דזשאַוואַסקריפּט דורך פשוט ספּעציפיצירן data-toggle="tab"אָדער data-toggle="pill"אויף אַן עלעמענט. אַדינג די navאון nav-tabsקלאסן צו די קוויטל ulוועט צולייגן די באָאָטסטראַפּ קוויטל סטילינג.

  1. <ul class = "נאַוו נאַוו-טאַבס" >
  2. <li><a href = "#היים" data-toggle = "tab" > היים </a></li>
  3. <li><a href = "#פּראָפיל" data-toggle = "tab" > פּראָפיל </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > אַרטיקלען </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > סעטטינגס </a></li>
  6. </ul>

מעטהאָדס

$().tab

אַקטאַווייץ אַ קוויטל עלעמענט און אינהאַלט קאַנטיינער. טאַב זאָל האָבן אַ data-targetאָדער אַ hrefטאַרגאַטינג אַ קאַנטיינער נאָדע אין די DOM.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  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. <div class = "tab-content" >
  9. <div class = "tab-pane active" id = "היים" > ... </div>
  10. <div class = "tab-pane" id = "פּראָפיל" > ... </div>
  11. <div class = "tab-pane" id = " אַרטיקלען " > ... </div>
  12. <div class = "tab-pane" id = "סעטטינגס" > ... </div>
  13. </div>
  14.  
  15. <שריפט>
  16. $ ( פונקציע () {
  17. $ ( '#myTab a:last' ). קוויטל ( 'ווייַזן' );
  18. })
  19. </script>

געשעענישן

געשעעניש באַשרייַבונג
ווייַזן דער געשעעניש פירט אויף די קוויטל ווייַזן, אָבער איידער די נייַע קוויטל איז געוויזן. ניצן event.targetאון event.relatedTargetצו ציל די אַקטיוו קוויטל און די פריערדיקע אַקטיוו קוויטל (אויב בנימצא) ריספּעקטיוולי.
געוויזן דער געשעעניש פירט אויף די קוויטל ווייַזן נאָך אַ קוויטל איז געוויזן. ניצן event.targetאון event.relatedTargetצו ציל די אַקטיוו קוויטל און די פריערדיקע אַקטיוו קוויטל (אויב בנימצא) ריספּעקטיוולי.
  1. $ ( 'אַ [דאַטן-טאָגגל ​​= "טאַב"]' ). אויף ( 'געוויזן' , פֿונקציע ( e ) {
  2. ע . ציל // אַקטיווייטיד קוויטל
  3. ע . RelatedTarget // פרייַערדיק קוויטל
  4. })

וועגן Tooltips

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

אראפקאפיע טעקע

ביישפּיל נוצן פון Tooltips

האָווער אויף די לינקס אונטן צו זען מכשירים:

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


ניצן bootstrap-tooltip.js

צינגל די מכשירים דורך דזשאַוואַסקריפּט:

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

אָפּציעס

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

פאַרהאַלטן ווייַזונג און כיידינג די טאָאָלטיפּ (ms) - איז נישט אַפּלייז צו מאַנואַל צינגל טיפּ

אויב אַ נומער איז סאַפּלייד, פאַרהאַלטן איז געווענדט צו ביידע באַהאַלטן / ווייַזן

כייפעץ סטרוקטור איז:delay: { show: 500, hide: 100 }

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

מאַרקאַפּ

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

  1. <a href = "#" rel = "tooltip" title = "ערשטער Tooltip" > מאַך איבער מיר </a>

מעטהאָדס

$().מכשיר עצה(אָפּציעס)

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

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

ריווילז אַן עלעמענט ס מכשירים.

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

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

באַהאַלט אַן עלעמענט ס מכשירים.

  1. $ ( '# עלעמענט' ). tooltip ( 'באַהאַלטן' )

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

טאָגלעס אַן עלעמענט ס מכשירים.

  1. $ ( '# עלעמענט' ). tooltip ( 'טאַגאַל' )

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

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

* ריקוויירז טאָאָלטיפּ צו זיין אַרייַנגערעכנט

אראפקאפיע טעקע

בייַשפּיל האָווער פּאָווער

האָווער איבער די קנעפּל צו צינגל די פּאָפּאָווער.


ניצן bootstrap-popover.js

געבן פּאָפּאָווערס דורך דזשאַוואַסקריפּט:

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

אָפּציעס

נאָמען טיפּ פעליקייַט באַשרייַבונג
אַנאַמיישאַן בוליאַן אמת צולייגן אַ css וועלקן יבערגאַנג צו די טאָאָלטיפּ
פּלייסמאַנט שטריקל|פונקציע 'רעכט' ווי צו שטעלע די פּאָפּאָווער - שפּיץ | דנאָ | לינקס | רעכט
סעלעקטאָר שטריקל פאַלש אויב אַ סעלעקטאָר איז צוגעשטעלט, טאָאָלטיפּ אַבדזשעקץ וועט זיין דעלאַגייטאַד צו די ספּעסיפיעד טאַרגאַץ
צינגל שטריקל 'שוועבן' ווי טאָאָלטיפּ איז טריגערד - האָווער | פאָקוס | מאַנואַל
טיטל שטריקל | פֿונקציע '' פעליקייַט טיטל ווערט אויב 'טיטל' אַטריביוט איז נישט פאָרשטעלן
אינהאַלט שטריקל | פֿונקציע '' פעליקייַט אינהאַלט ווערט אויב די אַטריביוט פון `Data-Content` איז נישט פאָרשטעלן
פאַרהאַלטן נומער | כייפעץ 0

פאַרהאַלטן ווייזונג און כיידינג די פּאָפּאָווער (מס) - איז נישט אַפּלייז צו מאַנואַל צינגל טיפּ

אויב אַ נומער איז סאַפּלייד, פאַרהאַלטן איז געווענדט צו ביידע באַהאַלטן / ווייַזן

כייפעץ סטרוקטור איז:delay: { show: 500, hide: 100 }

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

מאַרקאַפּ

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

מעטהאָדס

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

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

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

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

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

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

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

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

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

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

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

וועגן אַלערץ

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

אראפקאפיע

בייַשפּיל אַלערץ

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

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

אוי קנעפל! איר האָט אַ טעות!

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

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


ניצן bootstrap-alert.js

געבן דיסמיסאַל פון אַ פלינק דורך דזשאַוואַסקריפּט:

  1. $ ( ".אַלערט" ). פלינק ()

מאַרקאַפּ

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

  1. <אַ קלאַס = "נאָענט " data-dismiss = " אַלערט" href = "#" > & מאל; </a>

מעטהאָדס

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

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

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

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

  1. $ ( ".אַלערט" ). פלינק ( 'נאָענט' )

געשעענישן

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

געשעעניש באַשרייַבונג
נאָענט דער געשעעניש פירט גלייך ווען דער closeבייַשפּיל אופֿן איז גערופן.
פארמאכט דער געשעעניש איז פייערד ווען די פלינק איז געווען פארמאכט (וועט וואַרטן פֿאַר css טראַנזישאַנז צו פאַרענדיקן).
  1. $ ( '#מיין-אַלערט' ). בינדן ( 'פארמאכט' , פֿונקציע () {
  2. // טאָן עפּעס ...
  3. })

וועגן

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

אראפקאפיע טעקע

בייַשפּיל ניצט

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

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

ניצן bootstrap-button.js

געבן קנעפּלעך דורך דזשאַוואַסקריפּט:

  1. $ ( '.nav-tabs' ). קנעפּל ()

מאַרקאַפּ

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

  1. <!-- לייג דאַטן-toggle="קנעפּל" צו אַקטאַווייט טאַגאַלינג אויף אַ איין קנעפּל -->
  2. <button class = "btn" data-toggle = "button" > איין טאַגאַל </button>
  3.  
  4. <!-- לייג data-toggle="buttons-checkbox" פֿאַר טשעקקבאָקס נוסח טאַגאַלינג אויף btn-group -->
  5. <div class = "btn-group" data-toggle = "קנעפּל-טשעקבאָקס" >
  6. <button class = "btn" > לינקס </button>
  7. <button class = "btn" > מיטל </button>
  8. <button class = "btn" > רעכט </button>
  9. </div>
  10.  
  11. <!-- לייג דאַטן-טאָגלע = "קנעפּלס-ראַדיאָ" פֿאַר ראַדיאָ סטיל טאַגאַלינג אויף btn-גרופּע -->
  12. <div class = "btn-group" data-toggle = "קנעפּל-ראַדיאָ" >
  13. <button class = "btn" > לינקס </button>
  14. <button class = "btn" > מיטל </button>
  15. <button class = "btn" > רעכט </button>
  16. </div>

מעטהאָדס

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

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

קאָפּ אַרויף! איר קענען געבן אַוטאָ טאַגלינג פון אַ קנעפּל דורך ניצן די data-toggleאַטריביוט.
  1. <button class = "btn" data-toggle = "קנעפּל" > </button>

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

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

  1. <button class = "btn" data-loading-text = "לאָודינג שטאָפּן ..." > ... </button>
קאָפּ אַרויף! פירעפאָקס בלייַבט די פאַרקריפּלט שטאַט איבער בלאַט לאָודז . א וואָרקאַראָונד פֿאַר דעם איז צו נוצן autocomplete="off".

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

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

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

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

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

וועגן

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

אראפקאפיע טעקע

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

בייַשפּיל אַקאָרדיאַן

מיט די ייַנבראָך פּלוגין, מיר געבויט אַ פּשוט אַקאָרדיאַן נוסח ווידזשיט:

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

ניצן bootstrap-collapse.js

געבן דורך דזשאַוואַסקריפּט:

  1. $ ( ". קאַלאַפּס" ). ייַנבראָך ()

אָפּציעס

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

מאַרקאַפּ

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

  1. <קנעפּל קלאַס = "btn btn-danger" data-toggle = "ייַנבראָך" דאַטן-ציל = "# דעמאָ" >
  2. פּשוט קאַלאַפּסאַבאַל
  3. </button>
  4.  
  5. <div id = "דעמאָ" קלאַס = "ייַנבראָך אין" > </div>
קאָפּ אַרויף! צו לייגן אַקאָרדיאַן-ווי גרופּע פאַרוואַלטונג צו אַ קאַלאַפּסאַבאַל קאָנטראָל, לייגן די דאַטן אַטריביוט data-parent="#selector". אָפּשיקן צו די דעמאָ צו זען דעם אין קאַמף.

מעטהאָדס

.collapse (אָפּציעס)

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

  1. $ ( '#myCollapsible' ). ייַנבראָך ({
  2. טאַגאַל : פאַלש
  3. })

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

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

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

ווייזט אַ קאַלאַפּסאַבאַל עלעמענט.

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

כיידז אַ קאַלאַפּסאַבאַל עלעמענט.

געשעענישן

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

געשעעניש באַשרייַבונג
ווייַזן דער געשעעניש פירט גלייך ווען דער showבייַשפּיל אופֿן איז גערופן.
געוויזן דער געשעעניש איז פייערד ווען אַ ייַנבראָך עלעמענט איז געווען קענטיק צו דער באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן).
באַהאַלטן דעם געשעעניש איז פייערד מיד ווען דער hideאופֿן איז גערופן.
פאַרבאָרגן דער געשעעניש איז פייערד ווען אַ ייַנבראָך עלעמענט איז געווען פאַרבאָרגן פון דער באַניצער (וועט וואַרטן פֿאַר css טראַנזישאַנז צו פאַרענדיקן).
  1. $ ( '#myCollapsible' ). אויף ( 'פאַרבאָרגן' , פֿונקציע () {
  2. // טאָן עפּעס ...
  3. })

וועגן

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

אראפקאפיע טעקע

בייַשפּיל

אָנהייב טייפּינג אין די פעלד אונטן צו ווייַזן די רעזולטאַטן.


ניצן bootstrap-typeahead.js

רופן דעם טיפּ פאָרויס דורך דזשאַוואַסקריפּט:

  1. $ ( '. טיפּאַהעאַד' ). דרוקן ()

אָפּציעס

נאָמען טיפּ פעליקייַט באַשרייַבונג
מקור מענגע [ ] די דאַטן מקור צו אָנפֿרעג קעגן.
זאכן נומער 8 די מאַקסימום נומער פון זאכן צו ווייַזן אין די דראָפּדאָוון.
matcher פֿונקציע פאַל ינסענסיטיוו דער אופֿן געניצט צו באַשליסן אויב אַ אָנפֿרעג שוועבעלעך צו אַ נומער. אַקסעפּץ אַ איין אַרגומענט, itemקעגן וואָס צו פּרובירן די אָנפֿרעג. אַקסעס די קראַנט אָנפֿרעג מיט this.query. צוריקקומען אַ בוליאַן trueאויב אָנפֿרעג איז אַ גלייַכן.
סאָרטער פֿונקציע פּינטלעך גלייַכן,
פאַל-שפּירעוודיק,
פאַל ינסענסיטיוו
אופֿן געניצט צו סאָרט אַוטאָקאָמפּלעטע רעזולטאַטן. אַקסעפּץ אַ איין אַרגומענט itemsאון האט די פאַרנעם פון די טיפּאַהעאַד בייַשפּיל. רעפערענץ די קראַנט אָנפֿרעג מיט this.query.
היגהליגהטער פֿונקציע כיילייץ אַלע פעליקייַט שוועבעלעך אופֿן געניצט צו הויכפּונקט אַוטאָקאָמפּלעטע רעזולטאַטן. אַקסעפּץ אַ איין אַרגומענט itemאון האט די פאַרנעם פון די טיפּאַהעאַד בייַשפּיל. זאָל צוריקקומען HTML.

מאַרקאַפּ

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

  1. <אינפּוט טיפּ = "טעקסט" data-provide = "טיפּ פאָרויס" >

מעטהאָדס

.typeahead (אָפּציעס)

יניטיאַליזעס אַ אַרייַנשרייַב מיט אַ טיפּאַהעאַד.