ממשק המשתמש Yahoo! בלוג (YUIBlog)

Yui 3 עצה מהירה: הוספת מדהים משלך

לוק ( @ ls_n ) פורסמו זה קטע בתשובה לשאלה לפני כמה ימים, ואני חשבתי שזה היה שווה לשתף כאן עצה מהירה.

כמו ניבים בורר המבוסס ביותר, הרבה כוח הבעה Yui של 3 מגיע מה אתה יכול לעשות ברגע שיש לך התייחסות אחת או יותר HTMLElements - ב Yui 3, זה אומר שיש התייחסות הצומת, אשר בדרך כלל אתה מקבל באמצעות Y.one( selector string ) או Y.all( selector string ) . אז Y.one("#foo"). doSomethingInteresting דפוס משותף.

קל להרחיב את הביטוי Yui של 3 על ידי הוספת קסם משלך Node (ו / או NodeList). הנה דרך אחת לעשות את הסיומת שלך מודולרית הניתנת לשימוש חוזר.

ראשית, ליצור מודול מותאם אישית חדש (אנחנו קוראים לזה node++ ):

  YUI.add ("צומת + +", הפונקציה (Y) {
	
	 / / מגדיר פונקציה כי יפעל בהקשר של
	 / / Node למשל:
	 doSomethingAwesome function () {
		 Y.log ("יש משהו מדהים פה.");
	 }

	 / / להשתמש addMethod להוסיף doAwesomeThing אב טיפוס הצומת:
	 Y.Node.addMethod ("doAwesomeThing", doSomethingAwesome);
	
	 / / להרחיב את פונקציונליות NodeLists:
	 Y.NodeList.importMethod (Y.Node.prototype, "doAwesomeThing");
	
 }, '0 .0.1 ', {דורש: ["הצומת"]}); 

תמצית של לוק כאן .

עם הגדרה זו על הדף, node++ ניתן use D בכל מקרה. בקוד יישום שלך, היית עושה:

  Yui (). השימוש ("צומת + +", הפונקציה (Y) {
	
	 / / להשתמש מצומת אחת:
         . Y.one ('# foo') doAwesomeThing ();

	 / / להשתמש מתוך NodeList:
	 Y.all ("p") doAwesomeThing ().
	
 }); 

שים לב, רק למשל Yui (ים) שאליו נקשרים שלך node++ מודול תהיה גישה doAwesomeThing . תכונה אחת של עיצוב זה שאתה תאהב בעת בניית יישומים מורכבים היא יישום ההיגיון שלך לא צריך לשנות אם רשימת התלות של node++ מתפתח - כי יקבל מטופלים עבורך באופן אוטומטי ב use() זמן, תלות הצהרה נשאר עם קוד שאליו הוא מתייחס.

מצא את שיחות: Bloglines | technorati

לשתף ולהרחיב: הפוך עם del.icio.us | Digg אותו! | reddit!

Yui תיאטרון - DAV זכוכית: (. 36 דקות) "שימוש Node.js ו Yui 3"

עבודה של ריאן דאל על Node.js - והקהילה ויוצרים סביב פרויקט - הצטרפה HTML5 כמו אחד הסיפורים הגדולים של 2010. Yui מהנדס DAV זכוכית כבר פועלים כדי להפוך את Yui 3 ברית רב עוצמה מיישמים Node.js, וגם סרט זה הוא מראה לך מה הוא עשה עד כה - כולל הדגמות של יישומונים משופרות בהדרגה פועל על אותו קוד לקוח ושרת. אל תחמיצו את זה.

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

• הורדת וידאו HD (480p ~ 271MB)
• הורדת סרטון (M4V)
• ברזולוציה גבוהה, הגרסה transcripted דיבורים זה זמין באתר Yui תיאטרון

אחרים אחרונים Yui סרטונים תיאטרון:

• אלואיס Reitbauer: dynaTrace אייאקס Edition - dynaTrace מספק אחד הכלים החזקים ביותר של ניתוח הביצועים של יישומי אינטרנט ב-Internet Explorer. בהרצאה זו, dynaTrace מהנדס אלואיס Reitbauer עובר ארבעה תרחישים אנליטית ספציפיים באמצעות ממשק dynaTrace.
• ריאן גרוב: השגת ביצועים זן עם Yui 3 - בעקבות הנחיות קודיפיקציה יכול לעזור לך לבנות אתרי אינטרנט מהיר, אבל יישומים הבניין נקיים, במהירות להרחבה כרוך גם נקיטת גישה מאוזנת לביצועים בכל רמה של עבודה F2E שלך. Yui 3 נועד לסייע לך בתהליך הזה, מתן שכבת הזכות בגודל הפשטה עם המובנה קסם ביצועים מגוון כלים שהופכים קוד הממשק מהיר קל ומהנה לייצר. בפגישה זו, נחקור זן של performant JavaScript בעולם Yui 3 ו להכיר לך כמה כלים רבי עוצמה Yui 3 מעמיד לרשותכם ביישום כל אתה כותב.
• דאגלס Crockford: Crockford JavaScript על - סצנה 6: Loopage - פיתוח תוכנה נפגעת על ידי קבוצה מסוימת של טעויות התכנון שנעשו בשפות התכנות הראשונה חזר על עצמו את כל מה שנעשה מאז. וגם, קצת באורח פלא, JavaScript הוא הולך לעשות את זה נכון, באופן קיצוני משנה את הדרך בה אנו כותבים יישומים. שוב. בלולאה של היסטוריה, זה כבר קרה פעם, אבל זה מעולם לא קרה כך. זו הסיבה מדוע זה איכפת לך על הופעתה של ג'אווה סקריפט בצד השרת ואת ההתרגשות סביב פרויקטים כמו Node.js - לא מפני שהם בסוף חדה של מגמה, אלא משום שהם סוללים את הדרך לקראת המהפכה הגדולה הבאה בתוכנה.

מנוי Yui תיאטרון:

• Yui תיאטרון RSS feed
• Yui תיאטרון ב-iTunes

מצא את שיחות: Bloglines | technorati

לשתף ולהרחיב: הפוך עם del.icio.us | Digg אותו! | reddit!

פוקוס ביצוע: השכרת רכב Express

השכרת רכב Express היא המכונית העצמאית המובילה להשכרת השוואה אתר באינטרנט. הוא מיידע את המשתמשים מכוניות להשכרה באינטרנט ביותר מ -1000 ערים ושדות תעופה ברחבי העולם.

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

אילו רכיבים Yui אנחנו משתמשים?

הרכיבים שאנחנו כבר כוללים באמצעות מנהל החיבורים , השלמה אוטומטית , בנתוני המקור , לוח שנה , אנימציה , JSON , ואת מיכל .

למה בחרנו Yui

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

כיצד אנו משתמשים Yui

אנו משתמשים Yui במספר דרכים. רכיבים 4 שלנו ביותר בהם נעשה שימוש הם השלמה אוטומטית, לוח שנה, מיכל, ואת מנהל החיבורים. הנה כמה מהדרכים בהם אנו משתמשים כל אחד מהמרכיבים האלה.

השלמה אוטומטית

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

לוח שנה

רכיב לוח שנה משמש גם ברחבי האתר, כאשר השוכר הוא למלא את התאריכים כדי לערוך חיפוש. אנחנו משתמשים בגרסה מותאמת אישית של ג'ון Peloquin לוח שנה מרווח בחירה והצגה של אותו דיאלוג Yui . בעצם מה שרצינו לעשות היה לתת את השוכר להציג שני חודשים בבחירת התאריכים שלהם, כמו גם ויזואלית להראות להם מה טווח התאריכים הם כרגע שבחרת. שוב, זה היה פשוט מאוד ליישום באמצעות Yui 2 לוח שנה, וזה בעצם ירד ליצירת דיאלוג Yui, קביעת הגוף להכיל div במשך שנה, ואז מצרף לוח שנה מרווח Yui ל div זה.

מכולות

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

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

חיבור Manager

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

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

סופי מחשבות

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

מצא את שיחות: Bloglines | technorati

לשתף ולהרחיב: הפוך עם del.icio.us | Digg אותו! | reddit!

ב 3 Yui גלריה: RaphaelJS מאט טיילור של מודול

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

בעוד ספריה מרשימה, אבל מצאתי שאני יכול להוסיף כמה תכונות חשובות אלמנטים של הספרייה RaphaelJS עם YUI3. התחלתי את המאמצים הללו עם החדש מודול RaphaelJS גלריה .

טוען RaphaelJS עצלן ותוספות

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

 
 Yui ({הגלריה: "גלריה-2010.09.22-20-15 '}). השימוש (" גלריה רפאל ", הפונקציה (Y) {
 
	 Y.Raphael (). להשתמש (פונקציה (רפאל) {
		
		 / / להשתמש רפאל כאן בדיוק כמו שהיית עושה מחוץ Yui
		 var נייר = רפאל ("myPaper ', 500, 500);
 
	 });
 
 });

אם אתה משתמש ב-plugins RaphaelJS, ציין דרכם במערך ולשלוח כי הפרמטר הראשון Y.Raphael () להשתמש () function.:

 
 Yui ({הגלריה: "גלריה-2010.09.22-20-15 '}). השימוש (" גלריה רפאל ", הפונקציה (Y) {
 
	 myPlugins var = ['תוספים / raphael.awesomePlugin.js "," תוספים / raphael.wickedPlugin.js'];
 
	 Y.Raphael (). להשתמש (myPlugins, הפונקציה (רפאל) {
 
		 / / להשתמש רפאל כאן בדיוק כמו שהיית עושה מחוץ Yui
		 var נייר = רפאל ("myPaper ', 500, 500);
		 / / "נייר" יהיה כל פונקציות חדשות נוסף על ידי תוספים שלך עכשיו
	 });
 
 });

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

אישית אירועים

לאחר יצירת מרחב הציור במטרה רפאל, אז אתה יכול מיד להגיע אל הציור. כשאתה מתקשר שיטות כמו rect , circle , ואת path על מרחב הציור, תקבל בחזרה אובייקטים המייצגים וקטורים SVG. בדרך כלל, תהיה לך גישה לגורמים המתאימים של DOM דרך node רכוש. לדוגמה:

 
 var נייר = רפאל ("myPaper ', 500, 500);
 var מרובע = paper.rect (0, 0, 100, 100);

זה יוצר אובייקט וקטור מלבני על הקואורדינטות [0,0] עם רוחב וגובה של 100 פיקסלים. יש לך גישה לאלמנט DOM הבסיסית (שהיא SVG rect אלמנט) כך:

 
 var rectNode = square.node;
 rectNode.onclick = function () {
	 alert ("מזל טוב, אתה לוחץ על ריבוע!");
 };

אם אתה משתמש Yui נלהב, אתה בטח רוצה משהו יותר מזה. מה עם מובנה Y.Node גם כן? בדיוק כמו node נכס מתייחס HTMLElement מאחורי האובייקט SVG, $node נכס מתייחס Y.Node מעטפת עבור רכיב זה. אז אתה יכול לעשות דברים כאלה:

 
 מרובע. $ node.on ("במעבר עכבר", function () {
	 alert ("מזל טוב, אתה יכול להזיז עכבר!");
 });

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

 
 var נייר = רפאל ("rcanvas ', 600, 800);
 
 . circ var = paper.circle (350, 200, 100) attr ({למלא: "ורוד", שבץ מוחי: "שחור"});
 
 / / לדחוף חבורה של מלבנים למערך
 var i = 0; מלבנים = [];
 עבור (; i <10: אני + +) {
	 rectangles.push (paper.rect (0, 40 * i, 200, 20) attr ({למלא: "אדום", שבץ: "צהובה"}.));
 }
 
 / / לולאה באמצעות מלבנים, והוסיף ספציפיים mousemove מטפלים מעגל לכל אחת
 Y.Array.each (מלבנים, תפקוד (rect, מדד) {
	 var i = אינדקס + 1;
	 circ. $ node.on ("mousemove", פונקציה (EVT) {
		 / / צבע המילוי הוא דינמי, תלוי במיקום של מלבן זה
		 / / במערך כמו גם את המיקום של העכבר
		 var = אם circ.attrs.cx - circ.attrs.r,
			 RT = 2 * circ.attrs.r + אם,
			 x = evt.clientX - אם,
			 למעלה = circ.attrs.cy - circ.attrs.r,
			 BTM = 2 * circ.attrs.r + למעלה,
			 y = evt.clientY - למעלה;
			 אדום = (((128 * x) / (2 * circ.attrs.r)) -1) * i / 6,
			 ירוק = 256 - ((((128 * x) / (2 * circ.attrs.r)) -1) * i / 6),
			 כחול = (((128 * y) / (2 * circ.attrs.r)) -1) * i / 6;
		 rect.attr ("מלא", "RGB (" אדום + + ',' + ירוק + ',' כחול + + ')');
	 });
 });

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

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

אז אתה יכול לראות את זה $node הוא קיצור דרך שימושי, אבל שום דבר מרהיב. זה באמת יהיה נפלא אם כל אובייקט SVG אתה יוצר עם RaphaelJS יכול לפטר אירועים מותאמים אישית . שתאפשר אלמנטים נפרדים שלך ציור לירות אירועים מותאמים אישית, וכל דבר בדף יכול להקשיב ולהגיב. זה יכול להיות שימושי במובנים רבים. בתור התחלה, הוא מספק אינטראקציות בין עשירים הציורים שלך. אינטראקציות משתמשים עם וקטור אפשר עכשיו הודעה על וקטורים אחרים של אינטראקציה על פי דרישה. זה אומר שאתה יכול לירות programatically אירועים מן הציורים שלך כאשר תנאים מסוימים הם נפגשו. לא זו בלבד שהדבר מאפשר את הציורים שלך להודיע ​​וקטורים אחרים, אבל שום דבר בדף יכול להקשיב פנימה

 
 var נייר = רפאל ("rcanvas ', 600, 800);
 
 . circ var = paper.circle (350, 200, 100) attr ({למלא: "ורוד", שבץ מוחי: "שחור"});
 
 / / מה שהופך מערכים של מלבנים ומעגלים
 var i = 0, מלבנים = [], עיגולים = [];
 עבור (; i <10: אני + +) {
	 rectangles.push (paper.rect (0, 40 * אני, אני 40 *, 20) attr ({למלא: "אדום", שבץ: "צהובה"}.));
	 circles.push (paper.circle (0,0,20) להסתיר ().);
 }
 Y.Array.each (מלבנים, תפקוד (rect, מדד) {
	 var i = אינדקס + 1;
	 circ. $ node.on ("mousemove", פונקציה (EVT) {
		 var = אם circ.attrs.cx - circ.attrs.r,
			 RT = 2 * circ.attrs.r + אם,
			 x = evt.clientX - אם,
			 למעלה = circ.attrs.cy - circ.attrs.r,
			 BTM = 2 * circ.attrs.r + למעלה,
			 y = evt.clientY - למעלה;
			 newWidth = (((256 * x) / (2 * circ.attrs.r)) -1) * i / 6,
			 אדום = (((128 * x) / (2 * circ.attrs.r)) -1) * i / 6,
			 ירוק = 256 - ((((128 * x) / (2 * circ.attrs.r)) -1) * i / 6),
			 כחול = (((128 * y) / (2 * circ.attrs.r)) -1) * i / 6;
		 / / הזמן הזה, לא רק לשנות את הצבע, אלא גם את רוחב המלבן
		 rect.attr ({
			 רוחב: newWidth,
			 למלא: "RGB (" אדום + + ',' + ירוק + ',' כחול + + ")"
		 });
		 / / אש אירוע מותאם אישית להודיע ​​כי רוחב המלבן השתנה
		 rect.fire ('רוחב, השתנה ", {רוחב: newWidth, מקור: rect, כדי: ראשי});
	 });
	
	 / / כל מלבן מקבל המאזין כי יורה על ברוחב שונה
	 rect.on ('רוחב, השתנה ", פונקציה (EVT) {
		 var attrs = evt.source.attrs;
		 / / קבל את המעגל המתאים להעביר אותו בקצה הימני של המלבן
		 חוגים [evt.order]. attr ({
			 CX: attrs.x + attrs.width,
			 סי: attrs.y,
			 למלא: "cornflowerblue"
		 .}) הצג ();
		
	 });
	
 });

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

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

תקציר

עם עליית של HTML5 טכנולוגיות הלוויין שלה, יש אפשרויות רבות כל כך, למעט פלאש עבור אינטראקציות עשירות. באופן אידיאלי, כל האלמנטים טסה על הדף צריך להיות נגיש באופן מלא ואחיד. זה פותח possiblities נפלאים לנו ליצור נגישות, פקדי אינטרנט רגילים מבלי להזדקק פלאש. SVG היא אופציה מפתה כי כל וקטור נמשכים בדף מגובה על ידי הצומת DOM שאנחנו יכולים לשנות עם Yui בדיוק כמו כל הצומת DOM אחר. זה מה מאפשר מודול גלריה RaphaelJS כדי להגדיל את כל האובייקטים SVG נוצר על ידי RaphaelJS, וזה המפתח אינטראקציה עשירה עם אלה elments ממקום אחר בדף.

מצא את שיחות: Bloglines | technorati

לשתף ולהרחיב: הפוך עם del.icio.us | Digg אותו! | reddit!

clearfix מחדש + גלישה: מוסתר Demystified

clearfix ו overflow : hidden יכול להיות שתי טכניקות הפופולריים ביותר כדי לנקות צף ללא סימון מבנית.

מאמר קצר זה על שיפור השיטה הראשונה לשפוך קצת אור על המשמעות האמיתית של 2.

clearfix

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

Margin-קריסת ההתנהגות של שתי תיבות הראשונות מראה כי תוכן שנוצר (לא ריק) שמחזיק את שולי התחתון בתוך הקופסה (אשר הגיוני על פי המפרט ).

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

  . Clearfix: לפני,
 . Clearfix: אחרי {
   תוכן:: "."    
   תצוגה: לחסום;    
   גובה: 0;    
   גלישה: מוסתר;	
 }
 . Clearfix: אחרי {ברור: הן;}
 . Clearfix {זום: 1;} / * IE <8 * / 

לא פשוט להחליף כללים clearfix שלך עם אלה חדשות בפרויקטים קיימים, אם כי, כפי שאולי כבר מטולאים בעיות הקשורות קורסת שוליים באמצעות שיטות אחרות.

overflow

ברוב הדיונים על פינוי מרחף overflow:hidden שיטת עולה, והוא נורה תמיד על ידי " אם אתה הצבת אלמנטים באופן מוחלט בתוך div, אתה תהיה ניתוק רכיבים אלה ". אבל זה לא נכון הצורך. overflow:hidden תמיד קליפ אלמנטים מיקומו יחסית, אבל זה לא תמיד להסתיר את אלה באופן מוחלט. הסיבה לכך היא כי הכל תלוי בלוק המכיל:

10.1 הגדרת "הבלוק המכיל":

4. אם יש אלמנט "position: absolute", בלוק המכיל היא הוקמה על ידי האב הקדמון הקרוב ביותר עם ​​"העמדה" של "המוחלט", "קרוב משפחה" או "קבוע", ...

משמעות הדבר היא אלמנטים באופן מוחלט יראה מחוץ לקופסה מעוצב עם overflow:hidden אלא אם כן הבלוק המכיל שלהם היא תיבת עצמו או מרכיב בתוך הקופסה אמר.

אתה יכול לבדוק בדף זה דמו כדי לראות איך הדברים עובדים.

חלופות טובות יותר

אם ניתן להחיל רוחב לאלמנט המכיל צף, אז האפשרות הטובה ביותר היא להשתמש:

  display: inline-לחסום;
 רוחב: value> מפורשת <any; 

קריאה נוספת

• משב הכלולים, מצופים המקיפים עם CSS טהור בטכניקה המכונה clearfix
• כיצד לנקות צף ללא בסימון מבני
• השיטה החדשה Clearfix
• 10.1 הגדרת "הבלוק המכיל"

מצא את שיחות: Bloglines | technorati

לשתף ולהרחיב: הפוך עם del.icio.us | Digg אותו! | reddit!

Yui: שעות פתיחה א 'ספטמבר 29

הפרק הבא של Yui: שעות פתיחה יהיה ביום רביעי הבא, 29.

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

כמו כן, על הסיפון יהיה אלן רבינוביץ לתת עדכון על העבודה המדהימה שהוא עשה על עיצוב מחדש yuilibrary.com. אנחנו מדברים על הכל, כאן: דף הבית, מדריכים למשתמש, הדגמות, הדרכות, API Docs. העבודות. במובנים רבים זה סיפור חדש לגמרי, ו 1 הרבה יותר טוב.

אנחנו נהיה באינטרנט 10:00-12:00 PDT. את פרטי החיבור כרגיל.

1. לחייג אל 1-888-371-8922 (סקייפ עובד נהדר מחוץ לארה"ב המשתתפים *)
2. הקש את הקוד משתתף 47188953 #
3. הצטרפות שיתוף מסך הפעלה (זה יבקש ממך להתקין את תוסף Adobe להתחבר אם זו הפעם הראשונה שבה אתה משתמש בו)

ולבסוף, כרגע היא yuilibrary.com על זה שעות פתיחה הוא כאן . תראו שם הערות, takeaways מעניין, הקלטה של ​​השיחה לאחר עושים את זה. או להתחיל את השיחה מן המוקדמות על ידי פרסום שאלות, הצעות, נושאים או קוד שאתה רוצה חוות דעת.

אל תשכחו להירשם לוח שנה Yui ופעל @ yuilibrary בטוויטר את העדכונים האחרונים על שעות פתיחה ושאר interestingness Yui.

מקווה לראות אותך שם!

* - אם סקייפ היא לא אופציה, שלח לי מספר מקומי.

מצא את שיחות: Bloglines | technorati

לשתף ולהרחיב: הפוך עם del.icio.us | Digg אותו! | reddit!

בטבע במשך 24 ספטמבר 2010

ככל שאנו מוכנים YUIConf 2010 והרבה יותר בחודשים הקרובים, הנה כמה דברים אחרים לקחנו לב בעולם Yui גדול יותר:

• Yui תיאטרון צמרות NetTuts רשימת שחובה לראות פודקאסטים F2E : אנדרו ברג'ס כותב על Yui תיאטרון : "נראה כי לעתים קרובות ככל מספר פעמים בחודש, יאהו מביא המפתחים בחזית הטכנולוגיה של האינטרנט כדי לשמור על העובדים שלהם עד תאריך. לטובת כולנו, השיחות האלה מתועדות ופורסם. אתה תמצא ידועים devs כמו דאגלס Crockford וניקולס Zakas, ומדבר על כל דבר, החל את ביצועי ונגישות JavaScript ו-DOM. " #
  
• DigitalInsurance.com (אתר @ apipkin) מופעל על ידי Yui 3 : פורה תורם גלריה כדון אנתוני סייע לייצר חדש בפורטל DigitalInsurance.com ., מופעל על ידי Yui 3 #
  
• שיפור מתקדמת באמצעות דבר מלבד JS (@ codepo8 על davglass @) : כריסטיאן Heilmann כותב על Ajaxian: "שיפור מתקדמת היא עדיין עניין מבלבל עבור הרבה אנשים שמחים מאוד על היכולות של ג'אווה סקריפט בדפדפן בסביבות מודרניות. זה יכול להרגיש אנכרוניסטי לכתוב את הפתרונות שלך לסביבה הלא JS ואז שוב משפר ב-JavaScript. גדלתי ככה אז בשבילי זה פשוט עניין של לעשות את הדבר הנכון, אך עם העולם של היום של ספריות javascript ו out-of-the-box יישומונים זה מצליח לגרור. הזן זכוכית DAV צוות Yui. הוא לא נתן את הרעיון של שיפור מתקדמת סביב ראשו כמאהב JS וקוד backend "שרדן", הוא יצא כדי לפתור את הבעיה אחת ולתמיד בצורה JavaScript טהור. " בדוק את המאמר המלא לקבלת פרטים . #
  
• תוספים שכבות נוספות Yui 3 מ אוליבר Andrich : מדף GitHub של אוליבר: "כיסוי תוספים הוא אוסף של חמישה תוספים שכתבתי כדי ללמוד Yui 3 developement תוסף בכלל. שלושה מתוך חמישה תוספים פחות או יותר לחקות את תוספות שכבות שנוצרו על ידי אריק Ferraiuolo .... חמשת התוספים הם:
  • BaseOverlayPlugin
  • ModalOverlay
  • KeepAligned
  • HideOnEscape
  • ConstrainDimensions "
  ( המקור. ) #
• Yui רייד של ברק שקופיות עבור HackU קרנגי מלון : מהנדס Yui (ו Yeti המחבר) ריד ברק שלף כמה שקופיות מנוע 3 מבוסס Yui מצגת עבור השיחה האחרונה שלו באוניברסיטת קרנגי מלון. #
  
• Devcurry על לימוד JS מ Crockford ומורים רוחניים אחרים Yui תיאטרון : Suprotim Agarwal כותב devcurry הבוקר: "בפוסט הזה, אני אחלוק קישורים של כמה קטעי וידאו של JavaScript והרצאות מאוד שימושי נמסר על ידי Gurus JavaScript, מלא במידע, צפייה מהנה חינם לחלוטין! למרות האינטרנט מלא של קטעי וידאו חינם, בחרתי רק כמה מהם, אשר מצאתי השימושי ביותר. תתכונן לרשום הערות תוך כדי ללמוד .. הרצאות וידאו של Crockford JavaScript על - דאגלס Crockford הוא האדריכל JavaScript ומשחק ואת תפקיד חשוב בעיצוב תכונות חדשות של השפה. קטעי וידאו שלו "must-have 'עבור כל מפתח ג'אווה סקריפט. Yui תיאטרון -.. מספק גישה לשיחות תכנות חינם על ידי גורואים על JavaScript ועל התפתחות האינטרנט "Suprotim ממשיך ומונה כמה מקורות אחרים של תוכן, כולל כותרות אחרות Yui תיאטרון #
  

מצא את שיחות: Bloglines | technorati

לשתף ולהרחיב: הפוך עם del.icio.us | Digg אותו! | reddit!