Tabulous là một plugin đơn giản và nhỏ gọn cho phép chúng ta tạo các hiệu ứng tab chuyển động rất đẹp mắt và cũng rất dễ sử dụng.
Cách sử dụng :
1 Chèn đoạn css sau vào ngay bên dưới thẻ <head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
<link href='tabulous.css' rel='stylesheet' type='text/css'>
file tabulous.css các bạn có thể tìm thấy ở phần download.
2 Markup html
Chúng ta sẽ tạo bộ khung chuẩn html như sau khi muốn tạo tab cho trang web của mình
<div id="tabs">
<ul>
<li><a href="#tabs-1" title="">Tab 1</a></li>
<li><a href="#tabs-2" title="">Tab 2</a></li>
<li><a href="#tabs-3" title="">Tab 3</a></li>
</ul>
<div id="tabs_container">
<div id="tabs-1">
...
</div>
<div id="tabs-2">
...
</div>
<div id="tabs-3">
...
</div>
</div>
</div>
3 Kế tiếp là chèn đoạn script bên dưới vào :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="tabulous.js"></script>
4 Cuối cùng , chúng ta sẽ gọi plugin với các lựa chọn cho từng hiệu ứng khác nhau:
$(document).ready(function($) {
$('#tabs').tabulous({
effect: 'scale' // scale, slideLeft, scaleUp or flip
});
});
Hy vọng với bài viết này sẽ giúp ích nhiều cho các bạn trong việc thiết kế web và tạo ra các hiệu ứng cho riêng mình.