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

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

יחיד אָדער צונויפגעשטעלט

פּלוגינס קענען זיין אַרייַנגערעכנט ינדיווידזשואַלי (כאָטש עטלעכע האָבן פארלאנגט דיפּענדאַנסיז), אָדער אַלע אין אַמאָל. ביידע bootstrap.js און bootstrap.min.js אַנטהאַלטן אַלע פּלוגינס אין אַ איין טעקע.

דאַטן אַטריביוץ

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

אין עטלעכע סיטואַטיאָנס, עס קען זיין דיזייראַבאַל צו קער אַוועק די פאַנגקשאַנאַליטי. דעריבער, מיר אויך צושטעלן די פיייקייט צו דיסייבאַל די דאַטן אַטריביוט אַפּי דורך אַנבינדינג אַלע געשעענישן אויף דעם גוף מיט אַ נאָמען מיט `'data-api'`. דאָס קוקט ווי דאָס:

  1. $ ( 'גוף' ). אַוועק ( '.דאַטאַ-אַפּי' )

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

  1. $ ( 'גוף' ). אַוועק ( '.alert.data-api' )

פּראָגראַממאַטיק אַפּי

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

  1. $ ( ".בטנ.דאַנגער" ). קנעפּל ( "טאַגאַל" ). addClass ( "פעט" )

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

  1. $ ( "#מימאָדאַל" ). מאָדאַל () // יניטיאַליזעד מיט דיפאָלץ
  2. $ ( "#מימאָדאַל" ). מאָדאַל ({ קלאַוויאַטור : פאַלש }) // יניטיאַלייזד מיט קיין קלאַוויאַטור
  3. $ ( "#מימאָדאַל" ). מאָדאַל ( 'ווייַזן' ) // יניטיאַלייזיז און ינוואָוקס ווייַזן מיד

יעדער פּלוגין אויך יקספּאָוזיז זיין רוי קאָנסטרוקטאָר אויף אַ 'קאָנסטרוקטאָר' פאַרמאָג: $.fn.popover.Constructor. אויב איר'ד ווי צו באַקומען אַ באַזונדער פּלוגין בייַשפּיל, צוריקקריגן עס גלייַך פֿון אַן עלעמענט: $('[rel=popover]').data('popover').

קיין קאָנפליקט

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

  1. var bootstrapButton = $ . fn . קנעפּל . נאָקאָנפליקט () // צוריקקומען $. פנ.קנעפּל צו פריער אַסיינד ווערט
  2. $ . fn . bootstrapBtn = bootstrapButton // געבן $().bootstrapBtn די באָאָטסטראַפּ פאַנגקשאַנאַליטי

געשעענישן

Bootstrap גיט מנהג events פֿאַר רובֿ יינציק אַקשאַנז פון פּלוגין. בכלל, די קומען אין אַ ינפיניטיווע און פאַרגאַנגענהייט באַטייליקונג פאָרעם - ווו די ינפיניטיווע (למשל show) איז טריגערד אין די אָנהייב פון אַ געשעעניש, און זייַן פאַרגאַנגענהייט באַטייליקונג פאָרעם (למשל shown) איז צינגל אויף די קאַמפּלישאַן פון אַ קאַמף.

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

  1. $ ( '#מימאָדאַל' ). אויף ( 'ווייַזן' , פֿונקציע ( e ) {
  2. אויב (! דאַטן ) צוריקקומען ע . preventDefault () // סטאַפּס מאָדאַל פון זייַענדיק געוויזן
  3. })

וועגן טראַנזישאַנז

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

ניצן קאַסעס

עטלעכע ביישפילן פון די יבערגאַנג פּלוגין:

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

ביישפילן

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

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

