Trình diễn bài viết dạng Slide với jQuery - 1 October 2010 - All 4 You
Friday, 24-Feb-2017, 4:57 PM
Welcome Guest | RSS
Main » 2010 » October » 1 » Trình diễn bài viết dạng Slide với jQuery
2:02 PM
Trình diễn bài viết dạng Slide với jQuery
Hình minh họa thủ thuật:


© 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://all4u.dmon.com/CSS/style6.css" />
<script type="text/javascript" src="http://all4u.dmon.com/Js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="http://all4u.dmon.com/Js/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 bạn thành công.
Category: Featured Post - Image Gallery | Views: 883 | Added by: all4u | Rating: 0.0/0
Total comments: 7
7  
Sorry, folks, but this is a disaster.The new menu <a href="http://ygidgjy.com">sytsem</a> made the upper top of the window disappear on XP. But trying to reply to any email made the whole thing crash, again and again and again.I reinstalled TB 16. I hope TB 17 it does not auto-reinstall.

6  
The Health Recovery Center in Minneapolis, MN is another out-patient cliinc that tests for all kinds of things including pyroluria, histamine, glucose, food allergies, candida, heavy metals, and I'm probably forgetting something. It is important to get tested for all of it because everyone has different levels, and what works for one person won't work for everyone.

5  
cập nhật bằng tay hả bạn. ^^. chèn infomer vô đc hok, nếu dựoc thi huong dẫn mình chèn vô chỗ nào lun nha

4  
hihi . cam on ban nhiu`, de minh lam thu? ^^

1  
hjx. rắc rối quá. vậy trong trang của mình thì làm sao đây bạn.

http://a3youandme.ucoz.net/ hứong dẫn mình nha ^^. mới vào nghề gà lắm.


2  
Để mình xem lại nhé, hihi

3  
Đoạn code được rồi đó.

Only registered users can add comments.
[ Registration | Login ]
Login Form
Nhận bài qua Email


Đăng ký để nhận thông tin
và bài post mới nhất qua email

Chuyên mục
Toàn tập Dmon/ Ucoz [22]
Hướng dẫn thiết kế website với dịch vụ của Dmon.com/ Ucoz.com,...
Code [18]
Các code giúp bạn cá nhân hóa trang web của bạn
Design [21]
Các công cụ web giúp thiết kế web....
Featured Post - Image Gallery [15]
Menu [5]
Các Menu đẹp cho web của bạn
Tab Content [6]
Templates [3]
Toàn bộ thiết kế Template
Khác [0]
Rearch
Thống kê

Total online: 1
Guests: 1
Users: 0
Bản đồ truy cập
Locations of visitors to this page