Tạo tab content với plugin jQuery Tabulous

05/10/2013

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.

Tạo tab content với plugin jQuery Tabulous

Xem Demo | Download

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>

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.

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

Chuyên Mục:

Bài viết được đăng bởi webmaster

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !