מתודות של אלמנט ב-MooTools: חלק שני

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

מתודת grab

במאמר הקודם למדנו על מתודת inject שבאמצעותה אנו מכניסים אלמנט של MooTools ל-DOM (וזה לא משנה אם מדובר באלמנט קיים או אלמנט שלקחנו מה-DOM באמצעות selector). מתודת grab עושה בדיוק את אותו הדבר, רק שפה אנו המתודה היא של האלמנט שמקבל את האלמנט השני לתוכו.

בדוגמא אני אצור אלמנט חדש מסוג anchor ואשתמש במתודת grab של אלמנט myDiv כדי להכניס לתוך myDiv את ה-anhcor שלי.

ראשית, יצירת ה-anchor, אין כאן שום דבר שאנחנו לא מכירים:

var myAnchor = new Element('a', {
	'href': 'https://internet-israel.com',
	'class': 'myClass',
	'html': 'I am new link, click or mouse over me!',
	'styles': {
		'display': 'block',
		'border': '1px solid black'
		}
	}
});

שנית, ה-grab. שימו לב שמדובר במתודה של myDiv. ראשית אבחר אותו עם הסלקטור (כדי שיירש את אלמנט ה-MooTools) ושנית אפעיל את מתודת ה-grab. המתודה מקבלת שני ארגומנטים – הראשון הוא האלמנט שאנו רוצים להכניס, והשני הוא המיקום של האלמנטים ביחס לילדים שקיימים כבר. הוא יכול להיות top או bottom:

$('myDiv').grab(myAnchor, 'bottom');

פשוט ביותר, בואו ונראה את זה עובד:

כל לחיצה על הכפתור גורמת ל-myDiv לבצע grab לאלמנט שיצרתי. הקוד המלא, כולל האירוע שהצמדתי לכפתור, נראה כך:

var myAnchor = new Element('a', {
	'href': 'https://internet-israel.com',
	'class': 'myClass',
	'html': 'I am new link, click or mouse over me!',
	'styles': {
		'display': 'block',
		'border': '1px solid black'
		}
	}
});

function addInput() {
	$('myDiv').grab(myAnchor, 'bottom');
}

window.addEvent('domready', function() {
    $('myButton').addEvent('click', addInput);
});

מתודת adopt

מתודת adopt עובדת בדיוק כמו grab, רק שאפשר לקחת כמה אלמנטים. נניח שיש לי שני אלמנטים חביבים:

var myAnchor = new Element('a', {
	'href': 'https://internet-israel.com',
	'class': 'myClass',
	'html': 'I am new link, click or mouse over me!',
	'styles': {
		'display': 'block',
		'border': '1px solid black',
		}
	}
);

var anotherAnchor = new Element('a', {
	'href': 'http://www.google.com',
	'class': 'myClass',
	'html': 'Google Link',
	'styles': {
		'display': 'block',
		'border': '1px solid red',
		}
	}
);

אם אני רוצה להצמיד את שניהם (או יותר), אני יכול להשתמש במתודת adopt שתיקח את כל האלמנטים. איך עושים את זה? פשוט מאד, המתודה עובדת כמו grab רק שהיא מקבלת כארגומנטים אלמנטים (או מערך של אלמנטים):

$('myDiv2').adopt(myAnchor, anotherAnchor);

והנה הדוגמא החיה:

מתודת wraps

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

var niceAnchor = new Element('a', {
	'href': 'https://internet-israel.com',
	'class': 'myClass',
	}
);

שנית, באמצעות $ נבחר ספאן חביב שה-id שלו הוא mySpan. נשתמש במתודת wraps של אלמנט הקישור שיצרנו על מנת לעטוף את ה-span:

niceAnchor.wraps($('mySpan'));

וכך זה יראה:

ספאן חביב

מתודת appendText

המתודה הזו מאפשרת לנו להוסיף טקסט לאלמנט. זוכרים שכאשר אני יוצר אלמנט מסוג anchor בדוגמאות לעיל, יש לי תכונה אחת שנקראת text וכוללת את הטקסט של הקישור? אז בדיוק זה, להוסיף טקסט לאלמנט מסוים. נניח ויש לנו קישור שה-id שלו הוא ilAnchor ואני רוצה להוסיף לו טקסט. כל מה שעלי לעשות הוא:

$('ilAnchor').appendText(' Is Great Site! ');

הארגומנט היחידי של המתודה הזו הוא מחרוזת הטקסט שאנו מוסיפים. והנה הדוגמא המיוחלת:

קישור לאינטרנט ישראל!

מתודת dispose

מתודת dispose פשוט מוחקת את האלמנט מה-DOM. מה שטוב בה, היא שהיא מחזירה את האלמנט וכך אנו יכולים להשתמש בו שוב, אם אנו ממש רוצים.

למשל, הקוד הבא יעלים את כל האלמנטים שיש להם class בשם myClass:

$$('.myClass').dispose();

והנה הדוגמא המיוחלת:

זוהי פסקה שיש לה class ששמו בישראל הוא myClass

מתודת clone ומתודת replaces

מדובר בשתי מתודות ששימושיות לאו דווקא בהקשר של שינוי ה-DOM אבל לא מצאתי מקום יותר טוב לדון עליהם מאשר כאן. באופן עקרוני clone משמשת אותנו ליצור העתק אחד לאחד של אלמנט מסוים. לא משהו שאנחנו לא מכירים משפות OOP אחרות. עושים את זה כך:

var copy = myElement.clone([contents, keepid]);

שני הארגומנטים הם contents (בדיפולטיבי הוא true) שבו אנו בוחרים אם לשמור את התוכן של האלמנט או רק את המבנה. הארגומנט השני הוא keepid (בדיפולטיבי הוא false) שבו אנו בוחרים אם לשמור על ה-id המקורי.

מתודת replace היא מתודה שבה אנו מחליפים אלמנט אחד באלמנט אחר. אין הרבה מה לכתוב על המתודה הזו.

var element = myElement.replaces(el);

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