הבעת IT

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

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

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

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

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 החלפה (הורידו 1992 פעמים)

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 (הורידו 11779 פעמים)

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

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

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

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

אמנם אין פתרון ישר קדימה ידוע כי יעבוד על פני מגוון של דפדפנים לנו להתמודד עם, הפתרון שניסיתי להגיע אכן נראה לעבוד הדפדפנים כמה שניסיתי אותו (IE6, אינטרנט אקספלורר 7 , FF).

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

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

CSS ו-HTML נראה כך
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <br/> צפיות: 3456 </ p>
</ P>
</ P>

התוצאה נראית כך: -

הצג את הדגמת כאן | מקור הורדת קבצים (הורד 452 פעמים)

TOP יישור CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <br/> צפיות: 1234 </ p>
</ P>
</ P>

התוצאה נראית כך: -

התחתונה יישור CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <br/> צפיות: 1234 </ p>
</ P>
</ P>

התוצאה נראית כך: -

הצג את הדגמת כאן | הורד כאן

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

בתקווה שיום אחד

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

הורד את ה-CSS ו-HTML של הפתרון הנ"ל כאן (הורד 452 פעמים) .. עבור understandability, CSS לא היה מותאם

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

לא שיש רק Lightbox של כמה שאתה יכול למצוא כאשר גוגל. הבעיה עם רוב תיבות אור שמצאתי היה כי כולם נראו להשתמש באחד או אחרות כבדות משקל של JavaScript במסגרות כמו Prototype JQuery, MooTools ואת אוהבת. כולם קריר swanky מחפש. אבל אם הדרישה שלך היא "אבל אני רוצה סקריפט Lightbox פשוט קל לשימוש באתר שלי", אז הנה היא:

כמה תכונות נחמדות של Lightbox זה

1. קל מאוד
   . 4kb של סקריפטים כאשר ארז (8 KB פרקה)
   ב. 2 קילו של CSS
   ג. שורות של HTML עבור מיכל Lightbox
2. פשוט להבין וליישם
3. אפשר לקבל תיבות אור מרובים על אותו דף.
4. מיכל Lightbox אותה משמש להראות, תוכן שונה (הכלול בנפרד חטיבות מוסתרים הדף), בהתאם הקישור / אפשרות הלחיצה.
5. באופן אוטומטי מרכזי עצמו, לוקח בחשבון את כל גורמים כגון, גובה חלון ורוחב (רזולוציית מסך), כמות בדף הגלילה ועל גובה את תוכן Lightbox
6. נבדק ב-IE 7 ו FF

הצג הדגמה |
הורד מיקוד מקור Lightbox (הורידו 1804 פעמים)

jo.js, jo_pack.js [גרסה ארז]: - סט פשוט של JavaScript חפצים [JO], המכיל, אלמנט החלון מיקום סקריפטים מסמכים. אתה יכול לפתוח JO.JS אם אתה רוצה ללכלך את הידיים עם Javascripting קצת מתקדם, יצירת פונקציות מופשטות, הארכת מאפייני אלמנט וכאלה. אם אין יותר מדי Javascripting, עזוב את זה.

lightbox.js, lightbox_pack.js [נוסח ארז]: - מכיל אור מנהל סקריפטים תיבת. אם אתה מעצב הדף, אחראי גם על יישום Lightbox על הדף, אתה צריך להבין LightBoxManager. LightBoxManager בעצם מכיל רק שתי פונקציות showLightBox ו closeLightBox.

lightbox.css: - אם אתה יודע CSS, אתה יכול לשחק עם סביב lightbox.css להתאים אישית את המראה-n-מרגיש lightbox.css

index.html: יישום לדוגמא של Lightbox 2 עם תוכן שונה

lb_underlay_bkg.png: - זה האור / סימי תמונה שקוף המשמש רקע ביסוד Lightbox [ביסוד היא שכבה מתחת lighbox, אשר מונעת מהמשתמש לחיצה על כל גוף אחר בדף, בעוד Lightbox פתוח]. ניתן להשתמש בכל תמונה או אפילו צבע אחיד למטרה זו, בהתאם לעיצוב הדף את הדרישה.

icon_lb_close.gif: - התמונה להגדלה ידית Lightbox קרוב בפינה הימנית העליונה של תיבת האור. ניתן להשתמש בכל תמונה בהתאם לעיצוב

הצג הדגמה |
הורד מיקוד מקור Lightbox (הורידו 1804 פעמים)

נא לתת לנו את הערותיך ואת המשוב ...

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

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