Thứ ba, ngày 21 tháng 11 năm 2017

Tạo tab menu cơ bản sử dụng jQuery UI

Ngày đăng: 24/7/2011, 23:27:12PM | Lượt xem: 12,965
Hot!

Bài viết này hướng dẫn cách tạo giao diện tab đơn giản nhưng khiến cho trang web vẫn có thể đọc được khi công cụ trình duyệt tắt chức năng JavaScript.

Tạo nội dung theo tab thật dễ dàng nhờ sử dụng giao diện người jQuery (jQuery UI).

 

Bài viết này hướng dẫn cách tạo giao diện tab đơn giản nhưng khiến cho trang web vẫn có thể đọc được khi công cụ trình duyệt tắt chức năng JavaScript.

Phương pháp này liên quan đến việc ẩn và hiện các thành phần sử dụng JavaScript trước khi thực thi tab.

Xem

Demo

. Bạn hãy thử tắt JavaScript trên công cụ trình duyệt.


Bước 1:

Chúng ta cần một lớp CSS để áp dụng cho các thành phần được ẩn.

.hidden {
display: none;
}


Bước 2:

Thiết lập JavaScript như bên dưới. Chú ý dòng thứ nhất để hiển thị tab menu, dòng thứ hai ẩn các tiêu đề và dòng cuối cùng thực thi các tab.

 
$(function() {
$(".tabmenu").removeClass("hidden");
$(".tabs h2").addClass("hidden");
$(".tabs").tabs();
});

 

Ngoài ra còn có sự hỗ trợ của 2 file javascript là jquery.min.js và jquery-ui.min.js và file jquery-ui.css. Đặt toàn bộ các javascript và css trong phần đầu của trang web (trước thẻ </head> như thế này:

<style type="text/css">
.hidden {
display: none;
}
</style>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$(".tabmenu").removeClass("hidden");
$(".tabs h2").addClass("hidden");
$(".tabs").tabs();
});
</script>


Bước 3:

Cuối cùng là thiết lập HTML, đặt đoạn code bên dưới vào phần thân của trang web, giữa 2 thẻ <body> và </body>. Theo mặc định thì các UI tab sử dụng liệt kê không có thứ tự (ul) với các liên kết neo làm tab và sử dụng các thẻ div tương ứng với nội dung. Liệt kê bắt đầu ẩn đi và sẽ được hiển thị bằng JavaScript và mỗi phần có một tiêu đề mà sẽ được ẩn đi nếu JavaScript được kích hoạt.

<div class="tabs">
<ul class="tabmenu hidden">
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
<li><a href="#tab-3">Tab 3</a></li>
<li><a href="#tab-4">Tab 4</a></li>
</ul>
<div id="tab-1">
<h2>Tab 1</h2>
<p>Nội dung của tab 1</p>
</div>
<div id="tab-2">
<h2>Tab 2</h2>
<p>Nội dung của tab 2</p>
</div>
<div id="tab-3">
<h2>Tab 3</h2>
<p>Nội dung của tab 3</p>
</div>
<div id="tab-4">
<h2>Tab 4</h2>
<p>Nội dung của tab 4</p>
</div>
</div>
Bạn có thể tạo giao diện tab như thế này trên Blogger. Chỉ cần đặt tất cả các phần code trình bày ở trên trong một tiện ích HTML/JavaScript là thành công.
Biên tập và chỉnh sửa: stty
 Chia sẻ qua: 
Hot!
Ý kiến bạn đọc

These items will be permanently deleted and cannot be recovered. Are you sure?

Gallery

image

Maecenas viverra rutrum pulvinar

Maecenas viverra rutrum pulvinar! Aenean vehicula nulla sit amet metus aliquam et malesuada risus aliquet. Vestibulum rhoncus, dolor sit amet venenatis porta, metus purus sagittis nisl, sodales volutpat elit lorem…

Read more

Text Links

Thiết kế logo chuyên nghiệp Insky
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
ca do bong da online
Copyright © 2011 - 2012 vietshare.vn by phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.