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

במאמר הקודם למדנו על סלקטורים ב-MooTools.
מה שחשוב בנוגע לסלקטורים, בין אם מדובר בסלקטורים שמחזירים לנו אלמנט אחד ($ או getElement) ובין סלקטורים שמחזירים לנו מערך של אלמנטים ($$ או getElements), שלא מדובר במשהו שרק 'בוחר' אלא לוקח את אובייקט ה-DOM ומוריש לו את תכונות והמתודות של אובייקט שנקרא אלמנט MooTools. האובייקט הזה מכיל מגוון של מתודות שימושיות אבל חשוב להבין שמדובר באובייקט של ממש שאנחנו גם יכולים ליצור אותו יש מאין ויש לו גם constructor משלו.

יצירת אובייקט מסוג אלמנט

ה-constructor של האלמנט מקבל שני פרמטרים – הראשון הוא סוג האלמנט (למשל a או p – סוגי תגיות HTML) והשני הוא אובייקט שבו יש את הפרמטרים. למשל, יצירת קישור תהיה באופן הבא:

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'
		},
	'events': {
		'click': function(){
	    		alert('clicked');
		},
		'mouseover': function(){
		    alert('mouseovered');
		}
	}
});

אין יותר מדי מה להסביר כאן, אני מעביר פרמטר ראשון שהוא סוג האלמנט (במקרה הזה a) ואת האובייקט שמכיל את כל התכונות שלו כולל events. אם אני רוצה לראות את זה בחי, אני צריך להכניס את האובייקט הזה לתוך ה-DOM שלי. בניתי פונקציה קטנה שמכניסה את האלמנט שנוצר בכל לחיצה על הכפתור:

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

מתודת inject

אחרי שיצרנו אלמנט חדש, אנחנו יכולים להכניס אותו ל-DOM שלנו באמצעות מתודת inject שמכניסה את האלמנט שלנו לתוך אלמנט אחר. בדוגמא עם הכפתור, אני מכניס בכל פעם את האלמנט שיצרתי (myAnchor) אל תוך אלמנט אחר שנקרא myDiv. אני יכול לבחור להוסיף את האלמנט שלי לתוך אלמנט אחר לפני (top) או אחרי (before) הילדים של האלמנט האחר, אחריו (after) או לפני (before) האלמנט האחר עצמו.

בדוגמא שלעיל, השתמשתי במתודת inject על מנת להכניס את myAnchor לתוך myDiv לפני הילדים שלו (כלומר, השתמשתי בארגומנט top) :

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'
		},
	'events': {
		'click': function(){
	    		alert('clicked');
		},
		'mouseover': function(){
		    alert('mouseovered');
		}
	}
});

myAnchor.inject($('myDiv'), 'top');

Set\Get

כמו בכל אובייקט שמכבד את עצמו, גם באלמנט ב-MooTools יש Set ו-Get. צמד המתודות האלו מאפשרות לי לשנות תכונות של האלמנט ולאחזר אותן. שימו לב שמדובר בתכונות שיש להן ביטוי באלמנט. אני לא יכול להחזיר תכונות שנמצאות ב-CSS למשל.

כך למשל אשתמש ב-set על מנת לשנות את כל הצבעים של הפסקאות לכחול:

$$('p').set('styles', {
    'color': 'blue',
});

אני בוחר עם הסלקטור $$ את כל האלמנטים של p ומשנה את התכונה styles לכחול. התכונה מקבלת אובייקט שיכול להכיל עוד דברים חוץ מצבע. והנה הדוגמא החיה.

אם אני רוצה לקבל מידע על תכונה מסוימת, אפשר להשתמש ב-get, אם לאחר שלחצתי על הכפתור ושיניתי את כל ה-style של הפסקאות לכחול ואני רוצה לבדוק את זה, אני אריץ את הפקודה הבאה:

alert($$('p').get('style'));

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

מתודת erase

מתודת erase מאפשרת לי למחוק תכונה מסוימת. כך למשל, אם אני רוצה למחוק את התכונה שהוספתי בדוגמה הקודמת, אני אבקש למחוק את כל ה-style של הפסקאות השונות:

$$('p').erase('styles');

מתודות Property לאובייקטים של DOM

אם באלמנט מסוג אובייקט DOM עסקינן, ניתן להשתמש במתודות אחרות המתאימות יותר לאלמנט DOM ומקבילות ל-get,set ו-erase. השמות של המתודות האלו הם: setProperty, getProperty ו-removeProperty.

מתודות properties לאובייקטים של DOM

בדומה ל-set,get,erase ול-setProperty, getProperty, removeProperty שהן המקבילות שלהן, יש לי שלוש מתודות שמטפלות בכמה תכונות ולא רק בתכונה אחת. בואו ונניח קישור חביב:

<a id="myNiceAnchor">This is nice anchor</a>

נניח ואני רוצה להצמיד לקישור החביב הזה שתי תכונות: תכונה של href ותכונה של title. איך אני עושה את זה? אני יכול להשתמש ב-set או ב-setProperty (עדיף ב-setProperty כי מדובר באלמנט שנמצא ב-DOM). אבל אז אני אצטרך להשתמש בשתי פקודות. אם אני אשתמש ב: setProperties אני יכול להעביר אובייקט שבו יש כמה וכמה תכונות.

This is nice anchor

והקוד יראה כך:

function setMultiple() {
$('myNiceAnchor').setProperties({
'href' : 'https://internet-israel.com',
'title' : 'This is my Title'
});
}

אם אני רוצה לקבל מהלינק החביב הזה את התכונות שלו, אני אשתמש ב-getProperties:

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

var myResult = $('myNiceAnchor').getProperties('href','title');
alert("href : "+ myResult.href + "\ntitle : " + myResult.title);

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

$('myNiceAnchor').removeProperties('href','title');

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

מתודות ששולטות על class

גם class הוא תכונה של אלמנט ויש לנו ארבע מתודות שונות לשליטה על ה-class.

הוספת class לאלמנט

בדומה ל-set ול-setProperty, מתודת addClass מוסיפה class חדש לאלמנט. לדוגמא:

$('myElement').addClass('newClass');

בדיקה אם לאלמנט מסוים יש class

מתודת hasClas מקבילה ל-get ול-getProperty. היא מחזירה לנו true או false אם ה-class לא נמצא.

$('myElement').hasClass('testClass'); //returns true

מחיקת removeClass

מתודה זו המקבילה ל-erase ול-removeProperty מוחקת את ה-class.

$('myElement').removeClass('newClass');

מתודת toggle

זו מתודה מגניבה שבודקת אם יש class מסוים. במידה ויש – היא תסיר אותו. במידה ואין – היא תוסיף אותו. אידיאלי למפסקים שונים. אני אדגים באמצעות שימוש ב-div חביב:

בדקו עם firebug כדי לראות איך בכל לחיצה ה-class של ה-div משתנה. את זה עשיתי עם השורה הבאה:

$('myNiceDiv').toggleClass('myClass');

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