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

מדריך jQuery - אפקטים: hide ו- show

aetchin ,‏ CodeValue‏ ‏/‏ 17 מרץ, 2011
F+
F-

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

הצגה והסתרה בסיסית של אלמנטים

נתחיל בדף ה- HTML הבא, המכיל 2 כפתורים ו- div עם תוכן:

<!DOCTYPE html>
<
html
>
<
head>
  <title>hide and show</title
>
</
head
>
<
body>
  <input id="btnHide" type="button" value="Hide" />
  <input id="btnShow" type="button" value="Show" />
  <div id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Vivamus tristique luctus varius. Aliquam nibh sapien,
    eleifend sit amet lobortis non, imperdiet at felis. Proin
    aliquam odio non lacus porta ultrices.
    Nullam ut erat eu arcu facilisis scelerisque sit amet
    sit amet lorem.
</div
>
</
body
>
</
html
>

בהרצה בדפדפן הדף נראה כך:

image

נוסיף טיפול באירועי הלחיצה על הכפתורים. בלחיצה על כפתור ה- Hide נרצה להעלים את ה- div עם התוכן, ובעת לחיצה על כפתור ה- show להציג אותו.

<script type="text/javascript">
  $(document).ready(function () {
    $("#btnHide").click(function () {
      $("#content").hide();
    });
    $("#btnShow").click(function () {
     $("#content").show();
    });
  });  
</script> 

להפעלת הדוגמא לחצו כאן

אנימציה ב- jQuery: הצגה והסתרת אלמנטים

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

לדוגמא:

$("#content").hide();

הפרמטר שמועבר יכול להיות מספר, שמבטא את מספר המילישניות שהתעולה תארך. למשל 1000 מבטא שניה אחת, 500 מבטא חצי שניה וכו’. לחילופין, ניתן להעביר את הערכים ‘fast’ או ‘slow’ שמבטאים 600 מילישניות או 200 מילישניות, באופן הבא:

$("#content").hide('slow');

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

הפונקציה toggle

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

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

<input id="btnToogle" type="button" value="Toggle" />

ובאיזור הסקריפט:

$(document).ready(function () {
  $("#btnToogle").click(function () {
    $("#content").toggle('fast');
  });
});

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

להפעלת הדוגמא לחצו כאן

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

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

תגובות למאמר



עוד במדריך

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

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