Bootstrap – המדריך – פרק 4 – עבודה עם Panels

יום חמישי, יולי 30, 2015

לתוכן העניינים בפרק הקודם למדנו על עבודה עם מערכת ה – Grid system המאפשרת לנו לכתוב בצורה לוגית של טבלאות (שורות ועמודות) ומצד שני לעבוד עם div ולוודא תמיכה ברזולוציות שונות. היום נלמד להכיר את אחד מהאלמנטים הנחמדים של הספריה בשם Panels המאפשרים בצורה יחסית קלה להגדיר Container עם עיצוב בסיסי ויפה, על הדרך נכיר מספר מחלקות בסיסיות נוספות לעיצוב ונעשה חזרה קצרה בשימוש ב – Grid system.   נסתכל על דוגמת הקוד הבאה: Code Snippet <div class="row"> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading"> This is Header <span class="pull-right glyphicon glyphicon-edit"></span> </div> <div class="panel-body"> bla bla bla bla bla <br /> bla bla bla bla bla <br /> bla bla bla bla bla <br /> bla bla bla...
תגיות: , , , ,
אין תגובות

Bootstrap – המדריך – פרק 1 – הורדת הקבצים, ובניית ה – template הבסיסי.

יום רביעי, מאי 27, 2015

בתוכן העניינים למדנו למה כדאי ומומלץ להשתמש בספריית Bootstarp ותיארנו את רשימת הנושאים שנלמד, בפרק הנוכחי נראה מהיכן להוריד את הספרייה, ומהם הצעדים המומלצים כדי להתחיל לעבוד עם הספרייה. ראשית נוריד את הספרייה מהאתר שלהם בלינק הבא בלחצן Download Bootstrap, יירד לכם קובץ zip ובתוכו התיקיות הבאות: CSS npm.jsbootstrap.css bootstrap.css.map bootstrap.min.css bootstrap-theme.css bootstrap-theme.css.map bootstrap-theme.min.css Fonts glyphicons-halflings-regular.eot glyphicons-halflings-regular.svg glyphicons-halflings-regular.ttf glyphicons-halflings-regular.woff glyphicons-halflings-regular.woff2 JS bootstrap.js bootstrap.min.js npm.js   כל מה שלא מודגש אינו חשוב לזמן הפיתוח, הוא רלוונטי בזמן העלאה לשרת עבור ביצועים וכדו’, אבל לעת עתה ניתן למחוק את הקבצים שאינם מודגשים. כדי לעבוד עם העיצוב של הספרייה, עלינו להוסיף לפרוייקט את תיקיית css+fonts, את קובץ הסקריפט נוסיף רק במידה ונרצה להשתמש ביכולות הסקריפטיות של הספרייה (פקדים וכדו’) במקרה כזה נצטרף להוסיף...
תגיות: , , ,
5 תגובות

Bootstrap – המדריך

יום רביעי, מאי 20, 2015

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

הגדרת גלילה פנימית, והתאמה בזמן שינוי גודל המסך

יום שני, דצמבר 8, 2014

לפעמים בדפי ה – html שלנו, יש לנו חלק עליון שיכול להיות מורכב מכותרת או תפריט, תוכן העמוד, וטקסט כלשהו בתחתית, במידה והתוכן יהיה מספיק גדול, זה כמובן יגרום לגלילה, במצבים מסויימים ייתכן שנרצה להגדיר גלילה פנימית לתוכן, כך שהכותרת או התפריט והטקסט בתחתית המסך ייראו תמיד. הבעייה אינה בלהגדיר זאת, אלא בלתת את הגובה לתוכן עצמו, כלומר כדי לעשות זאת יש לעטוף את התוכן ב – div כלשהו שיקבל ערך קבוע עבור מאפיין height והגדרת scroll, הבעייה שגובה האלמנט אמור להשתנות לפי גובה המסך. (קוד המקור להורדה) לדוגמה במידה וה – html שלנו נראה כך: Code...
אין תגובות

HTML + JS Basic demos

יום ראשון, נובמבר 23, 2014

בהמשך לפוסטים אודות קוד למתחילים בעולם ה – WEB, הפעם נרצה לכתוב משהו דומה לפעם הקודמת. נרצה להציג תמונה על המסך, ולמשתמש יהיה שני תיבות טקסט, שהוא יוכל לקבוע את המיקום של התמונה על המסך, כמו כן בדיוק כמו בפעם הקודמת, יהיה לחצן של מיקום רנדומלי (רק שהפעם נוודא שאנחנו לא חורגים מגודל המסך) וכמובן לחצן Start שבכל X זמן, תקבל התמונה מיקום רנדומלי אחר, והפעם גם נוסיף Stop כדי שה – interval ידע לעצור. ראשית, נסתכל על קוד ה – html + css שלנו. Code Snippet <head>    <meta charset="utf-8" />    <title></title>    <style>        #myImg {            position: absolute;           ...
אין תגובות

HTML + JS – Basic Demos

יום ראשון, נובמבר 16, 2014

בדוגמה הזו נראה קצת HTML עם JS בסיסי, להלן המשימה: יהיה לנו שלושה תיבות טקסט, כל אחד מהם מייצג את אחד מצבעי הבסיס (כל צבע שהוא מורכב מעירבוב של שלושת צבעי הבסיס – אדום, ירוק, כחול – כל אחד יכול לקבל מספר בין 0-255), לדוגמה לבן מיוצג על ידי 255 עבור כל אחד מצבעי היסוד, בעוד ששחור מורכב מ – 0 בכל אחד מצבעי היסוד). נרצה שבכל פעם שהמשתמש משנה את הערך באחד מתיבות הטקסט, צבע הרקע של המסך ישתנה. לאחר מכן נלחץ על לחצן בשם Random, שיגרום להגרלה אקראית של צבע הרקע. בסוף נרצה שצבעי הרקע ישתנה אוטומטית...
תגיות: , , ,
אין תגובות

break row in html tooltip (title attribute

יום שבת, ינואר 25, 2014

לאחרונה הייתי צריך להציג tooltip על div כלשהו ב – html, הצגת tooltip הינה באמצעות המאפיין title Code Snippet <div title="Shlomo Goldberg">    ...<br />    ...<br />    ...<br />    ...<br />    ...<br />    ...<br />    ...<br /></div> זה ייתן את התוצאה הבאה: הדרישה של הלקוח הייתה, שהשם והמשפחה יופיע כל אחד בשורה נפרדת, ניסיון להוסיף r\n\ רק גרם להופעת התווים הללו ב – tooltip, לאחר ניסויים מעטים, התברר שמקוד javascript ניתן לעשות זאת. Code Snippet <script>    onload = function () {        document.getElementById('myDiv').setAttribute('title', 'Shlomo\r\nGoldberg');    }</script>   זה אכן עבד וגרם לירידת השורה המבוקשת ב –...
תגיות: , , ,
4 תגובות

Content property – CSS3

יום רביעי, ינואר 2, 2013

המאפיין content ב – css3 מאפשר לכתוב טקסטים בעזרת css. לכאורה זה נראה מוזר, למה צריך לכתוב טקסטים בעזרת css, בהמשך נראה שזה יכול לחסוך הרבה עבודה ב – JS, וגם לאפשר לעשות דברים שאי אפשר אחרת. ראשית נכיר חלק מהאופציות לכתיבה. המאפיין content יכול לבוא רק עם selctor של after או before, ה – selctor-ים הללו, מאפשרים לעצב מה יהיה לפני או אחרי האלמט, לדוגמא: ...
תגיות: , , , ,
2 תגובות

details and summary – html5

יום שבת, דצמבר 29, 2012

בעבר כתבתי על חלק מהאלמנטים החדשים של HTML5, אחד מהאלמנטים הינו details שמאפשר להגדיר חלק ב – UI שיהיה collapsable, כך:   <details>     <summary>This is a summary</summary>     <ul>         <li>Item 1</li>         <li>Item 2</li> ...
תגיות: , , , ,
אין תגובות

משימה שנייה עם (2) knockout

יום שני, אוקטובר 22, 2012

כתבתי כיצד מתחילים לעבוד עם knockout, בפעם הזאת נראה דוגמא קצת יותר מתקדמת. נגדיר את המשימה הבאה: דף שבו המשתמש יכול להכניס ID של משתמש, לקבל את השם והגיל, לעדכן אותם ולשלוח בחזרה לשרת. הדף יראה כך:   נחשוב לרגע על קוד רגיל שהיינו כותבים. היינו נרשמים לאירוע change של תיבת הטקסט הראשונה, שולחים את ה – Id לשרת, בצד השרת נחזיר אובייקט Person ללקוח, בצד הלקוח נעבור על המאפיינים, נדאג להכניס אותם לתיבות הטקסט, ולאחר מכן...
תגיות: , , , , , , , ,
אין תגובות