RSSJquery

Giới thiệu jQuery iTabs plugin

Bài học trước mình đã hướng dẫn bạn cách Tạo tabs với jQuery và CSS nhưng có một nhược điểm là khả năng tái sử dụng mã không cao. Chẳng hạn trên website của bạn cần có 2 tabs thì bạn cần code jQuery thêm một lần nữa để tạo ra tabs thứ 2. Và cũng mất nhiều thời gian hơn khi bạn muốn ứng dụng cho một trang khác của bạn. jQuery iTabs là một plugin mình viết để phục vụ cho công việc của mình, nhân tiện đây xin chia sẻ cùng mọi người.

Bài học trước mình đã hướng dẫn bạn cách Tạo tabs với jQuery và CSS nhưng có một nhược điểm là khả năng tái sử dụng mã không cao.

Chẳng hạn trên website của bạn cần có 2 tabs thì bạn cần code jQuery thêm một lần nữa để tạo ra tabs thứ 2. Và cũng mất nhiều thời gian hơn khi bạn muốn ứng dụng cho một trang khác của bạn.

jQuery tabs

Bạn sẽ phải viết thêm một đoạn code tương tự như trên để tạo thêm một tabs nữa trên cùng một trang

jQuery iTabs là một plugin mình viết để phục vụ cho công việc của mình, nhân tiện đây xin chia sẻ cùng mọi người.

Về cơ bản thì nguyên lý hoạt động của nó hoàn toàn giống như những gì mình đã trình bày với bạn ở bài học Tạo tabs với jQuery và CSS, chỉ mở rộng thêm một số tùy chọn (options) và giúp phần code jQuery ngắn ngọn hơn. Bạn có thể tạo ra 2 thậm chí 3 vùng tabs trên cùng trang mà không phải viết lại code như trên nhiều lần.

Xem trang demo

  Download jQuery iTabs (8.0 KiB, 437 Lượt tải)

CÁCH SỬ DỤNG

1, Chèn thư viện jQuery và jQuery iTabs() vào thẻ <head> của website

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-itabs.js"></script>

2, Cấu trúc HTML của tabs như sau:

<div id="tabs">
<ul id="tabs">
	<li>Tab 1</li>
	<li>Tab 2</li>
	<li>Tab 3</li>
</ul>
<div>Tab 1 content</div>
<div>Tab 2 content</div>
<div>Tab 3 content</div>
</div>
<pre>

3, Thêm đoạn mã sau trong thẻ <head> để tạo tabs:

<script type="text/javascript">
     $(document).ready(function(){
	  $("#tabs").iTabs();
     });
</script>

4, Hiệu chỉnh các tùy chọn

Có 4 tùy chọn để bạn có thể tùy chính:

itabs-default-options

  • selected: Tab mặc định sẽ được chọn khi trang được tải, bắt đầu từ vị trí 1, giá trị mặc định là 1.
  • activeClass: Tên class khi tab button được active để bạn có thể định dạng với CSS, mặc định active
  • event: sự kiện thao tác với tab button, plugin hỗ trợ 2 sự kiện: click và hover(mặc định là click)
  • delay: Thời gian diễn ra hiệu ứng fadeIn(), mặc định là 0
<script type="text/javascript">
     $(document).ready(function(){
	  $("#tabs").iTabs({
              selected: 2, //Thành phần tab thứ 2 được chọn hiện thị
              event: "hover", //Khi người dùng hover chuột thì tab sẽ được thay đổi
              delay: 100 //Tốc độ hiệu ứng fadeIn trong 100ms
          });
     });
</script>

Phần CSS bạn tự căn chỉnh theo ý mình, bạn có thể tham khảo file CSS mẫu sử dụng trong demo tại đây http://dev.ewebvn.com/jquery-itabs/style.css

Tags:

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu