Trình diễn bài viết dạng Slide với jQuery - 14 June 2012 - DHTP5 chào đón bạn!
Xin chào, Khách ghé thăm | Đăng ký | Đăng nhập
content top
TRANG CHỦ » 2012 » Tháng Sáu » 14 » Trình diễn bài viết dạng Slide với jQuery
10:10 PM
Trình diễn bài viết dạng Slide với jQuery
Chào các bạn!
Hôm nay mình hướng dẫn một cách trình diễn bài viết mà mình tham khảo và áp dụng tốt trên site mình. Đó là Trình diễn bài viết dạng Slide với jQuery.
Hình minh họa:

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.
Sửa và paste đoạn code sau vào nơi bạn muốn hiển thị nha:

Code:
<link rel="stylesheet" type="text/css" href="http://dhtp5.dmon.com/CSS/style6.css" />
<script type="text/javascript" src="http://dhtp5.dmon.com/Jss/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="http://dhtp5.dmon.com/Jss/jquery-ui.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>

<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="1.jpg" alt="" width=80 height=50 /><span>Title 1</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="2.jpg" alt="" width=80 height=50 /><span>Title 2</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="3.jpg" alt="" width=80 height=50 /><span>Title 3</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="4.jpg" alt="" width=80 height=50 /><span>Title 4</span></a></li>
</ul>

<div id="fragment-1" class="ui-tabs-panel" style=""> <img src="1.jpg" alt="" width=400 height=250 /> <div class="info" > <h2><a href="#" >Title 1</a></h2> <p>ND1<a href="#" >read more</a></p></div></div>
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="2.jpg" alt="" width=400 height=250 /> <div class="info" ><h2><a href="#" >20 Title 2</a></h2><p>ND 2<a href="#" >read more</a></p> </div> </div>
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="3.jpg" alt="" width=400 height=250 /> <div class="info" > <h2><a href="#" >Title 3</a></h2> <p>ND 3<a href="#" >read more</a></p> </div> </div>
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="4.jpg" alt="" width=400 height=250 /> <div class="info" > <h2><a href="#" >Title 4</a></h2> <p>ND 4<a href="#" >read more</a></p> </div> </div>
</div>
</div>

Chúc các bạn thành công và có những khoảnh khắc thú vị với
jQuery!
Thư mục: Hướng dẫn Dmon | Đã xem: 1375 | Người đăng: trcnam | Bình chọn: 0.0/0


Tổng lời bình: 0
Chỉ Thành viên mới được phép bình luận. Vui lòng đăng ký thành viên hoặc đăng nhập
[ Đăng ký | Đăng nhập ]

BÀI NGẪU NHIÊN
BÀI MỚI
content top