Mục lục
Bài viết phân tích và hướng dẫn sử dụng hai thẻ details và summary trong HTML5
Sử dụng details
Thành phần thẻ details có thể được sử dụng ở bất cứ đâu trong cặp thẻ body commande viagra sans ordonnance. Ví dụ:
|
1 2 3 4 5 |
</p> <details> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p> </details> <p> |
Ở ví dụ trên cho chúng ta thấy thành phần thẻ details bao gồm một đoạn văn bản, về cơ bản mặt hiển thị khi chúng ta chạy trên trình duyệt thì chưa có gì cả. Ngoài ra, bên trong thẻ details chúng ta cũng có thể sử dụng các thẻ khác của HTML5 như figure hoặc một số thành phần của form như các thẻ input, textarea…
Sự khác nhau đáng kể duy nhất là mặt hiển thị trên các cửa sổ trình duyệt khác nhau. Ở các trình duyệt mới nhất như Google Chrome, Firefox, Opera nó sẽ hiển thị thêm một nút tam giác ở đầu cạnh.
Thẻ details làm việc như một accordion trong jquery, chuyển qua chuyển lại mũi tên, hoặc nhấp chuột vào bất cứ nơi nào mà chiều ngang thẳng hàng với mũi tên, sẽ tiết lộ nội dung ẩn. Chúng ta có thể sử dụng phím Tab để di chuyển giữa các thành phần này, sau đó có thể nhấn phím space hoặc Enter để mở nội dung ẩn
Bạn cũng có thể thêm thuộc tính open để mặc định hiển thị một thành phần nào đó
|
1 2 3 4 5 |
</p> <details open> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p> </details> <p> |
Thẻ summary
Thẻ details có thể có cả thẻ summary đi kèm, nhưng th
|
1 2 3 4 5 6 |
</p> <details open> <summary>Hello World</summary> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p> </details> <p> |
Với đoạn code trên ta sẽ được kết quả như hình dưới
Bạn cũng có thể đặt các thẻ details dạng lồng nhau
|
1 2 3 4 5 6 7 8 9 10 |
</p> <details> <summary>Hello World</summary> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p> <details> <summary>Hi, How are you?</summary> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p> </details> </details> <p> |
Khi đó chúng ta sẽ có dạng kích mở 2 lần.
Style Details với CSS
2 thẻ details và summary có thể được style bằng css như các thẻ bình thường khác
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<br /> details {<br /> padding: 15px;<br /> background-color: #f6f7f8;<br /> margin-bottom: 20px;<br /> }<br /> details[open] {<br /> /* the style goes here */<br /> }<br /> summary {<br /> cursor: pointer;<br /> }<br /> |
Style dấu tam giác
Các bạn cũng có thể thay cái dấu tam giác ở đầu đi bằng đoạn css sau
|
1 2 3 4 5 6 7 8 9 |
<br /> summary::-webkit-details-marker {<br /> display: none;<br /> }<br /> summary:before {<br /> content: “\2714”; /* the new icon */<br /> color: #696f7c;<br /> margin-right: 5px;<br /> }<br /> |
Sự hỗ trợ của các trình duyệt
Ví dụ ứng dụng
Bạn có thể thấy ví dụ ứng dụng thông qua bức ảnh sau
Thẻ details được dùng để trình bày phần menu bên trái của website, nhìn rất hay đấy chứ.
Tổng kết
Với các thẻ này, hy vọng một ngày nào đó nó sẽ chạy độc lập với các thư viện javascript trong việc thiết kế các accordion.
Vậy website của bạn đã sử dụng cặp thẻ details và summary chưa?
