Thu gọn, Mở rộng Tab dữ liệu (tabs có bo góc) - Sử dụng CSS kết hợp hiệu ứng của Mootools | Blog Trần Phúc Minh | Blog thông tin tổng hợp của huyện Châu Đức

Trang chủ » Mootools » Thu Thuat Blog » Thủ thuật Blogger » Bạn đang xem:

Thu gọn, Mở rộng Tab dữ liệu (tabs có bo góc) - Sử dụng CSS kết hợp hiệu ứng của Mootools

Thứ Ba, 5 tháng 5, 2009

[FD's BlOg] - Bài viết trươc mình có giới thiệu thủ thuật đóng mở (thu gọn, mở rộng) tab nội dung, nhưng ở bài viết đó, giao diện nhìn không được bắt mắt mà lại phải qua 1 trang web trung gian. Thế nên hôm nay mình giới thiệu một thủ thuật khác đẹp mắt hơn. Thủ thuật này sử dụng hiệu ứng của Mootools. Bạn chỉ cần nhấp vào thanh tiêu đề của bảng là nội dung của tab sẽ được đóng hoặc mở.

Hình ảnh minh họa:

☼ Trước tiên bạn phải download gói hình ảnh này về : FD-expSectionMoo.rar (có kèm theo file Java và file demo)
- Sau khi giải nén ra, ta được 1 folder img, 1 file index.html, 1 file javascript mootools.svn.js
- up các file hình trong folder img lên host để lấy link.
- Có thể nhấp vào file index.html để xem trực tiếp demo.
- Nên up file java mootools.svn.js lên host riêng, tránh trường hợp khi file hết bandwith, tiện ích sẽ không chạy.

☼ Bây giờ bắt đầu thủ thuật:

1. Đăng nhập blog
2. Vào chỉnh sửa code HTML
3. Chèn đọan code CSS bên dưới vào ngay trên dòng ]]></b:skin>

div.container{
margin:30px auto;
width:350px;
}
h2{ margin:0px;
padding:0px;
border:0px;
}
h2{ color:#FFFFFF;
font-size:13px;
display:block;
background:url(h2_bg.gif) top left no-repeat #9A9A9A;
}
h2 span{
padding:5px 10px;
background:url(h2_span_bg.gif) top right no-repeat;
display:block;
}
h2 a:link, h2 a:visited{
color:#FFFFFF;
text-decoration:none;
display:block;
}
#section {
background:url(section_bg_left.png) bottom left no-repeat #EEEEEE;
font-size:12px;
}
#section div{
background:url(section_bg_right.png) right bottom no-repeat;
padding:10px;
}

Lưu ý: thay code màu xanh bằng link ảnh mà bạn đã up.

4. Tiếp tục chèn đọan code Java này vào trên dòng </head>

Lưu ý : nên thay code màu xanh bằng link của file Javascript mà bạn đã up lên host. (để tránh hết bandwidth)

5. Save template lại.

6. Và cuối cùng là code HTML của tab :(điền code tại nơi bạn muốn hiển thị)