א רענדערד מאָדאַל מיט כעדער, גוף און גאַנג פון אַקשאַנז אין די פוטער.

  1. <דייוו קלאַס = "מאָדאַל באַהאַלטן וועלקן" >
  2. <דייוו קלאַס = "מאָדאַל-כעדער" >
  3. <קנעפּל טיפּ = "קנעפּל" קלאַס = "נאָענט" data-dismiss = "מאָדאַל" aria-hidden = "אמת" > & מאל; </button>
  4. <h3> מאָדאַל כעדער </h3>
  5. </div>
  6. <דייוו קלאַס = "מאָדאַל גוף" >
  7. <p> איין פייַן גוף ... </p>
  8. </div>
  9. <דייוו קלאַס = "מאָדאַל-פאָטער" >
  10. <a href = "#" class = "btn" > נאָענט </a>
  11. <a href = "#" class = "btn btn-primary" > היט ענדערונגען </a>
  12. </div>
  13. </div>

לעבן דעמאָ

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

  1. <!-- קנעפּל צו צינגל מאָדאַל -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > קאַטער דעמאָ מאָדאַל </a>
  3.  
  4. <!-- מאָדאַל -->
  5. <div id = "myModal" class = "מאָדאַל באַהאַלטן וועלקן" tabindex = "-1" ראָלע = "דיאַלאָג" aria-labelledby = "myModalLabel" aria-hidden = "אמת" >
  6. <דייוו קלאַס = "מאָדאַל-כעדער" >
  7. <קנעפּל טיפּ = "קנעפּל" קלאַס = "נאָענט" data-dismiss = "מאָדאַל" aria-hidden = "אמת" > × </button>
  8. <h3 id = "myModalLabel" > מאָדאַל כעדער </h3>
  9. </div>
  10. <דייוו קלאַס = "מאָדאַל גוף" >
  11. <p> איין פייַן גוף ... </p>
  12. </div>
  13. <דייוו קלאַס = "מאָדאַל-פאָטער" >
  14. <button class = "btn" data-dismiss = "מאָדאַל" aria-hidden = "אמת" > נאָענט </button>
  15. <button class = "btn btn-primary" > היט ענדערונגען </button>
  16. </div>
  17. </div>

באַניץ

דורך דאַטן אַטריביוץ

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

  1. <button type = "button" data-toggle = "מאָדאַל" data-target = "#myModal" > קאַטער מאָדאַל </button>

דורך דזשאַוואַסקריפּט

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

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

אָפּציעס

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

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

אויב אַ ווייַט URL איז צוגעשטעלט, אינהאַלט וועט זיין לאָודיד דורך jQuery ס loadאופֿן און ינדזשעקטיד אין די .modal-body. אויב איר נוצן די דאַטן אַפּי, איר קענט אַלטערנאַטיוועלי נוצן דעם hrefקוויטל צו ספּעציפיצירן די ווייַט מקור. א ביישפּיל פון דעם איז געוויזן אונטן:

  1. <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

מעטהאָדס

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

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


באַניץ

דורך דאַטן אַטריביוץ

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

  1. <body data-spy = "מעגילע" data-target = ".נאַוובאַר" > ... </body>

דורך דזשאַוואַסקריפּט

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

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

מעטהאָדס

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

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

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

אָפּציעס

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

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


באַניץ

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

  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וועט צולייגן די Bootstrap קוויטל סטילינג.

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

ביישפילן

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

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

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

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

פיר אינסטרוקציעס

מכשירים אין אַרייַנשרייַב גרופּעס

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


באַניץ

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

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

אָפּציעס

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

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

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

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

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

קאנטעינער שטריקל | פאַלש פאַלש

אַפּפּענדז די מכשירים צו אַ ספּעציפיש עלעמענטcontainer: 'body'

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

מאַרקאַפּ

  1. <a href = "#" data-toggle = "tooltip" title = "ערשטער Tooltip" > הייב איבער מיר </a>

מעטהאָדס

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

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

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

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

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

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

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

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

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

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

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

.tooltip('פאַרניכטן')

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

  1. $ ( '# עלעמענט' ). tooltip ( 'פאַרניכטן' )

ביישפילן

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

סטאַטיק פּאָווער

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

פּאָווער שפּיץ

