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>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
</details>

זה יציג את המסך הבא:

image

כשכל לחיצה משנה את המצב של ה – summary.

במידה ונרצה לשנות את ה – icon ברירת המחדל, נוכל לכתוב את ה – css הבא:

 

Code Snippet
<style>
    summary
    {
        outline-style: none;
        cursor: pointer;
    }
        
    summary::-webkit-details-marker
    {
        display: none;
    }
        
    summary:before
    {
        content: url('e.png');
        padding-right: 5px;
    }
        
    details[open] summary:before
    {
        content: url('c.png');
        padding-right: 5px;
    }
</style>

 

האלמנט summary ב – css מסתיר את המסגרת הצהובה (המרגיזה) של כרום, ומציגה את סימן העכבר.

לאחר מכן (היות שהתקן עדיין לא נסגר, אני משתמש עם webkit) נסתיר את ה – marker.

ובעזרת שימוש ב – selector של before נציג תמונה של פתיחה או סגירה (תלוי האם ה – האלמנט details פתוח או סגור).

כעת זה יראה כך:

 

image

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

כתיבת תגובה

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