Feature List jQuery Plugin - 15 October 2010 - All 4 You
Thursday, 23-Mar-2017, 8:18 PM
Welcome Guest | RSS
Main » 2010 » October » 15 » Feature List jQuery Plugin
9:45 AM
Feature List jQuery Plugin
Featured List là một plugin của jQuery cho phép bạn tạo các widget "Featured Items” một cách nhanh chóng. Plugin rất nhẹ (chỉ 2KB) và có thể sử dụng để thể hiện nhiều widget trên một trang web. Feature List jQuery Plugin hoạt động hầu hết trên các trình duyệt, bao gồm cả IE6.

Xem Demo


Feature List yêu cầu mã HTML đơn giản và có thể dễ dàng đổi style bằng CSS. Bạn cũng có thể tùy chỉnh một số thuộc tính như: default tab, dừng khi di chuột qua, thời gian tự động thay đổi tab...

Code
<link rel="stylesheet" href="http://all4u.dmon.com/CSS/style3.css" /> 
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
<script type="text/javascript" 
src="http://all4u.dmon.com/Js/jquery.featureList-1.0.0.js"></script> 
<style type="text/css"> 
h3 {
margin: 0;
padding: 7px 0 0 0;
font-size: 16px;
text-transform: uppercase;
}
div#feature_list {
width: 750px;
height: 240px;
overflow: hidden;
position: relative;
}
div#feature_list ul {
position: absolute;
top: 0;
list-style: none;
padding: 0;
margin: 0;
}
ul#tabs {
left: 0;
z-index: 2;
width: 320px;
}
ul#tabs li {
font-size: 12px;
font-family: Arial;
}
ul#tabs li img {
padding: 5px;
border: none;
float: left;
margin: 10px 10px 0 0;
}
ul#tabs li a {
color: #222;
text-decoration: none;
display: block;
padding: 10px;
height: 60px;
outline: none;
}
ul#tabs li a:hover {
text-decoration: underline;
}
ul#tabs li a.current {
background:  url('http://i.imgur.com/1h2vJ.png');
color: #FFF;
}
ul#tabs li a.current:hover {
text-decoration: none;
cursor: default;
}
ul#output {
right: 0;
width: 463px;
height: 240px;
position: relative;
}
ul#output li {
position: absolute;
width: 463px;
height: 240px;
}
ul#output li a {
position: absolute;
bottom: 10px;
right: 10px;
padding: 8px 12px;
text-decoration: none;
font-size: 11px;
color: #FFF;
background: #000;
-moz-border-radius: 5px;
}
ul#output li a:hover {
background: #D33431;
}
</style> 
<script language="javascript"> 
$(document).ready(function() {
$.featureList(
$("#tabs li a"),
$("#output li"), {
start_item : 1
}
);
// Alternative
$('#tabs li a').featureList({
output : '#output li',
start_item : 1
});
});
</script> 
<div id="content"> 
<div id="feature_list"> 
<ul id="tabs"> 
<li> 
<a href="javascript:;"><img src="1.jpg" /> //ảnh biểu tượng nhỏ
<h3>Title 1</h3><span>Nội dung 1</span></a></li> 
<li><a href="javascript:;"><img src="2.jpg" /><h3>Title 2</h3><span>Nội dung 2</span></a></li> 
<li><a href="javascript:;"><img src="3.jpg" /><h3>Title 3</h3> 
<span>Nội dung 3</span></a></li></ul> 

<ul id="output"><li><img src="11.jpg" /> //ảnh lớn 1
<a href="#">See project details</a></li> 
<li><img src="22.jpg" /><a href="#">See project details</a></li> 
<li><img src="33.jpg" /><a href="#">See project details</a></li> 
</ul></div></div> 
<script type="text/javascript"> 
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' 
type='text/javascript'%3E%3C/script%3E"));
</script> 
<script type="text/javascript"> 
try {
var pageTracker = _gat._getTracker("UA-4230547-2");
pageTracker._trackPageview();
} catch(err) {}</script> 

Chúc các bạn thành công!


Category: Featured Post - Image Gallery | Views: 825 | Added by: all4u | Rating: 0.0/0
Total comments: 0
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