TayebDev

בספריית האפקטים של mootools יש אפקט גלישה (Slide). אפקט זה מאפשר “לסגור” ו”לפתוח” תוכן מסויים. למשל בפורום עצי, כאשר לוחצים על כותרת אז התוכן נפתח וכשלוחצים שוב על הכותרת התוכן נסגר. כדי לבצע את אפקט זה אין יותר פשוט מלשנות את ה-display של אלמנט התוכן מ-block ל-none ולהפך. אבל אם אנחנו רוצים לעשות שהסגירה והפתיחה “יגלשו” פנימה והחוצה זה כבר מסבך טיפה את העניינים. לכן ב-Mootools הכינו מחלקה שתפשט לנו את הקוד, המחלקה נמצאת במודול fxpack.js .

var slideEffect = new Fx.Slide(”My_Element_ID”, options);

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

slideEffect.show(); // Hides the element without a transition.
slideEffect.hide(); // Shows the element without a transition.
slideEffect.toggle(); //Hides or shows a slide element, depending on its state;

שימו לב: הגובה/רוחב שאליו האפקט יגדיל את האלמנט הוא אותו גובה/רוחב ברגע יצירת האפקט. אז רצוי שה-display יהיה שונה מ-none ברגע היצירה.

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

תגיות טכנוראטי: mootools, Fx.Slide, javascript