התוסף Modal שלנו הוא סופר דק של תוסף ה-modal js המסורתי, תוך הקפדה מיוחדת לכלול רק את הפונקציונליות החשופה שאנו דורשים כאן בטוויטר.

הורד

שימוש ב-bootstrap-modal

$ ( '#my-modal' ). מודאלי ( אפשרויות )

אפשרויות

שֵׁם	סוּג	בְּרִירַת מֶחדָל	תיאור
רקע	בוליאני, מחרוזת	שֶׁקֶר	כולל אלמנט רקע מודאלי. הגדר את הרקע לאם "static"אינך רוצה שהמודאל ייסגר בעת לחיצה על הרקע.
מקלדת	בוליאני	שֶׁקֶר	סוגר את המודאל בעת לחיצה על מקש Escape
הופעה	בוליאני	שֶׁקֶר	נפתח מודאלי על אתחול הכיתה

סימון

אתה יכול להפעיל מודלים בדף שלך בקלות מבלי לכתוב שורה אחת של javascript. פשוט תן לאלמנט data-controls-modalתכונה המתאימה למזהה אלמנט מודאלי, וכאשר לוחצים עליו, הוא יפעיל את המודאל שלך. כדי להוסיף אפשרויות מודאליות, פשוט כלול אותן גם כמאפייני נתונים.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static" > הפעל את המודל </a>    

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

שיטות

.modal(אפשרויות)

מפעיל את התוכן שלך כמודל. מקבל אפשרויות אופציונליות object.

$ ( '#my-modal' ). מודאלי ({
  מקלדת : נכון 
})

.modal('toggle')

מחליף מודאל באופן ידני.

$ ( '#my-modal' ). מודאלי ( 'להחליף' )

.modal('show')

פותח מודאל באופן ידני.

$ ( '#my-modal' ). מודאלי ( 'הצג' )

.modal('hide')

מסתיר באופן ידני מודאל.

$ ( '#my-modal' ). מודאלי ( 'להסתיר' )

.modal(true)

מחזירה מופע מחלקה מודאלית של אלמנטים.

$ ( '#my-modal' ). מודאלי ( נכון )

שים לב לחלופין, ניתן לאחזר זאת באמצעות $().data('modal').

אירועים

המחלקה המודאלית של Bootstrap חושפת כמה אירועים לחיבור לפונקציונליות מודאלית.

מִקרֶה	תיאור
הופעה	אירוע זה מופעל מיד כאשר showשיטת המופע נקראת.
מוצג	אירוע זה מופעל כאשר המודאל נעשה גלוי למשתמש (יחכה לסיום מעברי css).
להתחבא	אירוע זה מופעל מיד כאשר hideשיטת המופע נקראה.
מוּסתָר	אירוע זה מופעל כאשר המודאל סיים להיות מוסתר מהמשתמש (יחכה לסיום מעברי css).

$ ( '#my-modal' ). bind ( 'מוסתר' , function () {   
  // עשה משהו ...
})

הַדגָמָה

הפעל את Modal

תוסף זה מיועד להוספת אינטראקציה נפתחת לסרגל העליון של האתחול או לניווטים עם כרטיסיות.

הורד

שימוש ב-bootstrap-dropdown.js

$ ( '#topbar' ). תפריט נפתח ()

סימון

כדי להוסיף במהירות פונקציונליות נפתחת לכל רכיב ניווט, השתמש data-dropdownבתכונה. כל תפריט אתחול תקף תופעל אוטומטית.

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > דף הבית </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > תפריט נפתח </a>  
    <ul class = "תפריט נפתח" > 
      <li><a href = "#" > קישור משני </a></li> 
      <li><a href = "#" > משהו אחר כאן </a></li> 
      <li class = "מחלק" ></li> 
      <li><a href = "#" > קישור נוסף </a></li> 
    </ul>
  </li>
</ul>

שים לב אם בממשק המשתמש שלך יש כמה תפריטים נפתחים, שקול להוסיף את data-dropdownהתכונה לרכיב מכיל משמעותי יותר כמו .tabsאו .topbar.

שיטות

$().dropdown()

API פרוגרמטי להפעלת תפריטים עבור סרגל עליון נתון או ניווט עם כרטיסיות.

הַדגָמָה

תוסף זה מיועד להוספת אינטראקציית scrollspy (עדכון אוטומטי של nav) לסרגל העליון של האתחול.

הורד

שימוש ב-bootstrap-scrollspy.js

$ ( '#topbar' ). scrollSpy ()

סימון

כדי להוסיף בקלות התנהגות גלילית לניווט שלך, פשוט הוסף את data-scrollspyהתכונה ל- .topbar.

<div class = "topbar" data-scrollspy = "scrollspy" > ... </div>   

שיטות

$().scrollSpy()

מפעיל אוטומטית את לחצני הניווט לפי מיקום הגלילה של המשתמשים.

$ ( 'גוף > .topbar' ). scrollSpy ()

שימו לב לתגיות העוגן של Topbar חייבות להיות יעדי מזהה ניתנים לפתרון. לדוגמה, <a href="#home">home</a>חובה להתאים למשהו בדום כמו <div id="home"></div>.

