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

19 באפריל 2017

אין תגובות

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

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

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

הקוד שלהם מבוסס 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 חכמה בהרבה, מספר המאפיינים והאפשרויות שיש לכל פקד הינה מצומצמת. אבל היתרון שלהם שהעיצוב דומה לכל מה שאנחנ ומכירים בספרייה.

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *