Vngreenzone.com: Hiệu ứng trượt nội dung nổi bật sử dụng jQuery UI

Nov 3, 2010

Hiệu ứng trượt nội dung nổi bật sử dụng jQuery UI

Trình chiếu những bài viết nổi bật nhất trong website/webblog của bạn theo một kiểu độc đáo có thể thu hút sự chú ý của người lướt web. Sử dụng kỹ thuật trình chiếu nội dung tự động là một trong những kỹ thuật giúp tiết kiệm không gian web. Việc sử dụng thư viện jQuery UI có thể giúp cho kiểu trình chiếu trở nên mềm mại và đẹp mắt hơn.

Sau đây xin giới thiệu một kiểu trình chiếu như vậy. Xem Demo và thực hiện theo các bước như bên dưới.

1. Đặt phần code sau đây vào trước thẻ </head>. Áp dụng cho cả website và Blogger.

<style type="text/css">
#featured{
width:400px;
padding-right:250px;
position:relative;
border:5px solid #ccc;
height:250px; overflow:hidden;
background:#fff;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px; height:250px;
overflow:auto;
overflow-x:hidden;
}
#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:18px;
}
#featured li.ui-tabs-nav-item a{
display:block;
height:60px; text-decoration:none;
color:#333; background:#fff;
line-height:20px; outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{
background:url('http://demo.webdeveloperplus.com/featured-content-slider/images/selected-item.gif ') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
}
#featured .ui-tabs-panel .info{
position:absolute;
bottom:0; left:0;
height:70px;
background: url('http://demo.webdeveloperplus.com/featured-content-slider/images/transparent-bg.png');
}
#featured .ui-tabs-panel .info a.hideshow{
position:absolute; font-size:11px; font-family:Verdana; color:#f0f0f0; right:10px; top:-20px; line-height:20px; margin:0; outline:none; background:#333;
}
#featured .info h2{
font-size:1.2em; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0; font-weight:normal;
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;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>

2. Thiết lập cấu trúc HTML như bên dưới và đặt vào phần thân của trang web nằm giữa 2 thẻ <body>, </body>. Đối với Blogger thì đặt vào một tiện ích HTML/JavaScript.

<div id="featured" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" 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="images/image2-small.jpg" alt="" /><span>Tieu de bai viet 2</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>Tieu de bai viet 3></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Tieu de bai viet 4</span></a></li>
</ul>

<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="images/image1.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Tieu de bai viet 1</a></h2>
<p>Noi dung tom tat cho bai viet 1....<a href="#" >Read more</a></p>
</div>
</div>


<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image2.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Tieu de bai viet 2</a></h2>
<p>Noi dung tom tat cho bai viet 2....<a href="#" >Read more</a></p>
</div>
</div>


<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image3.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Tieu de bai viet 3</a></h2>
<p>Noi dung tom tat cho bai viet 3....<a href="#" >Read more</a></p>
</div>
</div>


<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image4.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Tieu de bai viet 4</a></h2>
<p>Noi dung tom tat cho bai viet 4....<a href="#" >Read more</a></p>
</div>
</div>
</div>

Trong phần HTML ở trên, các liên kết đánh dấu màu đỏ là liên kết ảnh đại diện, các liên kết đánh dấu màu xanh là liên kết ảnh với kích thước lớn.

Thủ thuật này sẽ khá phức tạp đối với một người mới bước chân vào nghiên cứu CSS, HTML, Javascript, jQuery. Nếu bạn gặp rắc rối, xin vui lòng để lại câu hỏi để Admin gỡ rối nhé.

Theo Webdeveloperplus

* Cập nhật ngày 02/04/2011: Nếu bạn muốn áp dụng một cách tự động cho blogspot thì hãy thực hiện như sau:

Xem Demo.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Đặt đoạn code sau đây vào trước thẻ </head>.

<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:250px;
}
#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://demo.webdeveloperplus.com/featured-content-slider/images/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:176px;
left:2px;
height:75px;
width:336px;
background:url('http://demo.webdeveloperplus.com/featured-content-slider/images/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:#f00;
font-size:13px;
}
#featured .info a:hover{
text-decoration:underline;
}
#featured .ui-tabs-hide{
display:none;
}
#featured .ui-tabs-nav-item img{
height:37px;
width:55px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>
<script src="http://hacodeproject.googlecode.com/files/uislide.js" type="text/javascript"></script>

Lưu Template.

Bước 2. Vào Page Elements, thêm một tiện ích HTML/Javascript và đặt đoạn code sau vào nội dung tiện ích.

<script type="text/javascript">
imgr = new Array();
imgr[0] = "http://goo.gl/NR90r";
showRandomImg = false;
fntsize = 12;
acolor = "#E67C15";
aBold = true;
text = "nhận xét";
showPostDate = true;
summaryPost = 100;
summaryFontsize = 12;
summaryColor = "#000";

numposts =5;
label = "Recent Posts";
home_page = "http://huynh-nhat-ha.blogspot.com/";
</script>

<div id="featured">
<script type="text/javascript">
document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
<script type="text/javascript">
document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");
</script>
</div>

Trong đoạn code trên, bạn cần thay huynh-nhat-ha bằng tên blogspot của bạn. Ở trên áp dụng cho cả blogspot, nếu bạn muốn áp dụng cho một nhãn nào đó, thì thay đoạn code được đánh dấu màu đỏ bằng đoạn code bên dưới.

<script type="text/javascript">
document.write("<script src=\""+home_page+"feeds/posts/default/-/"+label+"?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>

<script type="text/javascript">
document.write("<script src=\""+home_page+"feeds/posts/default/-/"+label+"?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");
</script>

Tại tham số label = "Recent Posts"; hãy thay Recent Posts bằng tên nhãn cần áp dụng slide.

No comments:

Post a Comment

Comment của bạn sẽ bị xóa nếu:
- Bạn chèn thẻ liên kết (a tag).
- Nội dung gây khó chịu cho các bạn đọc khác.
- Thắc mắc không liên quan bài viết, hãy post tại Hỏi đáp.
- P/s : Comment chê Admin xấu trai cũng sẽ bị xóa không thương tiếc :D