.scrollSpy('refresh')

ה-Scrollspy מאחסן כפתורי ניווט וקואורדינטות מקטעים לביצועים. אם אתה צריך לעדכן את המטמון הזה (כנראה אם ​​יש לך תוכן דינמי) פשוט קרא לשיטת הרענון הזו. אם השתמשת בתכונת הנתונים כדי להגדיר את הגלילה שלך, פשוט התקשר לרענון בגוף.

$ ( 'גוף' ). scrollSpy ( 'רענן' )

הַדגָמָה

בדוק את הניווט בסרגל העליון בדף זה.

תוסף זה מציע פונקציונליות נוספת לניהול מצב הכפתורים.

הורד

שימוש ב-bootstrap-buttons.js

$ ( '.tabs' ). כפתור ()

שיטות

$().button('toggle')

מחליף מצב דחיפה. נותן ל-btn את המראה שהוא הופעל.

שים לב אתה יכול להפעיל החלפה אוטומטית של לחצן באמצעות data-toggleהתכונה.

<button class = "btn" data-toggle = "toggle" > ... </button>   

$().button('טעינה')

מגדיר את מצב הכפתור לטעינה - משבית את הכפתור ומחליף טקסט לטעינת טקסט. טעינת טקסט צריכה להיות מוגדרת ברכיב הלחצן באמצעות תכונת הנתונים data-loading-text.

<button class = "btn" data-loading-text = "טוען דברים..." > ... </button>   

$().button('reset')

מאפס מצב כפתור - מחליף טקסט לטקסט מקורי.

$().button(string)

מאפס מצב כפתור - מחליף טקסט לכל מצב טקסט מוגדר בנתונים.

<button class = "btn" data-complete-text = "סיים!" > ... </button>   
<script>
  $('.btn').button('complete')
</script>

הַדגָמָה

טוען הדגמה החלף הדגמה

תוסף זה מוסיף פונקציונליות מהירה ודינמית של כרטיסיות וגלולה.

הורד

שימוש ב-bootstrap-tabs.js

$ ( '.tabs' ). כרטיסיות ()

סימון

אתה יכול להפעיל טאב או ניווט בגלולה מבלי לכתוב שום javascript פשוט על ידי מתן תכונה data-tabsאו data-pillsתכונה.

 <ul class = "tabs" data-tabs = "tabs" > ... </ul>   

שיטות

$().tabs או $().pills

מפעיל את פונקציונליות הכרטיסיות והגלולה עבור מיכל נתון. קישורי כרטיסיות צריכים להתייחס למזהים במסמך.

<ul class = "tabs" > 
  <li class = "active" ><a href = "#home" > דף הבית </a></li>  
  <li><a href = "#profile" > פרופיל </a></li> 
  <li><a href = "#messages" > הודעות </a></li> 
  <li><a href = "#settings" > הגדרות </a></li> 
</ul>
 
<div class = "תוכן גלולות" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "פרופיל" > ... </div> 
  <div id = "messages" > ... </div> 
  <div id = "הגדרות" > ... </div> 
</div>
 
<script>
  $ ( פונקציה () {  
    $ ( '.tabs' ). כרטיסיות ()
  })
</script>

אירועים

מִקרֶה	תיאור
שינוי	אירוע זה מופעל בעת שינוי הכרטיסייה. השתמש event.targetובכדי event.relatedTargetלמקד ללשונית הפעילה ולכרטיסייה הפעילה הקודמת בהתאמה.

$ ( '#.tabs' ). bind ( 'change' , function ( e ) {   
  ה . target // הכרטיסייה מופעלת
  ה . relatedTarget // הכרטיסייה הקודמת
})

הַדגָמָה

• בית
• פּרוֹפִיל
• הודעות
• הגדרות
• להפיל
  • @שמן
  • @mdo

מבוסס על התוסף המצוין jQuery.tipsy שנכתב על ידי Jason Frame; twipsy היא גרסה מעודכנת, שאינה מסתמכת על תמונות, משתמשת ב-css3 עבור אנימציות, ותכונות נתונים לאחסון כותרות!

הורד

שימוש ב-bootstrap-twipsy.js

$ ( '#example' ). twipsy ( אפשרויות )

אפשרויות

שֵׁם	סוּג	בְּרִירַת מֶחדָל	תיאור
לְהַנפִּישׁ	בוליאני	נָכוֹן	החל מעבר דהייה של css על הסבר הכלי
עיכוב	מספר	0	עיכוב לפני הצגת תיאור כלי (ms)
delayOut	מספר	0	עיכוב לפני הסתרת הסבר כלים (ms)
לסגת	חוּט	''	טקסט לשימוש כאשר אין כותרת של תיאור כלי
מיקום	חוּט	'מֵעַל'	כיצד למקם את הסבר הכלי - למעלה | למטה | שמאל | ימין
html	בוליאני	שֶׁקֶר	מאפשר תוכן HTML בתוך תיאור כלי
לחיות	בוליאני	שֶׁקֶר	השתמש בהאצלת אירועים במקום במטפלי אירועים בודדים
לְקַזֵז	מספר	0	היסט פיקסלים של תיאור כלי מאלמנט היעד
כותרת	מחרוזת, פונקציה	'כותרת'	תכונה או שיטה לאחזור טקסט כותרת
הדק	חוּט	'לְרַחֵף'	כיצד מופעלת תיאור כלי - רחף | מיקוד | מדריך ל
תבנית	חוּט	[סימון ברירת מחדל]	תבנית ה-html המשמשת לעיבוד twipsy.

שים לב ניתן לציין אפשרויות מופע בודדות של twipsy לחילופין באמצעות שימוש בתכונות נתונים.

<a href = "#" data-placement = "below" rel = 'twipsy' title = 'טקסט של כותרת' > טקסט </a>    

שיטות

$().twipsy(options)

מצרף מטפל twipsy לאוסף אלמנטים.

.twipsy('show')

חושף טוויפסי אלמנטים.

$ ( '#element' ). twipsy ( 'הצג' )

.twipsy('hide')

מסתיר טוויפסי אלמנטים.

$ ( '#element' ). twipsy ( 'להסתיר' )

.twipsy(true)

מחזירה מופע מחלקה twipsy elements.

$ ( '#element' ). טוויפסי ( נכון )

שים לב לחלופין, ניתן לאחזר זאת באמצעות $().data('twipsy').

הַדגָמָה

התוסף popover מספק ממשק פשוט להוספת popovers לאפליקציה שלך. זה מרחיב את התוסף bootstrap-twipsy.js , אז הקפד לתפוס את הקובץ הזה גם כאשר אתה כולל popovers בפרויקט שלך!

שים לב עליך לכלול את הקובץ bootstrap-twipsy.js לפני bootstrap-popover.js.

הורד

שימוש ב-bootstrap-popover.js

$ ( '#example' ). קופץ ( אפשרויות )

אפשרויות

שֵׁם	סוּג	בְּרִירַת מֶחדָל	תיאור
לְהַנפִּישׁ	בוליאני	נָכוֹן	החל מעבר דהייה של css על הסבר הכלי
עיכוב	מספר	0	עיכוב לפני הצגת תיאור כלי (ms)
delayOut	מספר	0	עיכוב לפני הסתרת הסבר כלים (ms)
לסגת	חוּט	''	טקסט לשימוש כאשר אין כותרת של תיאור כלי
מיקום	חוּט	'ימין'	כיצד למקם את הסבר הכלי - למעלה | למטה | שמאל | ימין
html	בוליאני	שֶׁקֶר	מאפשר תוכן HTML בתוך תיאור כלי
לחיות	בוליאני	שֶׁקֶר	השתמש בהאצלת אירועים במקום במטפלי אירועים בודדים
לְקַזֵז	מספר	0	היסט פיקסלים של תיאור כלי מאלמנט היעד
כותרת	מחרוזת, פונקציה	'כותרת'	תכונה או שיטה לאחזור טקסט כותרת
תוֹכֶן	מחרוזת, פונקציה	'תוכן נתונים'	מחרוזת או שיטה לאחזור טקסט תוכן. אם לא יסופקו, התוכן יגיע ממאפיין תוכן נתונים.
הדק	חוּט	'לְרַחֵף'	כיצד מופעלת תיאור כלי - רחף | מיקוד | מדריך ל
תבנית	חוּט	[סימון ברירת מחדל]	תבנית ה-html המשמשת לעיבוד פופ-אובר.

שים לב לחלופין ניתן לציין אפשרויות מופע מוקפץ בודדים באמצעות שימוש בתכונות נתונים.

<a data-placement = "below" href = "#" class = "btn danger" rel = "popover" > text </a>    

שיטות

$().popover(options)

מאתחל פופ-אובר עבור אוסף אלמנטים.

.popover('show')

חושף פריצת אלמנטים.

$ ( '#element' ). popover ( 'הצג' )

.popover('hide')

מסתיר חלון קופץ של אלמנטים.

$ ( '#element' ). popover ( 'להסתיר' )

הַדגָמָה

רחף לפופ-אובר

תוסף ההתראה הוא מחלקה סופר זעירה להוספת פונקציונליות קרובה להתראות.

הורד

שימוש ב-bootstrap-alerts.js

$ ( ".alert-message" ). התראה ()

סימון

פשוט הוסף data-alertתכונה להודעות ההתראה שלך כדי לתת להן פונקציונליות קרובה באופן אוטומטי.

אפשרויות

שֵׁם	סוּג	בְּרִירַת מֶחדָל	תיאור
בוחר	חוּט	'.סגור'	לאיזה בורר לכוון לסגירת התראה.

שיטות

$().alert()

עוטף את כל ההתראות עם פונקציונליות קרובה. כדי שההתראות שלך יופעלו כשהן סגורות, ודא שכבר הוחל עליהן את ה- .fadeand class..in

.alert('close')

סוגר התראה.

$ ( ".alert-message" ). התראה ( 'סגור' )

הַדגָמָה