XtGem Forum catalog

CuDemVN.Wap.Sh

- GetSmile.Mobie.In - Diễn đàn chia sẻ Cú đêm Việt Nam
- AiChat.Wap.Sh - Diễn đàn Xtgem Việt Nam
- HamTruyen.Xtgem.Com - Blog Ham Truyện nơi hội tụ của những tín đồ mê truyện chữ
* Trang chủ >> WapMaster
Tìm Kiếm Thảo Luận
↓↓

Code ẩn, hiện nội dung bằng HTML5 (details và summary)

Admin* RoSino18k *
* 27-09-2015
Nó có tác dụng rút gọn nội dung được ẩn trong 1 cú click như menu mà thông thường ta phải dùng js mới làm được.

→Demo:

Code ẩn, hiện nội dung bằng HTML5 (details và summary)
[Tải ảnh]


Code ẩn, hiện nội dung bằng HTML5 (details và summary)
[Tải ảnh]


Code ẩn, hiện nội dung bằng HTML5 (details và summary)
[Tải ảnh]


Ví dụ:
<details><summary> hiện cái coi</summary> đây là nội dung được ẩn trong đó</details>

Các bạn cứ dán và TEST để hiểu rõ hơn về nó

Nếu các bạn chỉ hướng đến android trở lên còn mấy trình duyệt không hỗ trợ thì nó cứ show ra thì chỉ cần như trên là được. (wap mình chỉ ngang đây thôi!)

Còn Để 2 thẻ này hoạt động tốt trên các trình duyệt chúng ta cần phải thêm đoạn jquery sau:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="/jquery.details.js"></script>

<script>
$(function() {
// Add conditional classname based on support
$('html').addClass($.fn.details.support ? 'details' : 'no-details');
// Emulate <details> where necessary and enable open/close event handlers
$('details').details();
});
</script>

Và để đẹp mắt và hỗ trợ trình duyệt tốt hơn cho mấy cái trình không hỗ trợ thì chèn thêm đoạn CSS sau vào:
#wrapper {
margin: auto
}
summary { cursor: pointer;color:# mã màu của bạn }

/* Mặc định thì nội dụng nằm bên trong thẻ <detail> sẽ được ẩn */
/* Đoạn code này chỉ hỗ trợ cho các trình duyệt không hỗ trợ thẻ <detail> và <summary> */
.no-details details > * { display: none; }
/* Không hoạt động tốt trên Firefox 3.6.x */
/* .no-details details[open] > * { display: block; } */

/* Không hoạt động trên IE8 */
.no-details details > summary:before { float: left; width: 20px; content: '► '; }
.no-details details.open > summary:before { content: '▼ '; }
/* For IE6 and IE7,*/
.no-details details > summary { padding-left: 20px; background: url( link ảnh thay) no-repeat 0 0; }
.no-details details.open > summary { background-position: 0 -20px; }

Để hỗ trợ chạy trên IE8 trở về trước thì chúng ta cần phải thêm đoạn code sau ngay sau thẻ head
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

Hy vọng với bài viết này các bạn có thể hiểu rõ hơn và biết cách sử dụng 2 thẻ details và summary

Nguồn: Kusdinks
↑↑ Lượt xem: 1098
score
Đánh giá: 4.5/ 5, 1098 bình chọn
- Chia sẻ:G  T
BBCode:

Link:
+ Còn “nhiều” Lắm!
+

Share code Diễn đàn trên Xtgem Full chức năng cực chất GetSmile.Mobie.In bởi Cú Đêm Việt Nam

+

Share code PHP hiển thị thông tin khách đang online trên Site

+

Sử dụng HTML và CSS tạo hiệu ứng hiển thị mô tả khi di chuột vào hình ảnh

+

Ajax là gì? Hướng dẫn code cơ bản khi xử lý dữ liệu với jQuery Ajax

+

Share full code PHP bộ tool cài đặt và quản lý Filelist KhoTruyen365 Xtgem

Trang chủ Cú Đêm Việt Nam Trang Chủ[1-1-1098]