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

[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>

<script type="text/javascript" src="http://cnetjavascript.googlecode.com/files/mootools.svn.js"></script>

<script type="text/javascript">
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('section');
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>

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ị)

<div class="container">

<h2><span><a href="#" id="toggle">Tiêu đề của tab</a></span></h2>

<div id="section">
<div>

...
{Nội dung của tab}
...

</div>
</div>
</div>

Chúc các bạn thành công.