custom checkbox – 2

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

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

    הדרך הראשונה והפשוטה יותר, משתמשת בשלוש תגיות html. השניה אמנם לא נזקקת ליותר מאשר תגית ה checkbox עצמה – אך דורשת הגדרות css מתקדמות יותר.

    שיטה ראשונה

    ה HTML:

    Code Snippet
    <body>
        <label>
            <input type=”checkbox” name=”option1″ />
            <span>option 1</span>
        </label>
        <label>
            <input type=”checkbox” name=”option2″ />
            <span>option 2</span>
        </label>
        <label>
            <input type=”checkbox” name=”option3″ />
            <span>option 3</span>
        </label>
        <label>
            <input type=”checkbox” name=”option4″ />
            <span>option 4</span>
        </label>
        <label>
            <input type=”checkbox” name=”option5″ />
            <span>option 5</span>
        </label>
    </body>

    הרעיון הכללי הוא שאם מאגדים את ה checkbox יחד עם טקסט או אלמנט נוסף (במקרה שלנו span) בתוך תגית label – הם הופכים להיות “קשורים” ל checkbox ולחיצה על הטקסט תגרום לסימון של  ה checkbox.

    וכעת לטריק:

    Code Snippet
    <style>
        label input{
            display: none;
        }

        label span{
            height: 40px;
            width: 100px;
            display: inline-block;
            background-color: #eaebec;
            font-family: Arial;
            font-size: 18px;
            line-height: 40px;
            text-align: center;
        }

        label input:checked + span{
            background-color: #ffce4b;
        }
    </style>

    בהגדרת  css הראשונה העלמתי את ה checkbox לחלוטין (כאמור אני לא צריך אותו יותר היות ולחיצה על ה span תגרום לסימונו מאחורי הקלעים).

    בהגדרה השניה אני נותן את העיצוב הרצוי ל span (הגדרות די זהות להגדרות בהם השתמשתי בפוסט הקודם לעיצוב ה div החיצוני – למעט המיותר).

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

    שיטה שניה

    HTML:

    Code Snippet
    <body>
        <input type=”checkbox” name=”option1″ data-option=”option1″ />
        <input type=”checkbox” name=”option2″ data-option=”option2″ />
        <input type=”checkbox” name=”option3″ data-option=”option3″ />
        <input type=”checkbox” name=”option4″ data-option=”option4″ />
        <input type=”checkbox” name=”option5″ data-option=”option5″ />
    </body>

    בעצם כמו קודם יש לנו 5 תיבות-סימון, אלא שנוסף כאן attribute בשם data-option שמיד נראה איך משתמשים בו:

    css:

    Code Snippet
    <style>
        input{
            height: 0px;
            width: 0px;
            margin-right: 100px;
            margin-bottom: 40px;
        }

        input::after{
            content: attr(data-option);
            height: 40px;
            width: 100px;
            display: inline-block;
            background-color: #eaebec;
            font-family: Arial;
            font-size: 18px;
            line-height: 40px;
            text-align: center;
        }

        input:checked::after{
            background-color: #ffce4b;
        }
    </style>

    בשלב הראשון אנו מסתירים את ה checkbox , אבל היות ובמקרה זה אנו רוצים שישאר על המסך בכדי שנוכל לייצר ממנו pseudo-element, לכן נסתיר אותו באמצעות מתן ערכי גובה ורוחב אפסיים ולא באמצעות display.

    באותו קטע אנו גם תופסים באופן מלאכותי את השטח שעליו אמור להיות ה pseudo-element – כדי שהם לא יעלו אחד מעל לשני.

    בשלב הבא אנו מייצרים את ה pseudo-element – after, הגדרה זו מוסיפה אלמנט דמה מיד לאחר ה checkbox, כאן אני משתמש שוב באותם הגדרות css כמקודם עם תוספת אחת חשובה – content, מאפיין זה אומר איזה טקסט יכנס לתוך האלמנט,  כשבמקרה שלנו במקום לתת ערך סטטי אני משתמש בפונקציה בשם attr() אשר יודעת לקבל שם של attribute  כלשהו ולחלץ את התוכן שלו. כאן כמובן זהו ה attribute הזכור מקטע ה HTML שלמעלה – data-option. (הערה: השם data-option הוא שם שאני בחרתי ואתם רשאים לקרוא לו בכל שם שתחפצו, אם כי שימו לב שנהוג שהשם יתחיל ב {data-{name)

    כעת, היות שלחיצה על ה pseudo-element כמוה כלחיצה על האלמנט עצמו, זוהי בעצם הדרך שלנו במקרה זה לסמן את ה checkbox.

    כעת כל מה שנשאר לנו זה לתת צבע רקע שונה במקרה שה checkbox מסומן – וזה מה שעושה הגדרת ה css האחרונה.

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

    הקוד המלא של השיטה הראשונה:

    Code Snippet
    <!DOCTYPE html>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
        <title></title>

        <style>
            label input{
                display: none;
            }

            label span{
                height: 40px;
                width: 100px;
                display: inline-block;
                background-color: #eaebec;
                font-family: Arial;
                font-size: 18px;
                line-height: 40px;
                text-align: center;
            }

            label input:checked + span{
                background-color: #ffce4b;
            }
        </style>

    </head>
    <body>
        <label>
            <input id=”hjkh” type=”checkbox” name=”option1″ />
            <span>option 1</span>
        </label>
        <label>
            <input id=”hjkh” type=”checkbox” name=”option2″ />
            <span>option 2</span>
        </label>
        <label>
            <input id=”hjkh” type=”checkbox” name=”option3″ />
            <span>option 3</span>
        </label>
        <label>
            <input id=”hjkh” type=”checkbox” name=”option4″ />
            <span>option 4</span>
        </label>
        <label>
            <input id=”hjkh” type=”checkbox” name=”option5″ />
            <span>option 5</span>
        </label>
    </body>
    </html>

    הקוד המלא של השיטה השניה:

    Code Snippet
    <!DOCTYPE html>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
        <title></title>

        <style>
            input{
                height: 0px;
                width: 0px;
                margin-right: 100px;
                margin-bottom: 40px;
            }

            input::after{
                content: attr(data-option);
                height: 40px;
                width: 100px;
                display: inline-block;
                background-color: #eaebec;
                font-family: Arial;
                font-size: 18px;
                line-height: 40px;
                text-align: center;
            }

            input:checked::after{
                background-color: #ffce4b;
            }
        </style>

    </head>
    <body>
        <input type=”checkbox” name=”option1″ data-option=”option1″ />
        <input type=”checkbox” name=”option2″ data-option=”option2″ />
        <input type=”checkbox” name=”option3″ data-option=”option3″ />
        <input type=”checkbox” name=”option4″ data-option=”option4″ />
        <input type=”checkbox” name=”option5″ data-option=”option5″ />
    </body>
    </html>

    חיפוש

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

    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