נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

אפקטים של jQuery

מחבר:
בתאריך:

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

 

האפקטים של jQuery

hide, show ו-toggle

האפקטים הבסיסיים ביותר הם hide/show ו-toggle. בואו נראה את האפקט. לחיצה על הכפתור תגרום להעלמות הפסקה מפני שהשתמשנו ב-()hide:

הדגמה של פסקה שנעלמת בעקבות פעולה של jQuery

וזה הקוד שגורם לכך:

$('button').on('click' ,function(){
$(this).siblings('p').hide();
});

תוכלו להבין יותר טוב את כיצד פועל קוד ה-jQuery , אם תקראו את מדריך אירועים ב-jQuerry.
כשמשתמשים ב-()show לחיצה על הכפתור תגרום להופעת הפסקה:

פסקה שמופיעה בעקבות אפקט של jQuery

וכך נראה הקוד:

$('button').on('click' ,function(){
     $(this).siblings('p').show();
});


המתודה-()toggle, חוסכות לנו בקוד, מפני שמה שהיא אומרת, אם האלמנט נראה מוצג להחביא אותו, ואם האלמנט מוסתר צריך להציג אותו. לדוגמה:

פסקה שמדגימה אפקט toggle. לחיצה אחת - מעלימה, ושנייה - מציגה את הפסקה.

כך נראה הקוד:

$('button').on('click' ,function(){
     $(this).siblings('p').toggle();
});

 

fadeIn, fadeOut ו-fadeToggle

()fadeout גורמת להתפוגגות האלמנט, ()fadeIn גורמת להופעת האלמנט. ()fadeToggle גורם להתפוגגות אלמנט נראה, ולהופעת אלמנט מוסתר.

בוא נראה דוגמה ל-fadeOut :

פסקה שמדגימה אפקט fadeOut. לחיצה גורמת להתפוגגות הפסקה.

זה הקוד:

$('button').on('click' ,function(){
     $(this).siblings('p').fadeOut();
});

slideDown, slideUp ו-slideToggle

()slideDown גורם לאלמנט להחליק, ולהופיע מתחת לאלמנט אחר, ()slideUp גורם לאלמנט להחליק ולהיעלם מתחת לאלמנט שמעליו, ו-()slideToggle גורם לאלמנט להופיע אם הוא מוחבא, ולהחבאה של האלמנט אם הוא נראה. 

דוגמה ל-()slideUp:

לחצו עליי להעלמת הפסקה באמצעות אפקט slideUp

כשתלחצו על הכפתור הפסקה תעלם תחת הפסקה שמעליה

 

בהמשך המדריך נראה הדגמה נחמדה של slideUp ו-slideDown כשנבנה אקורדיון שימושי.

שליטה במהירות האפקטים

המתודות יכולות לקבל פרמטרים שונים. לדוגמה, ניתן לשלוט במהירות האפקט. כדי שמשך הזמן של ()show יהיה כ-2 שניות, נכתוב (show(2000. ערכי המספרים שאנחנו מעבירים הם במילי-שניות ולכן, חצי שנייה יבוטא ב-500 ושנייה תבוטא ב-1000.

דוגמת קוד: אקורדיון

כך זה נראה, לחיצה על כל אחד מהאלמנטים האפורים יגרום להחלקת האלמנט שמסתתר מתחת:

jQuery

ספריה פופולרית של JavaScript

סלקטורים

הדרך לחבר את הספרייה עם אלמנטים בדף

אפקטים

מדבר בעד עצמו

אירועים

לחיצה על מקש, שימוש בעכבר

 

מבנה ההטמ"ל הוא הבא:

<div id='wrapper'>
     <div id='parent'>
     <p>jQuery</p>
     <p>ספריה פופולרית של JS</p>
     <p>סלקטורים</p>
     <p>הדרך לחבר את הספרייה עם אלמנטים בדף</p>
     <p>סלקטורים</p>
     <p>הדרך לחבר את הספרייה עם אלמנטים בדף</p>
     <p>אפקטים</p>
     <p>מדבר בעד עצמו</p>
     <p>אירועים</p>
     <p>לחיצה על מקש, שימוש בעכבר</p>
     </div>
</div>

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

עכשיו נוסיף בין תגיות <style> את ה-CSS שיגרום להסתרת כל פסקה זוגית.

p:nth-child(even){display: none;}

 

הסלקטור (nth-child(even: בוחר רק את האלמנטים הזוגיים, ובמקרה זה רק את הפסקאות הזוגיות.

נוסיף לפסקאות הזוגיות צבע והתנהגות בעזרת הסלקטור (nth-child(odd:

p:nth-child(odd) {background-color:#787878; color: white; margin-top: -15px; display: block; cursor: pointer;}

אתם מוזמנים לקרוא יותר על סלקטורים של CSS, במדריך סלקטורים של CSS3.

האירוע שגורם להחלקת האלמנטים הוא הקלקה על כל אחת מהפסקאות האפורות (האי-זוגיות). אפשר לכתוב את זה כך:

$('p:nth-child(odd)').on('click' , function(){
$(this).next().slideDown(300);
});

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

אבל יותר מומלץ להשתמש במבנה הבא:

$('#parent').on('click', 'p:nth-child(odd)', function(){
$(this).next().slideDown(300);
});

שימו לב שאנחנו לא מאזינים באמצעות המתודה on לכל אלמנט שלוחצים עליו, אלא רק לדיב ההורה שנקרא parent#, ורק אז אנחנו מעבירים לו את הילדים (p:nth-child(odd. המבנה הזה מאפשר לחסוך במשאבים, מפני שאנחנו לא מצותתים לכל הילדים, אלא רק להורה ולילד הספציפי, שעליו לחצנו.

עכשיו אנחנו רוצים להוסיף, שבפעם הראשונה שמגיעים לדף, הפסקה השנייה תיראה. בשביל זה נוסיף ל-CSS, את הסלקטור ()nth-child: , ונעביר לו את מספרו של הילד בתור פרמטר. במקרה זה, אנחנו מעוניינים לחשוף את הפסקה השנייה.

p:nth-child(2) {display: block;}

שמבטל את השפעת display:none על כל הפסקאות הזוגיות, ולכן הפסקה השנייה תראה. לקריאה נוספת על הסתרת והצגת אלמנטים בדף באמצעות CSS.

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

$('#parent').on('click', 'p:nth-child(odd)', function(){
      $(this)
           .siblings('p:nth-child(even)').slideUp(300);
});

שימו לב, ש-()siblings מקבל כפרמטר את האלמנטים שעליהם הוא צריך לפעול, ובמקרה זה, הוא צריך לפעול רק על הפסקאות הזוגיות. לכן, ('(siblings('p:nth-child(even. ומה הוא עושה עם הפסקאות הזוגיות? מחליק אותם למעלה באמצעות ()slideUp.

כיצד לגרום לכך שבמקביל ל-slideDown על האלמנט הבא בתור, יעשה slideUp לכל שאר האלמנטים?

כאן בא לעזרתנו נושא השרשור (chaining), שמאפשר להפעיל על האלמנט מספר מתודות במקביל. וכך זה נראה:

$('#parent').on('click', 'p:nth-child(odd)', function(){
   $(this)
      .next().slideDown(300)
      .siblings('p:nth-child(even)').slideUp(300);
});

אפשר לראות שהמתודות שמתייחסות להצגת הפסקה הבאה בתור, וזו שמתייחסת להסתרת שאר הפסקאות משורשרות שתיהן ל-this

 

לסיכום, הקוד המלא לאקורדיון jQuery

<html>
<head>
<meta charset="WINDOWS-1255">
<title>jQuery tutorial effects</title>
<style>
      #wrapper{margin-right: auto; margin-left: auto; margin-top: 40px;
      width: 600px; border: 1px solid black; padding: 2px;}
      p{text-align: right; padding: 3px 10px;}
      p:nth-child(even) {background-color: #F8F8F8; display: none; margin-top: -15px;}
      p:nth-child(2) {display: block;}
      p:nth-child(odd) {background-color:#787878; color: white; margin-top: -15px; display: block; cursor: pointer;}
      p:first-child {margin-top: 0px;}
</style>
</head>
<body>
<div id='wrapper'>
      <div id='parent'>
      <p>jQuery</p>
      <p>ספריה פופולרית של JS</p>
      <p>סלקטורים</p>
      <p>הדרך לחבר את הספרייה עם אלמנטים בדף</p>
      <p>אפקטים</p>
      <p>מדבר בעד עצמו</p>
      <p>אירועים</p>
      <p>לחיצה על מקש, שימוש בעכבר</p>
</div>
</div>
     
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
(function(){
   $('#parent').on('click', 'p:nth-child(odd)', function(){
       $(this)
             .next().slideDown(300)
             .siblings('p:nth-child(even)').slideUp(300);
   });
})(jQuery);
</script>
</body>
</html>

למדריך הבא בסדרת ה-jQuery

לכל מדריכי ה-jQuery

הוסף תגובה חדשה

 

= 4 + 6