jQuery היא Framework (אף אחד עוד לא המציא לזה מילה בעברית?) שכתובה ב - JavaScript ונועדה להקל על העבודה בצד לקוח, בייחוד בעבודה מול DOM.

היא מאפשרת לקצר תהליכים (ובעיקר לקצר קוד), ולגשת ל - DOM בקלות מדהימה, ושורת הקוד מדף הבית שלהם ממחישה את היופי שבה:

$("p.surprise").addClass("ohmy").show("slow");

(ואם עוד לא נכנסתם לדף הבית שלהם, אז כנסו והריצו את השורה הזו).

Intellisense?

Lance Fisher יצר תוספת שמאפשרת Intellisense ל - jQuery ב - Visual Studio:

Intellisense for jQuery in Visual Studio 2008

Bernardo Heynemann כתב בבלוג שלו פוסט מעולה על שילוב של MonoRail עם ExtJS - איך לשלב את הפקדים של ExtJS עם MonoRail.

בפוסט הוא מראה איך ליצור View עם Grid של ExtJS, ואיך לחבר את Controller:

ExtJs + Monorail + Community Contributions = Success!

בפוסט קודם הסברתי על עיצוב אתרים באמצעות CSS (בניגוד לעיצוב באמצעות טבלאות, ובאמצעות תגיות ומאפייני HTML).

מה במדריך זה?

בסדרת פוסטים קרובה (שזהו הפוסט הראשון מבינהם), אסביר איך לעצב אתר באמצעות CSS ואיך לשלב את הרעיון של עיצוב באמצעות CSS עם ה - Framework של ASP.NET (כמו Themes, Skins, עיצוב פקדים בעזרת CSS ועוד).

מה לא יהיה במדריך זה?

חשוב לי להבהיר דבר אחד - אני לא מתכוון להסביר את הבסיס של CSS. איך לשלב CSS בדף, מה זה selector, איך להגדיר צבעים, הירראכיות וכיו"ב תוכלו למצוא במדריך CSS באתר Webmaster.org.il (בעברית). אם אינכם יודעים CSS כלל, אני ממליץ לכם להתחיל ממדריך זה.

Box Model

נתחיל בהגדרה של Box Model או מודל הקופסה מתוך אתר W3:

The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model.

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

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

להלן תרשים שממחיש כיצד אלמנט מתפרס:

לכל אלמנט יש את התוכן (הקופסה הפנימית ביותר בתרשים), התוכן מוקף ב - Padding (ריפוד), ה - Border עוטף את האלמנט עם ה - Padding, ומסביבו ה - Margin (שוליים).

חשוב לזכור כי ה - Padding, ה - Border וה - Margin מתווספים לרוחב והגובה של האלמנט.

לדוגמה, אם ניצור div שיקבל את ההגדרות הבאות:

div.Example1 
{
    background: Red;
    margin: 2px;
    border: solid 1px Black;
    padding: 3px;
    width: 40px;
    height: 40px;
}

תווצר קופסה אדומה, שרוחבה הפנימי (עד ה - border) יהיה 46px - רוחב התוכן הוא 40px, ואליו מתווספים 3px מכל צד (padding). את הקופסה יעטוף גבול (border) שחור בעובי של 1px, ושוליים של 2px מכל צד.

הגודל הכולל של הקופסה (כולל השוליים) יהיה 52px גובה, ו - 52px רוחב.

Padding ב - Internet Explorer

בגרסאות קודמות של Internet Explorer (עד 5.5, ובמקרים מסויימים גם ב - 6 ו - 7), ה - Padding היה מוכל בתוך ה - Content (ולא מתווסף לרוחבו), כפי שמודגם בתרשים הבא:

(מקור: וויקיפדיה האנגלית)

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

גרסאות 6, ו -7 יתנהגו בצורה דומה לגרסאות הקודמות, אלא אם יוגדר DOCTYPE מסויים (כמו XHTML, או HTML 4.0). בנוסף בגרסה 6 ההתנהגות גם תהיה זהה לגרסאות קודמות במידה וישנה הגדרת XML לפני ה - DOCTYPE. ניתן למצוא בוויקיפדיה מידע נוסף על התנהגות IE בהתאם להצהרת המסמך.

קריאה נוספת

• מדריך CSS באתר Webmaster (עברית)
• Box Model באתר W3 (אנגלית)
• Internet Explorer box model bug בוויקיפדיה (אנגלית)

בפוסט הבא, אסביר על עיצוב עמודים ואראה דוגמאות מעשיות לעיצוב עמודים באמצעות CSS.