7/23/2011 09:47:00 PM
Lê Hoàng Anh
Fandung.com
☼ Giới thiệu sơ về thủ thuật:
- Thủ thuật sử dung jQuery để hiển thị các bài viết.Có 2 phần, phần bên trái là phần hiển thị, phần bên phải là danh sách các bài viết. Bình thường thủ thuật sẽ tự thay đổi bài viết trong 1 khoảng thời gian nhất định, tùy vào mình cài đặt. Khi nhấp vào 1 bài viết nào trong phần bên phải, thì bài viết sẽ hiển thị ảnh thumbnail lớn vào tiêu đề (hoặc có thể là đoạn mô tả nhỏ về bài viết) ở phần bên trái.
☼ Bắt đầu thực hiện :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đoạn code bên dưới vào trước thẻ đóng </head>
<script src="http://data.fandung.com/blog/demo/slide-jQuery/cty_files/jquery.js" type="text/javascript"></script>
<script src="http://data.fandung.com/blog/demo/slide-jQuery/cty_files/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({
fx: {
opacity: "toggle"
}
}).tabs("rotate", 3000, true);
});
</script>
<style type="text/css">
#featured{
/* width:400px;
padding-right:250px; */
position:relative;
border:1px solid #ccc;
height:252px;
background:#fff;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:340px;
list-style:none;
padding:0; margin:0;
width:210px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:12px;
color:#034E8F;
}
#featured li.ui-tabs-nav-item a{
display:block;
height:48px;
color:#333; background:#fff;
line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{
background:url('http://data.fandung.com/blog/demo/slide-jQuery/selected-item.gif') left -5px no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured .ui-tabs-panel{
width:337px;
height:251px;
background:#999; position:relative;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:196px;
left:2px;
height:55px;
width:336px;
background:url('http://data.fandung.com/blog/demo/slide-jQuery/transparent-bg.png') repeat;
}
#featured .info h2{
font-size:12px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}
#featured .ui-tabs-hide{
display:none;
}
#featured .ui-tabs-nav-item img{
height:37px;
width:55px;
}
</style>
- Số 3000 ở trên chính là thời gian thay đổi bài viết, tính bằng ms (mini giây)
4. Save template.
5. Tạo 1 widget HTML/Javascript và dán code của thủ thuật vào.
<div id="featured">
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item" id="nav-fragment-1">
<a href="#fragment-1">
<img src="link anh bai viet 1" alt=""/>
<span>{Tieu de bai viet 1}</span>
</a>
</li>
<li class="ui-tabs-nav-item" id="nav-fragment-2">
<a href="#fragment-2">
<img src="link anh bai viet 2" alt=""/>
<span>{Tieu de bai viet 2}</span>
</a>
</li>
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-3">
<a href="#fragment-3">
<img src="link anh bai viet 3" alt="">
<span>{Tieu de bai viet 3}</span>
</a>
</li>
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-4">
<a href="#fragment-4">
<img src="link anh bai viet 4" alt="">
<span>{Tieu de bai viet 4}</span>
</a>
</li>
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-5">
<a href="#fragment-5">
<img src="link anh bai viet 5" alt="">
<span>{Tieu de bai viet 5}</span>
</a>
</li>
</ul>
<div style="" id="fragment-1" class="ui-tabs-panel ui-tabs-hide">
<a style="color: rgb(255, 255, 255);" href="link bai viet 1">
<img src="link anh bai viet 1" alt="" width="337" height="250"/>
</a>
<div class="info">
<h2><a href="link bai viet 1">{Tieu de bai viet 1}</a></h2>
<p></p>
</div>
</div>
<div style="" id="fragment-2" class="ui-tabs-panel ui-tabs-hide">
<a style="color: rgb(255, 255, 255);" href="link bai viet 2">
<img src="link anh bai viet 2" alt="" width="337" height="250"/>
</a>
<div class="info">
<h2><a href="link bai viet 2">{Tieu de bai viet 2}</a></h2>
<p></p>
</div>
</div>
<div style="" id="fragment-3" class="ui-tabs-panel ui-tabs-hide">
<a style="color: rgb(255, 255, 255);" href="link bai viet 3">
<img src="link anh bai viet 3" alt="" width="337" height="250"/>
</a>
<div class="info">
<h2><a href="link bai viet 3">{Tieu de bai viet 3}</a></h2>
<p></p>
</div>
</div>
<div style="" id="fragment-4" class="ui-tabs-panel ui-tabs-hide">
<a style="color: rgb(255, 255, 255);" href="link bai viet 4">
<img src="link anh bai viet 4" alt="" width="337" height="250"/>
</a>
<div class="info">
<h2><a href="link bai viet 4">{Tieu de bai viet 4}</a></h2>
<p></p>
</div>
</div>
<div style="" id="fragment-5" class="ui-tabs-panel ui-tabs-hide">
<a style="color: rgb(255, 255, 255);" href="link bai viet 5">
<img src="link anh bai viet 5" alt="" width="337" height="250"/>
</a>
<div class="info">
<h2><a href="link bai viet 5">{Tieu de bai viet 5}</a></h2>
<p></p>
</div>
</div>
</div>
Have fun!!!!
Posted in 