Sed posuere consectetur est at lobortis. אַענעאַן eu leo ​​quam. פּעללענטעסקווע אָרנאַרע סעם lacinia quam venenatis vestibulum.

פּאָפּאָווער רעכט

Sed posuere consectetur est at lobortis. אַענעאַן eu leo ​​quam. פּעללענטעסקווע אָרנאַרע סעם lacinia quam venenatis vestibulum.

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

Sed posuere consectetur est at lobortis. אַענעאַן eu leo ​​quam. פּעללענטעסקווע אָרנאַרע סעם lacinia quam venenatis vestibulum.

פּאָפּאָווער לינקס

Sed posuere consectetur est at lobortis. אַענעאַן eu leo ​​quam. פּעללענטעסקווע אָרנאַרע סעם lacinia quam venenatis vestibulum.

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

לעבן דעמאָ

פיר אינסטרוקציעס


באַניץ

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

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

אָפּציעס

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

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

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

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

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

קאנטעינער שטריקל | פאַלש פאַלש

אַפּענדז די פּאָפּאָווער צו אַ ספּעציפיש עלעמענטcontainer: 'body'

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

מאַרקאַפּ

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

מעטהאָדס

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

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

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

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

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

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

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

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

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

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

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

.popover('פאַרניכטן')

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

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

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

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

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

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

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

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


באַניץ

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

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

מאַרקאַפּ

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

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

מעטהאָדס

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

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

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

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

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

געשעענישן

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

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

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

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

סטעיטפול

לייג data-loading-text="Loading..."צו נוצן אַ לאָודינג שטאַט אויף אַ קנעפּל.

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "לאָודינג..." > לאָודינג שטאַט </button>

איין קנעפּל

לייג data-toggle="button"צו אַקטאַווייט טאַגאַלינג אויף אַ איין קנעפּל.

  1. <button type = "button" class = "btn btn-primary" data-toggle = "button" > איין טאַגאַל </button>

טשעקקבאָקס

לייג data-toggle="buttons-checkbox"פֿאַר טשעקקבאָקס נוסח טאַגאַלינג אויף btn-גרופּע.

  1. <div class = "btn-group" data-toggle = "קנעפּל-טשעקבאָקס" >
  2. <קנעפּל טיפּ = "קנעפּל" קלאַס = "בטן בטן-ערשטיק" > לינקס </קנעפּל>
  3. <קנעפּל טיפּ = "קנעפּל" קלאַס = "בטן בטנ-ערשטיק" > מיטל </קנעפּל>
  4. <קנעפּל טיפּ = "קנעפּל" קלאַס = "בטן בטנ-ערשטיק" > רעכט </קנעפּל>
  5. </div>

ראַדיאָ

לייג data-toggle="buttons-radio"פֿאַר ראַדיאָ סטיל טאַגאַלינג אויף btn-גרופּע.

  1. <div class = "btn-group" data-toggle = "קנעפּל-ראַדיאָ" >
  2. <קנעפּל טיפּ = "קנעפּל" קלאַס = "בטן בטן-ערשטיק" > לינקס </קנעפּל>
  3. <קנעפּל טיפּ = "קנעפּל" קלאַס = "בטן בטנ-ערשטיק" > מיטל </קנעפּל>
  4. <קנעפּל טיפּ = "קנעפּל" קלאַס = "בטן בטנ-ערשטיק" > רעכט </קנעפּל>
  5. </div>

באַניץ

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

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

מאַרקאַפּ

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

אָפּציעס

קיינער

מעטהאָדס

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

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

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

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

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

  1. <button type = "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.
  1. <דייוו קלאַס = "אַקאָרדיאָן" שייַן = "אַקאָרדיאָן2" >
  2. <דייוו קלאַס = "אַקאָרדיאַן-גרופּע" >
  3. <דייוו קלאַס = "אַקאָרדיאַן-כעדינג" >
  4. < אַ קלאַס = "אַקאָרדיאָן -טאַגאַל" data- toggle = "ייַנבראָך " דאַטן- פאָטער = "# אַקאָרדיאָן2" href = "#קאַלאַפּסעאָנע" >
  5. קאַלאַפּסאַבאַל גרופע נומער #1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" קלאַס = "אַקאָרדיאַן גוף ייַנבראָך אין" >
  9. <דייוו קלאַס = "אַקאָרדיאַן-ינער" >
  10. אַניוועסדיק קליינטשיק ...
  11. </div>
  12. </div>
  13. </div>
  14. <דייוו קלאַס = "אַקאָרדיאַן-גרופּע" >
  15. <דייוו קלאַס = "אַקאָרדיאַן-כעדינג" >
  16. < אַ קלאַס = "אַקאָרדיאָן -טאַגאַל" data- toggle = "ייַנבראָך " דאַטן- פאָטער = "# אַקאָרדיאָן2" href = "#קאַלאַפּסטוואָ" >
  17. קאַלאַפּסאַבאַל גרופע נומער #2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" קלאַס = "אַקאָרדיאַן גוף ייַנבראָך" >
  21. <דייוו קלאַס = "אַקאָרדיאַן-ינער" >
  22. אַניוועסדיק קליינטשיק ...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

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

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

באַניץ

דורך דאַטן אַטריביוץ

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

צו לייגן אַקאָרדיאַן-ווי גרופּע פאַרוואַלטונג צו אַ קאַלאַפּסאַבאַל קאָנטראָל, לייגן די דאַטן אַטריביוט data-parent="#selector". אָפּשיקן צו די דעמאָ צו זען דעם אין קאַמף.

דורך דזשאַוואַסקריפּט

געבן מאַניואַלי מיט:

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

אָפּציעס

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

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

מעטהאָדס

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

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

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

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

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

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

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

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

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

געשעענישן

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

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

בייַשפּיל

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

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

איר וועט וועלן צו שטעלן autocomplete="off"צו פאַרהיטן פעליקייַט בלעטערער מעניוז פון די דראָפּדאָוון פון Bootstrap טיפּ.


באַניץ

דורך דאַטן אַטריביוץ

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

דורך דזשאַוואַסקריפּט

רופן די טיפּ-העאַד מאַניואַלי מיט:

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

אָפּציעס

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

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

מעטהאָדס

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

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

בייַשפּיל

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


באַניץ

דורך דאַטן אַטריביוץ

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

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
קאָפּ אַרויף! איר מוזן פירן די שטעלע פון ​​​​אַ פּינד עלעמענט און די נאַטור פון זיין באַלדיק פאָטער. שטעלע איז קאַנטראָולד דורך affix, affix-top, און affix-bottom. געדענקט צו קאָנטראָלירן פֿאַר אַ פּאַטענטשאַלי קאַלאַפּסט פאָטער ווען די אַפיקס קיקס אין ווי עס איז רימוווינג אינהאַלט פון די נאָרמאַל לויפן פון די בלאַט.

דורך דזשאַוואַסקריפּט

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

  1. $ ( '# נאַוובאַר' ). צוגעבן ()

אָפּציעס

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

נאָמען טיפּ פעליקייַט באַשרייַבונג
אָפסעט נומער | פֿונקציע | כייפעץ 10 פּיקסעלס צו אָפסעט פון פאַרשטעלן ווען קאַלקיאַלייטינג שטעלע פון ​​מעגילע. אויב אַ איין נומער איז צוגעשטעלט, די פאָטאָ וועט זיין געווענדט אין ביידע שפּיץ און לינקס אינסטרוקציעס. צו הערן פֿאַר אַ איין ריכטונג, אָדער קייפל יינציק אָפסעץ, נאָר צושטעלן אַ כייפעץ offset: { x: 10 }. ניצן אַ פֿונקציע ווען איר דאַרפֿן צו דינאַמיקאַללי צושטעלן אַ פאָטאָ (נוציק פֿאַר עטלעכע אָפּרופיק דיזיינז).