מדריך jQuery – שינוי סגנון ומאפייני עיצוב
מאפייני עיצוב (כפי שלמדנו במדריך CSS) הוא חלק בלתי נפרד מדפי ה- HTML המודרניים. בעזרת jQuery אנו יכולים לבחור רכיבים בעלי סגנון משותף אך אנו גם יכולים לשנות/להוסיף סגנונות באופן דינמי על גבי הדף. הפונקציה החשובה ביותר ב- jQuery לעבודה עם סגנונות היא ()css, וקיימות פונקציות נוספות (http://api.jquery.com/category/css/) שאת חלקן נראה גם במדריך זה.
הפונקציה ()css
הפונקציה ()css משמשת אותנו כדי להגדיר סגנון עיצובי לאלמנט(ים) שבחרנו, והיא מקבלת את תכונת ה- css שנרצה לקבוע ואת הערך שאותו נראה להגדיר.
לדוגמא – עבור דף ה- HTML הבא המכיל div בשם yelloDiv:
<!DOCTYPE html>
<html>
<head>
<title>css() function</title>
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#yellowDiv").css({ "background-color": "yellow" });
});
</script>
</head>
<body>
<div id="yellowDiv">
jQuery Tutorial
</div>
</body>
</html>
נקבלאת התוצאה:
ניתן גם לקבוע יותר מתכונת css בבת אחת. לדוגמא, נוכל לשנות את הקוד הנ”ל להיות:
<script type="text/javascript">
$(document).ready(function () {
$("#yellowDiv").css({
"background-color": "yellow",
"font-weight": "bold",
"color": "blue"
});
});
</script>
ובבת כחת לקבוע מאפיינים של מספר תכונות עיצוב. בין כל צמד של תכונה + ערך ישנו פסיק מפריד.
כאן, תהיה התוצאה:
מידע נוסף על הפונקציה ()css ניתן למצוא בתיעוד של jQuery בכתובת: http://api.jquery.com/css.
שינוי מאפייני סגנון ברמת CSS Class ע”י הפונקציות ()addClass ו- ()removeClass
בניגוד לפונקציה ()css בה השתמשנו כדי לקבוע ערכים של מאפייני עיצוב ספציפיים, נשתמש בפונקציות ()addClass ו- ()removeClass כדי להדגיר class עיצובי על אלמנט נבחר ולהסירו.
דוגמא: נרצה הציג רשימה, וכשהמשתמש מצביע על איבר ברשימה הוא מקבל סגנון אחר, למשל, שהטקסט נצבע בצבע אדום.
להפעלת הדוגמא לחץ כאן
נתחיל מדף ה- HTML הזה שמכיל רשימת פריטים:
<!DOCTYPE html>
<html>
<head>
<title>addClass() function</title>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>jQuery</li>
<li>JavaScript</li>
</ul>
</body>
</html>
נוסיף הגדרת CSS Class בשם selected שתגדיר את הסגנון של הפריטים שנבחרו:
<head>
<title>addClass() function</title>
...
<style type="text/css">
.selected {
color: red;
}
</style>
...
</head>
נוסיף את קוד ה- jQuery הבא:
<head>
...
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("li").mouseover(function () {
$(this).addClass("selected");
})
.mouseout(function () {
$(this).removeClass("selected");
});
});
</script>
</head>
בקוד הנ”ל, אנו בוחרים את כל האלמנטים מסוג li בדף ומגדירים שכאשר המשתמש עובר מעליהם עם העכבר, נרצה להוסיף את הסגנון העיצובי selected על הפריט הנבחר. כאשר המשתמש מזיז את העכבר מחוץ לפריט הנוכחי, נוריד את הגדרת העיצוב ונחזיר את הפריט להצגתו הבסיסית.
שימו לב לשימוש בביטוי
$(this)
שמשמעותו – האלמנט הנוכחי.
בדוגמא שלנו, כיוון שיש מספר אלמנטים בדף מסוג li, בעת הטיפול באירועים mouseover ו- mouseout נרצה לדעת מעל איזה אלמנט המשתמש נמצא עם העכבר. כדי להפעיל פונקציות על האלמנט הנוכחי שהפעיל את האירוע – נשתמש בביטוי this.
פירוט נוסף עך הפונקציות addClass ו- removeClass ניתן למצוא בתיעוד המלא באתר jQuery.
תגובות בפייסבוק