שינוי גודל אלמנטים עם הרחבת Resizable ל- scriptaculous
אור סילוני, 04/09/2007
לדוגמאות לחצו כאן
תקציר
Resizables הינה הרחבה לספריית scriptaculous המאפשרת לשנות גודל של אלמנטים באמצעות גרירה ושחרור של העכבר. ההרחבה מבוססת על ההרחבה Draggable (כ- 80% מהקוד), כאשר שינויים הכרחיים בוצעו על מנת לאפשר את הפונקציונליות השונה של הרחבה זו.
התקנה
התקנת ההרחבה בשני צעדים פשוטים:
- העתקת הקובץ (resizables.js) לתקיית scriptaculous של הפרויקט שלכם.
-
בתוך הקובץ scriptaculous.js היכן שמפורטים כל הסקריפטים המובנים, פשוט הוסיפו ‘,resizable’ (פסיק ולאחר מכן resizable) בתוך המחרוזת. לחילופין, אפשר להוסיף קריאה ישירה לקובץ עם תג
<script>ב- head של קובץ ה- html.
הפניה
יצירת אוביקט resizable חדש:
new Resizable(‘element_id’, {options});
תכונות:
- handle - קובע האם שינוי גודל האלמנט יתבצע ע"י 'ידית' (אלמנט אחר מזה שאת גודלו משנים). הערך חייב להיות הפניה לאלמנט או id של אלמנט.
- snap – קובע האם שינוי גודל האלמנט יבוצע במדרגות. אם false (ב"מ) לא יבוצע שינוי גודל במדרגות, אחרת יקבל ערך מהסוגים: xy או [x,y] או function(x,y){ return [x,y] }.
- constraint – אם נקבע ערך ‘horizontal’ או ‘vertical’ שינוי גודל האלמנט יבוצע רק ברוחב או בגובה בהתאמה.
- minHeight – קובע גובה מינימלי בפיקסלים שהאלמנט לא יקטן מעבר אליו.
- minwidth – קובע רוחב מינימלי בפיקסלים שהאלמנט לא יקטן מעבר אליו.
- maxHeight – קובע גובה מקסימלי בפיקסלים שהאלמנט לא יגדל מעבר אליו.
- maxWidth – קובע רוחב מקסימלי בפיקסלים שהאלמנט לא יגדל מעבר אליו.
בנוסף, הפרמטר options מקבל את פונקציות ה- callback הבאות:
| Callback | תיאור |
|---|---|
| onStart | נקראת כאשר שינוי הגודל מתחיל |
| onResize | נקראת שוב כאשר העכבר זז בעת שינוי גודל אלמנט |
| change | כמו onResize. מקבלת כפרמטר את אוביקט ה- Resizable |
| onEnd | נקראת כאשר שינוי הגודל מסתיים |
לפרטים נוספים ראו את קוד המקור או את הרחבת Draggable ב- scriptaculous, היות והקוד של שתי ההרחבות דומה ברובו. להורדת הקוד של Resizeable לחצו כאן.
איך ממשיכים?
הערות:
רישיון שימוש חופשי - לפי תנאי הרישיון של scriptacolusאור סילוני,
GUI Developer
orr@comet.co.il