וובמאסטר - תיכנות ובניית אתרים

מדריך jQuery - שינוי סגנון ומאפייני עיצוב

aetchin ,‏ CodeValue‏ ‏/‏ 23 פברואר, 2011
F+
F-

מאפייני עיצוב (כפי שלמדנו במדריך 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
>

נקבלאת התוצאה:

jQuery סגנונות עיצוב

ניתן גם לקבוע יותר מתכונת css בבת אחת. לדוגמא, נוכל לשנות את הקוד הנ”ל להיות:

<script type="text/javascript">
  $(document).ready(function
() {
    $(
"#yellowDiv"
).css({
     
"background-color": "yellow"
,
     
"font-weight": "bold"
,
     
"color": "blue"
    });
  }); 

</script
>

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

כאן, תהיה התוצאה:

jQuery סגנונות עיצוב

מידע נוסף על הפונקציה ()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.

jQuery סגנונות עיצוב

פירוט נוסף עך הפונקציות addClass ו- removeClass ניתן למצוא בתיעוד המלא באתר jQuery.

תגיות: JQuery‏  /  מדריך‏  /  בניית אתרים‏  /  צד לקוח‏  

תגובות בפייסבוק

תגובות למאמר



עוד במדריך

תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות