הבעת IT

עם מגוון רחב של קרוסלות שם בחוץ, על MooTools רבים גם כן, אני עדיין החלטתי לכתוב מחלקה קרוסלה שלי, כמה סיבות טובות
1. רוצה תכונה ההחלפה (להיות מסוגל לקפוץ שקופית צעד מסוים / ב קרוסלה).
2. רצה חופש עם המיקום של הכפתורים / קישורים ימין ועל שמאל, בכל מקום שבו אני בבקשה.
3. שליטה רבה יותר על המדרגות שקופיות.

הצלחתי ליצור קרוסלה חדשה, עם התכונות הנ"ל ... להלן ... אתה מוזמן להציע כל שינוי היית דורשים!

דוגמה שלי נראה כך ... [ הדגמה בפרופיל ]

הצג הדגמה | הורדה MooTools קרוסלה עם גרסה 1.0 החלפה (הורידו 1995 פעמים)

1. קרוסלה החלפה

ניתן להוסיף בקלות ההחלפה כדי קרוסלה, פשוט על ידי קביעת דגל ההחלפה, שהוא parater האחרון עבר תוך יצירת מופע של MooCarousel כאמת (רוצה החלפה) או שקר (donot רוצה ההחלפה).

var carousel1 = חדש MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, נכון); / / ns = מספר שקופיות, SSS = צעד שקופיות בגודל

ו ofcourse אתה יכול לשנות את המראה-n-והתחושה של אלה achors ההחלפה שאתה רוצה על ידי שינוי ה-CSS שלהם.

. Carousel_paging {text-align: right; שוליים: 5px 10px 0 0;}
. Carousel_paging הנוכחי, עמוד carousel_paging {מתאר: none; רוחב:... 15px; גובה: 15px; קו גובה: 15px; text-align: מרכז, תצוגה: לחסום; float: שמאל, הרקע: # D8D8EB, שולי: 0 0 1px 0: text-decoration: none;}

. Carousel_paging: לרחף, carousel_paging {background: # 4D4D9B; color: # FFFFFF;} הנוכחי..

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

2. Customising הסמלים השמאל & העכבר

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

var carousel1 = חדש MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, נכון);

CSS
.. Carousel_container_l, carousel_container_r {margin: 50px 0 0 0; position: relative; רוחב: 23px; גובה: 20px; float: שמאלה, הסמן: מצביע;}

. Carousel_container_r {background-position: 0-38px;}

. Carousel_container_l {background-position: 0-58px;}

3. Customising צעדים שקופיות

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

var carousel1 = חדש MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, נכון);
c_ns = מספר שקופיות, c_sss = צעד שקופיות בגודל

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

/ * עבור סחרחרה 1 * /

var c1_w = 92; כתבה / / סחרחרה רוחב

var c1_n = 10; מספר / / הכולל של פריטים סחרחרה השוואה

var c1_pp = 4 / / מספר perpage סחרחרה השוואה פריטים

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp: / / SSS = צעד גודל השקופית

var c1_ns = parseInt (((* c1_w c1_n) / c1_sss) + 0.5): / / ns = מספר שקופיות

c1_sss + = c1_marginFactor: / / SSS = צעד גודל שקופיות, 51 עבור השוליים

דרישות: MooTools 1.2

הצג הדגמה | הורדה MooTools קרוסלה עם גרסה 1.0 החלפה (הורידו 1995 פעמים)

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

איך זה נראה כך:

	דירוג MooTools עם תמונות שונות הצג הדגמה
	דירוג MooTools עם ערכי אחוז הצג הדגמה
	דירוג MooTools עם ערכים החלקי הצג הדגמה

הורדה Mootols כוכב דירוג סקריפט (הורידו 718 פעמים)

דירוג הנתונים: מספר עשרוני שלם או אחוז
נכון לעכשיו התסריט נועדה להציג את נתוני הדירוג, כמו ערכים שלמים (1,2,3,4,5), ב שברים עשרוניים (1.24, 3.45 וכו ') או באחוזים (12% ועוד 55%). הבחירה להציג את הנתונים בכל אחד מהפורמטים שהוזכרו ניתן להגדיר פשוט על ידי שינוי כמה ערכים הדגל בתוך JavaScript (moorating.js)
בעיקרון יש שתי שני דגלים דואר לשחק איתם, להצגת ערכים בתבנית של הבחירה שלך ...

var inpercent = false; / / הגדר את הדגל הזה כאמת, אם אתם זקוקים ערכים אחוז שיוצג
var isFractional = false / / את זה על מנת נכון, אם אתה רוצה ערכים חלקיים כמו 1.24, 1.25, 4.56 ולא 1,2 ... 5

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

אם (isFractional) {if (x <= 5 | | x> = 0) moostartval [i] innerHTML = formatNumber (x, 3);.} / / 2 משתנה 3
אחר {moostartval [i] innerHTML = Math.round (x).

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

פונקציה updateRating (id, דירוג) {
/ / Alert (id + "," + דירוג);
/ / לעשות כל מה עם דירוג
}

יש פונקציה ב-JavaScript בשם "updateRating". פונקציה זו כבר עברה את תעודת הזהות של דיב דירוג, כדי לזהות על איזה דירוגים (אם יש יותר דירוגים בדף אחד) עודכן וערך דירוג [updateRating (id, דירוג)]. אתה יכול לבחור מה שאתה רוצה עם ערכים אלה, כפי שציינתי קודם לכן.

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

. Moostar {margin: 0px; padding: 0px; גלישה: מוסתר; רוחב: 84px; גובה: 20px; float: שמאל, רקע: כתובת האתר ("stars.gif") repeat-x;}
. Moostar span {float: שמאל, שולי: 0px; padding: 0px; תצוגה: לחסום; רוחב: 84px; גובה: 20px; text-decoration: none; text-indent:-9000px; z-index: 20;}
.. Moostar curr {background: url ("stars.gif ') עזב 25px;}

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

דרישות: MooTools 1.2
הורדה Mootols כוכב דירוג סקריפט (הורידו 718 פעמים)

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

צפה בגרסה 2.2 הדגמה | MooTools הורדה נעוץ פעמיים גרסה Slider 2.2 (הורידו 11825 פעמים)

אתה יכול בקלות לשנות את המראה והתחושה של אינדיקטור טווח (בכחול בדוגמה לעיל), כפתור המחוון, את המסלול על ידי שינוי המחוון slider.css כנדרש.

אל תפיל לי תגובה אם אתה מוצא את זה שימושי.