[FD's BlOg] - Bài viết này mình sẽ lại giới thiệu cho các bạn một ứng dụng khác nữa của jQuery cho tiện ích Recent posts. Với hiệu ứng ẩn hiện mô tả bài viết (ảnh thumbnail và phần tóm tắt) khi ta click chuột vào thanh header tương ứng của bài viết đó. Xem demo ở đây : LIVE DEMOHình ảnh minh họa :
Bắt đầu thủ thuật:1. Vào
bố cục2. Vào
chỉnh sửa code HTML3. Chèn đọan code bên dưới vào trước thẻ đóng
</head>
<script type="text/javascript" src="http://data.fandung.com/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".accordion h3:first").addClass("active");
$(".accordion p:not(:first)").hide();
$(".accordion h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
});
</script>
<style type="text/css">
.accordion {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
background: #e9e7e7 url(http://www.webdesignerwall.com/demo/jquery/images/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion h3:hover {
background-color: #e3e2e2;
}
.accordion h3.active {
background-position: right 5px;
}
.accordion p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
</style>
4. Save template.5. Tạo 1 widget
HTML/Javascript rồi dán code bên dưới vào:
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
showRandomImg = true;
jimgwidth = 80;
jimgheight = 80;
jfntsize = 12;
jacolor = "#E67C15";
jaBold = true;
jtext = "Comments";
jshowPostDate = true;
jsummaryPost = 200;
summaryFontsize = 12;
summaryColor = "#000";
numposts = 6;
label = "Film";
home_page = "http://www.fandung.com/";
</script>
<div class="accordion">
<script src="http://data.fandung.com/js/recent-post-Jquery/accordion/j-label-fix.js" type="text/javascript"></script>
</div>
- Tùy chỉnh lại những đọan
code im đậm cho phù hợp với blog của bạn.
(xem các thủ thuật recent posts cơ bản để hiểu rõ hơn)- Nếu muốn hiển thị bài viết cho cả blog thì đổi
link javascript(
code màu xanh) ở trên thành link bên dưới:
http://data.fandung.com/js/recent-post-Jquery/accordion/j-post-fix.js
Tham khảo hiệu ứng jQuery từ Web Designer WallChúc các bạn thành công.
Comments[ 0 ]
Đăng nhận xét