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

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

מתודת getPrevious

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

<ul>
<li>פריט ראשון</li>
<li>פריט שני</li>
<li id="myListItem">פריט שלישי</li>
<li>פריט רביעי</li>
<li>פריט חמישי</li>
</ul>

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

• פריט ראשון
• פריט שני
• פריט שלישי
• פריט רביעי
• פריט חמישי

הקוד נראה כך, ראשית אני מצמיד אירוע לכפתור שמפעיל את פונקצית showPrev:

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

אחרי כן, פונקצית showPrev שמורכבת משתי שורות, הראשונה בוחרת את הפריט השלישי ובאמצעות מתודת getPrevious מחזירה לי את הפריט השני שאותו כבר אדאג לצבוע באדום עם setStyle (שיילמד במאמרים הבאים, כרגע קחו אותו כפשוטו).

function showPrev() {
	var previousSibling = $('myListItem').getPrevious();
	previousSibling.setStyle('color', 'red');
}

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

מתודת getNext

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

הקוד פשוט ביותר, במקום getPrevious, אנו משתמשים ב-getNext:

function showNext() {
	var nextSibling = $('myListItem').getNext();
	nextSibling.setStyle('color', 'red');
}

גם ב-getNext אנו יכולים להשתמש בארגומנט שהוא סלקטור של CSS.

מתודות getAllNext ו-getAllPrevious

בניגוד ל-getNext ול-getPrevious, המתודות getAllNext ו-getAllPrevious מחזירות לנו את כל האלמנטים האחים. אם נמשיך בדוגמא שלנו עם הרשימה:

• פריט ראשון
• פריט שני
• פריט שלישי
• פריט רביעי
• פריט חמישי

זה די פשוט, וגם הקוד:

function showNextAll() {
	var nextSiblings = $('myOtherListItem').getAllNext();
	nextSiblings.setStyle('color', 'red');
}

function showPrevAll() {
	var previousSiblings = $('myOtherListItem').getAllPrevious();
	previousSiblings.setStyle('color', 'red');
}
	
window.addEvent('domready', function() {
    $('myButton3').addEvent('click', showPrevAll);
    $('myButton4').addEvent('click', showNextAll);
});

הסינטקס מאד דומה כאן ואין לי מה להוסיף מעבר לדוגמא.

מתודת getFirst ומתודת getLast

המתודות האלו זהות למתודות getPrevious ו-getNext לחלוטין. הן פשוט מחזירות את אלמנט האח הראשון ואת אלמנט האח האחרון מכל האחים.

מתודת getParent

המתודה הזו מחזירה את ההורה המיידי של האלמנט. במקרה שלנו (של הרשימה שבדוגמא) את ה-ul. הכפתור הזה למשל ישנה את ה-list-style של ה-ul למשהו מגניב.

function showParent() {
	var parent = $('myOtherListItem').getParent();
	parent.setStyle('list-style', 'katakana-iroha');
}

בנוסף יש גם את מתודת getParents שמחזירה מערך של כל ההורים של האלמנט שלנו.

מתודת getChildren

במידה ולאלמנט שלנו יש ילדים, מתודת getChildren תסייע לנו לבחור את כולם. כך למשל, בואו ונניח שיש לי רשימה כלשהי:

<ul id="myList">
<li>פריט ראשון</li>
<li>פריט שני</li>
<li>פריט שלישי</li>
<li>פריט רביעי</li>
<li>פריט חמישי</li>
</ul>

אם אני ארצה לבחור את כל הילדים של ה-ul שלי, שה-id שלו הוא myList, מה שאצטרך לעשות הוא לבחור את ה-ul שלי (וזה קל כי יש לו id) ואז להשתמש במתודת getChildren, משם הכל פשוט. הנה דוגמא לפונקציה שבוחרת את הילדים וצובעת אותם באדום:

function showChildren() {
	var children = $('myList').getChildren();
	children.setStyle('color', 'red');
}

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

• פריט ראשון
• פריט שני
• פריט שלישי
• פריט רביעי
• פריט חמישי

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

מתודת empty

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

הקוד הוא פשוט עד כדי גיחוך:

function emptyChildren() {
	$('myList').empty();
}

מתודת destroy

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

$('myList').destroy();

מתודות של טפסים

ישנן שתי מתודות ששימושיות במיוחד בטפסים.

מתודת getSelected

מתודה שאפשר להפעיל אותה על אלמנט מסוג select והיא מחזירה לנו את האלמנט option שסומן על ידי המשתמש. עם האלמנט עצמו אפשר לעשות מה שרוצים כמובן.

בוא וניקח כדוגמא רשימה חביבה:

<select id="country-select" name="country">
    <option value="US">United States</option>
    <option value ="IL">Israel</option>
    <option value ="IT">Italy</option>
</select>

נניח שאני רוצה לעשות כפתור שמקפיץ alert עם ה-value שהמשתמש בחר. איך עושים את זה? באמצעות מתודת getSelected. נצמיד אירוע לכפתור וכשהוא יילחץ הוא יפעיל את הפונקציה הבאה:

function showSelected() {
	var country = $('country-select').getSelected();
	alert(country.get('value'));
}

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

United StatesIsraelItaly

מתודת toQueryString

מתודה שימושית למדי כאשר יש לי טופס ואני צריך לקחת את כל הערכים ולהפוך אותם למחרוזת ארוכה לשליחה ב-GET או POST.

דוגמא במקרה הזה היא הכי טובה, בואו ונניח שיש לי טופס חביב:

<form id="myForm" action="submit.php">
    <input name="email" value="[email protected]" />
    <input name="zipCode" value="90210" />
</form>

אם אני רוצה לבצע סיריאליזציה של המידע שיש בו, אני אשתמש במתודת toQueryString באופן הבא:

function showString() {
	var myFormString = $('myForm').toQueryString();
	alert(myFormString);
}

פשוט ונעים – והנה הדוגמא החיה:

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