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

הסבר על חלק ה-HTML:
יש לנו שתי שכבות, נקרא להן slider ו-slider_track. השכבה הראשונה, slider, תשמש בתור החלק הנע של הסליידר.
השכבה השניה, slider_track, תשמש בתור ה-"מסילה" של הסליידר, והיא תעזור לנו לקבוע גבולות. לשתי השכבות נקבע הגדרת position: absolute.

הסבר על חלק ה-JS:
קודם כל, ניצור פונקציה בשם capture_start, ונשים אותה ב-onmousedown של השכבה slider. הפונקציה הולכת ככה:

קוד:

function capture_start()
 {
 	document.onmousemove = update_slider_x;
 	document.onmouseup = capture_stop;
 }

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



עכשיו ניצור פונקציה בשם capture_stop:

קוד:

function capture_stop()
 {
 	document.onmousemove = null;
 	document.onmouseup = null;
 }

הסבר על הפונקציה:
שתי השורות אומרות שאם אני מפסיק ללחוץ על העכבר/מזיז את העכבר, לא יקרה כלום.



עכשיו נעבור לחלק הרציני. ניצור פונקציה בשם update_slider_x:

קוד:

function update_slider_x(e)
{
	var is_moz = (navigator.product == 'Gecko');
	var is_ie = ((navigator.userAgent.toLowerCase().indexOf('msie'  ) != -1) && (!is_moz));
	if (is_moz)
	{
		var x = e.clientX;
	}
	else if (is_ie)
	{
		var x = event.clientX;
	}
	
	var left = findx('slider_track');
	var xmax = parseInt(document.getElementById('slider_track').s  tyle.width) + left;
	if (x >= left && x <= xmax)
	{
		document.getElementById('slider').style.left = x+'px';
	}
}

הסבר על הפונקציה:
תתעלמו מהפרמטר e. אל תייחסו לו שום משמעות.
המשתנה הראשון, is_moz, מחזיר משתנה בוליאני שקובע אם הדפדפן מבוסס Gecko (כמו mozilla) או לא.
המשתנה השני, קובע אם הדפדפן הוא IE או לא.
מבנה ה-if שנמצא אחרי שני המשתנים האלה, מחזיר את מיקומו של העכבר על המסך בציר האופקי - ציר ה-X.

המשתנה left, מחזיר את מיקום ה-X של השכבה slider_track, על ידי שימוש בפונקציה findx (עוג מעט נדבר גם על הפונקציה הזו).
המשתנה xmax, הוא בעצם מיקום ה-X המקסימלי שאליו מותר לסליידר להגיע. אנחנו משיגים את המיקום על ידי חיבור הרוחב של slider_track עם המשתנה left.

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



הפונקציה findx:

קוד:

function findx(id)
{
	obj = document.getElementById(id)
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			return obj.offsetLeft
		}
	}
	else if (obj.x)
	{
		return obj.x;
	}
}

הפרמטר id מקבל מחרוזת, המכילה את ה-id של האלמנט שאנחנו רוצים לבדוק את מיקום ה-X שלו.
התנאי הראשון רלוונטי לכל הדפדפנים חוץ מ-Netscape 4. הוא מקבל את מיקום ה-X של האלמנט על ידי שימוש ב-offset, שזה המרחק של האלמנט מהקצה הימני של המסמך.
התנאי השני רלוונטי רק ל-Netscape 4. הוא הרבה יותר פשוט. ה-X הוא בסך הכל מאפיין של האלמנט.



לחצו כאן בכדי לראות את התוצאה של המדריך

אני רוצה להגיד תודה גדולה לדקל, שבלעדיו לא הייתם רואים את המדריך הזה.
מקווה שנהניתם מהמדריך, אשמח לתגובות/הערות/הארות/שאלות

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

קוד:

document.getElementById('slider').onmousemove = update_slider_x;

וכמובן תדאג שבהרמת המקש זה יתאפס, אך למה להגדיר את הפונקציה לכל המסמך ?!
אולי כדי שגם אם יזיו את העכבר לא בדיוק על המחוון זה גם יעבוד ? או אולי בגלל בעיה אחרת ?

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

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

אגב, סרטון הפלאש שבקישור הראשון נוצר בפלאש 8 - אולי בגלל זה הוא לא עובד לך. תוכל להוריד את Flash Player 8 מכאן.

גם לי הוא לא עובד. ואני עובד עם flash 8....

אולי בעיה בזמן העלאת הקובץ. אצלך הוא מראה משהו?

https://2005-uploaded.fresh.co.il/2...23/22162628.swf

בכל אופן, למה אתם צריכים את הפלאש? יש לכם דוגמה של התוצאה בסוף המדריך...

ציטוט:

במקור נכתב על ידי dorkiaa12 בכל אופן, למה אתם צריכים את הפלאש?

כדי למצוא חסרונות במה שעשית