Wednesday, December 5, 2012

Tạo Tab đơn giản bằng jQuery

Một tiện ích được khá nhiều Webmaster yêu thích đó là Tab jQuery. Vì nó làm cho trang web được gọn gàng và tiện dụng hơn. Tuy vậy, không phải thủ thuật nào cũng phù hợp với template của bạn đang sử dụng. Một vấn đề khác nảy sinh là sự "choảng nhau" hay còn gọi là "xung đột" jQuery. Và đó là lý do tại sao phải tìm hiểu và áp dụng sao cho hợp lý nhất. Có lẽ, đó là cái... nhức đầu và thú vị nhất mà mỗi Blogger hay Webmaster cảm nhận được.

Tiện ích này khá đơn giản, tuy vậy cũng tương đối mù mit với những ai mới làm quen đến code. Nhưng không phải là bạn không làm được. Người khác làm được thì bạn cũng làm được. Hãy tin là như thế!

XEM DEMO

Trước khi thực hiện thủ thuật, Bạn phải Sao/Lưu Template của mình lại. Đó là điều M21love khuyến khích bạn. Phòng bệnh hơn chữa bệnh mà.

Để thực hiện thủ thuật, bạn vào phần Mẫu -> Chọn chỉnh sửa HTML

Tiếp theo, Click chọn vào Mở rộng tiện ích -> Ctrl + F và làm theo các hướng dẫn sau:

BƯỚC 1: THÊM CSS

Chèn đoạn code sau vào trước thẻ ]]></b:skin>

#tabContaier{
background:#a0afbd;
border:1px solid #7b9bbb;
margin:20px auto;
padding:20px;
position:relative;
width:500px;}
#tabContaier ul{
overflow:hidden;
border-right:1px solid #fff;
height:35px;
position:absolute;
z-index:100;}
#tabContaier li{
float:left;
list-style:none;}

#tabContaier li a{
background:#ddd;
border:1px solid #fcfcfc;
border-right:0;
color:#333;
cursor:pointer;
display:block;
height:35px;
font-weight:700;
line-height:35px;
padding:0 30px;
text-decoration:none;
text-transform:uppercase;}
#tabContaier li a:hover{
background:#ccc;}
#tabContaier li a.active{
background:#fbfbfb;
border:1px solid #fff;
border-right:0;
color:#333;}
.tabDetails{
background:#fbfbfb;
border:1px solid #fff;
margin:34px 0 0;}
.tabContents{
padding:20px}
.tabContents h1{
font-family:Arial, Helvetica, sans-serif;
color:#333;
font-size:18px;
padding:0 0 10px;}

.tabContents p{
padding:0 0 10px;
text-align:justify;}

BƯỚC 2: THÊM jQuery

Chèn đoạn Code sau vào sau thẻ ]]></b:skin>

<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".tabContents").hide(); // Ẩn toàn bộ nội dung của tab
$(".tabContents:first").show(); // Mặc định sẽ hiển thị tab1
$("#tabContaier ul li a").click(function(){ //Khai báo sự kiện khi click vào một tab nào đó
var activeTab = $(this).attr("href");
$("#tabContaier ul li
a").removeClass("active");
$(this).addClass("active");
$(".tabContents").hide();
$(activeTab).fadeIn();
});
});
</script>

BƯỚC 3: THÊM HTML

Chèn đoạn code sau vào trước thẻ </head>

<div id="tabContaier">
<ul>
<li><a class="active" href="#tab1">Xã hội</a></li>
<li><a href="#tab2">Thế giới</a></li>
<li><a href="#tab3">Văn hoá</a></li>
<li><a href="#tab4">Khoa học</a></li>
</ul>
</div>

Lưu ý: thay đổi tên Tab theo tên bạn muốn
+ Thêm nội dung vào các Tab
- Bạn vào Phần tử trang -> Thêm tiện ích/HTML -> Copy và dán đoạn code sau vào phần nội dung

<div class="tabDetails">
<div id="tab1" class="tabContents">
<--Nội dung cần trình bày -->
</div>
<div id="tab2" class="tabContents">
<--Nội dung cần trình bày -->
</div>
<div id="tab3" class="tabContents">
<--Nội dung cần trình bày -->
</div>
<div id="tab4" class="tabContents">
<--Nội dung cần trình bày -->
</div>
</div>