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

הורד

שימוש ב-bootstrap-modal

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

אפשרויות

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

סימון

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

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

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

שיטות

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

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

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

.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

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

הורד

באמצעות boostrap-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) לסרגל העליון של האתחול.

הורד

באמצעות boostrap-scrollspy.js

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

סימון

כדי להוסיף בקלות התנהגות גלילית לניווט שלך, פשוט הוסף את 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 ( 'רענן' )

הַדגָמָה

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

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

הורד

שימוש ב-boostrap-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> 
</ul>
 
<script>
  $ ( פונקציה () {  
    $ ( '.tabs' ). כרטיסיות ()
  })
</script>

הַדגָמָה

• בית
• פּרוֹפִיל
• הודעות
• הגדרות

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

הורד

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

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

אפשרויות

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

שיטות

$().twipsy(options)

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

.twipsy('show')

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

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

.twipsy('hide')

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

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

.twipsy(true)

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

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

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

הַדגָמָה

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

הורד

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

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

אפשרויות

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

שיטות

$().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" ). התראה ( 'סגור' )

הַדגָמָה