• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

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

2
17/10/2010

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.

{2 bình luậnAdd yours ?}

23:57:00, 28 thg 1, 2011

Tôi mới sử dụng blogpost, xem cách tạo tab của Anh ở trên, tôi chưa hiểu lắm, Anh có thể vui lòng chỉ dẫn cụ thể lại không?

Reply
07:27:00, 29 thg 1, 2011

Bạn có thể xem thêm bài này. Có lẽ qua tết mình mới viết bài cơ bản về blogspot để các bạn newbie tìm hiểu.

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn