Loading post navigation ...
 
 

Pro page

2
Nhận xét

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

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

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


Enter your mail address:

2

T@KA

Cho hỏi ứng dụng này có thể dùng nó cho các bài viết o?..

ok123

Good!!! Great!!! This article and pictures, and not only true interesting, I like it very much, looking forward to you as soon as possible to update your works!!!Hermes kelly handbag



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home