תחי ישראל - אין לנו ארץ אחרת

תחי ישראל -אין לנו ארץ אחרת

אפקטים של 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="//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

 

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים

 

 

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

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

שימו לב! הסקריפטים במדריכים מיועדים למטרות לימוד בלבד. כשאתם עובדים על הפרויקטים שלכם אתם צריכים להשתמש בספריות וסביבות פיתוח מוכחות, מהירות ובטוחות.

המשתמש באתר צריך להיות מודע לכך שאם וכאשר הוא מפתח קוד בשביל פרויקט הוא חייב לשים לב ולהשתמש בסביבת הפיתוח המתאימה ביותר, הבטוחה ביותר, היעילה ביותר וכמובן שהוא צריך לבדוק את הקוד בהיבטים של יעילות ואבטחה. מי אמר שלהיות מפתח זו עבודה קלה ?

השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.

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

 

 

ענה על השאלה הפשוטה הבאה כתנאי להוספת תגובה:

איך קוראים בעברית לצ`ופצ`יק של הקומקום?