בחלק זה של המדריך נעסוק בדרכים בהן jquery מאפשרת לנו לבצע שינויים דינמיים בתכונות CSS של אלמנטים. החל מפעולות פשוטות כמו שינוי צבע פונט, ועד לאנימציות ואפקטים מורכבים הכוללים הזזה, שינוי צבעים, גדלים, שקיפות ועוד. פעולות אלה מהוות מרכיב חשוב באתרים ובאפליקציות רשת מודרניות בכך שהן נותנות פידבק ויזואלי לגולש ועושות את השימוש באתר לפשוט, מהנה ומושך יותר.
מניפולציה בסיסית של CSS
CSS()
נתחיל בפונקציה בסיסית - css. לפונקציה זו קיימות 3 וריאציות:
- css(name) - מחזירה ערך נוכחי של תכונת CSS עבור אלמנט מסוים. לדוגמה:
$('span.ai').css('background-color')
- css(name,value) - משנה תכונת CSS מסוימת לערך נתון. הפרמטר הראשון הוא שם התכונה שברצוננו לשנות. הפרמטר השני הוא הערך המבוקש עבור אותה תכונה.
- css(properties) - משנה מספר תכונות CSS בבת אחת. מקבל פרמטר מסוג map המכיל את שמות התכונות לשינוי כמפתחות, והערכים המבוקשים בהתאמה. לדוגמה:
בדוגמה זו אנו משנים 5 תכונות CSS בקריאה אחת: צבע הטקסט, צבע הרקע, רוחב, מעבר מ-inline ל - block וריווח (padding) .
$('#ex3_1 span').css({
color: '#23b',
display: 'block',
width: '140px',
padding: '12px',
'background-color' : '#cce'
});
הדגמה:
רוצה להיות אדום
גם אני
height(), width()
אלה פונקציות נוחות המשמשות לקריאת/קביעת גובה ורוחב של אלמנט, בהתאם לצורה המוכרת - פונקציה ללא פרמטרים משמשת לקריאת ערך, פונקציה עם פרמטר משמשת לקביעת ערך.
לדוגמה:
- שינוי גובה אלמנט מסוג div עם מזהה content לגובה 400px.
פונקציות להסתרה וגילוי של אלמנטים
hide(), show()
במקרים רבים נרצה להסתיר אלמנטים מסוימים כתגובה לפעולה של משתמש, או להראות אלמנט מסוים שנמצא במצב מוסתר. לשם כך מספקת jQuery את הפונקציות הנ"ל.
לשתיהן קיימות שתי גירסאות - אחת ללא פרמטרים, להסתרה או גילוי מיידים. בגירסה השניה נשתמש כאשר נרצה לבצע את הפעולה באופן הדרגתי כאשר שלוש התכונות - רוחב, גובה ושקיפות משתנים בהדרגה ממצב של הסתרה מלאה עד להופעה מלאה (או להיפך). בגירסה זו ניתן להעביר לה שני פרמטרים - הראשון מציין את מהירות הפעולה, באלפיות שניה או במילה (קיימות שלוש אפשרויות - slow,medium,fast), והשני (אופציונלי) מציין פונקציה לביצוע מיד לאחר סיום הפעולה.
דוגמה:
$('.expand').show(400, function() {
$('#base').css('font-weight','bold');
});
הדגמה:
בדוגמה זו אנו גורמים לאלמנט מוסתר להופיע באפקט הדרגתי בתוך 400 מילי שניות, כאשר בסוף הפעולה מופעלת פונקציה שמשנה את הפונט של טקסט באלמנט פנימי ל-bold.
toggle()
toggle משנה את מצב האלמנטים שהיא מופעלת עליהם מגלוי לנסתר ולהיפך.