Tabbed Navigation với jQuery & CSS

• November 22, 2009
• 47 comments

Tabbed Navigation ngày càng trở nên phổ biến khi mà các designer ngày càng muốn tận dụng từng centimet trên màn hình. Trước đây trang web chỉ đơn giản là banner, nội dung và một ít sidebar. Thì bây giờ trang web phải có đủ thứ phải trình trên trang chủ. Nhưng diện tích chiều ngang thì có hạn do vậy Tabbed Navigation là lựa chọn tốt nhất để tiết kiệm diện tích chiều ngang.

Trong bài này chúng ta sẽ sử dụng kiến thức đã học ở những bài trước như Sprite Image để tạo nút 2 trạng thái. Sau đó dùng CSS để định dạng các thành phần và cuối cùng là sử dụng jQuery để tạo ra hiệu ứng kéo lên, thả xuống.

Thời lượng: 35:05

Download định dạng .avi chất lượng cao: MediaFire, MegaUpload

File size:73.59 MB

Giải thích thêm về jQuery

Bởi vì trên izwebz chưa giới thiệu về jQuery cho nên tôi sẽ có thêm phần giải thích này để các bạn có thể hiểu thêm hơn về jQuery. Với những ai chưa biết về jQuery thì jQuery là một dạng thư viện Javascript giúp bạn tiết kiệm thời gian hơn khi viết code HTML và nó cũng đơn giản hơn Javascript. Để tìm hiểu thêm về jQuery bạn có thể vào trang chủ của jQuery và đọc phần Documentation

Khi viết code jQuery bao giờ cũng bắt đầu với:

$(document).ready(function() {

});

Đoạn code này là phần mở đầu cho jQuery và nó có tác dụng là báo cho trình duyệt biết sẽ chạy những đoạn code ở trong nó một khi đã load xong trang web. Và trong bài này thì nó sẽ chạy đoạn code sau:

$('a.tab').click(function(){
            });

Đây là một trong những event handler của jQuery. Hiểu theo ngôn ngữ nói thì là khi ta click vào một thẻ <a> với class=’tab’ thì sẽ chạy đoạn code nằm trong hai dâu {}

$('.active').removeClass('active');
$(this).addClass('active');
$('.content').slideUp();
var content_show = $(this).attr('title');
$('#'+ content_show).slideDown();

Bạn cũng lưu ý là jQuery Selector làm việc với nguyên lý của CSS Selector. Cho nên khi chúng ta muốn chọn những thành phần có class=’active’ thì mình sẽ gọi là $(‘.active’). Khi gọi ra mình muốn làm gì với nó? chúng ta muốn bỏ cái class=’active’ đi do vậy chúng ta sử dụng function removeClass(). Sau khi đã loại bỏ class=’active’ đi, bây giờ sẽ thêm class=’active’ vào nút mà người dùng đang click. Cho nên function addClass() được sử dụng. Khi đã biết người dùng đang ở nút nào thì chỉ việc kéo nội dung của nó lên trên bằng function slideUp().

Cuối cùng thì ta sẽ tạo một biến trong jQuery để tìm ra phần nội dung nào tương ứng với nút đó dựa vào attribute là title. Lấy title lưu lại vào biến content_show và sử dụng function slideDown() để kết thúc code jQuery