Bootstrap – המדריך – פרק 13 – עבודה עם הפקדים השונים

    • Home
    • Blog
    • Bootstrap – המדריך – פרק 13 – עבודה עם הפקדים השונים

    לתוכן העניינים

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

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

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

    הפקד הראשון שנכיר הינו פקד של modal, אנחנו רוצים לקבל את התוצאה הבאה

    image

     

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

    הקוד לקבלת התוצאה הזאת הינה כדלהלן

     

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
        Launch demo modal
    </button>
     
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    <h4 class="modal-title">Modal title</h4>
                </div>
                <div class="modal-body">
                    <p>
                        bla bla bla bla bla bla<br />
                        bla bla bla bla bla bla<br />
                        bla bla bla bla bla bla<br />
                        bla bla bla bla bla bla<br />
                        bla bla bla bla bla bla<br />
                        bla bla bla bla bla bla<br />
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

     

    ראשית יש לנו לחצן שיש לו שני מאפייני data-, אחד מגדיר שזה פותח חלון מודלי, והשני מגדיר את מי עליו לפתוח.

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

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

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

    $('#myModal').modal('hide')

     

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

    חיפוש

    פוסטים אחרונים

    Import files from git using CSharp
    MVC Actions and Object Oriented
    Upload file using angularjs with some data

    תגיות

    הרב דוטנט

    החברה מספקת שירותי ייעוץ פיתוח והדרכה.

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

    פוסטים אחרונים

    דף הבית

    צור קשר

    רבי שמעון בן שטח 8
    אלעד, ישראל
    טלפון: 052-624-9139
    פקס: 077-444-7864
    Email: info@haravdotnet.co.il