Tab Menu

Tạo List và Grid view với Jquery và CSS

display view jquery, layout view, Display Switch, css and jquery, Grid and List Display Switch (Grid and List view) with CSS and jQuery
Với một website thương mại điện tử hay đơn giản chỉ là giới thiệu sản phầm thì việc hiển thị sản phẩm là rất quan trọng. Phổ biến và thân thiện là cách hiển thị theo List hoặc Grid sản phẩm. Với Jquery và Css, bạn có thể kết hợp cả 2 và cho người dùng tùy chọn hiển thị.


Bạn có thể xem qua demo tại các trang sau: thegioididong.com , codecanyon.net/

Như một điều tất yếu, ta phải nhúng bộ thư viện Jquery trước khi sử dụng.
<script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>
Chúng ta sẽ tạo các thẻ HTML để hiển thị sản phẩm. Lưu ý thuộc tín class của mỗi thẻ nhé.
HTML
<ul class="display">
<li><div class="content_block">
<a href="#"><img src="sample.jpg" alt="" /></a>
<h2>
<a href="#">Image Name</a></h2>
<p>
Description goes here</p>
</div>
</li>
<li><div class="content_block">
<a href="#"><img src="sample.jpg" alt="" /></a>
<h2>
<a href="#">Image Name</a></h2>
<p>
Description goes here</p>
</div>
</li>
<li><div class="content_block">
<a href="#"><img src="sample.jpg" alt="" /></a>
<h2>
<a href="#">Image Name</a></h2>
<p>
Description goes here</p>
</div>
</li>
</ul>
Sau khi có các đối tượng HTML rồi, giờ thì chúng ta sẽ dùng CSS để layout cho chúng. Trong ví dụ này, mặc định sẽ hiển thị ở chế độ List, các bạn có thể thay đổi bằng cách sử dụng đoạn css khác. Nhớ đặt CSS trong thẻ head nhé
CSS
ul.display li a {
color: #e7ff61;
text-decoration: none;
}
ul.display li .content_block {
padding: 0 10px;
height: 170px;
}
ul.display li .content_block h2 {
margin: 0;
padding: 5px;
font-weight: normal;
font-size: 1.7em;
}
ul.display li .content_block p {
margin: 0;
padding: 5px 5px 5px 245px;  /*–The left padding keeps the
content from flowing under the image–*/
font-size: 1.2em;
}
ul.display li .content_block a img{ /*–Double border technique–*/
padding: 5px;
border: 2px solid #ccc;
background: #fff;
margin: 0 15px 0 0;
float: left;
}
Tiếp theo, chúng ta sẽ tạo một liên kết để người dùng có thể thay đổi cách hiển thị thông qua nó. Để đơn giản s sẽ sử dụng một liên kết, bạn có thể sử dụng một button hoặc kết hợp css để tạo ra sự khác biệt
HTML
Switch Display
Đến đây thì chúng ta đã có một giao diện hoàn chỉnh hiển thị sản phẩm dạng List. Để sản phẩm của chúng ta có thể hiển thị dạng Grid sau khi click vào liên kết, chúng ta phải tạo thêm một đoạn CSS sau:
CSS
ul.thumb_view li{ width: 250px; float:left; } /*–Switch the width
to accommodate for the three column layout–*/
ul.thumb_view li h2 { display: inline; }
ul.thumb_view li p{ display: none; }
ul.thumb_view li .content_block a img { margin: 0 0 10px; }
a.switch_thumb {
width: 122px;
height: 26px;
line-height: 26px;
padding: 0;
margin: 10px 0;
display: block;
background: url(../switch.gif) no-repeat;
outline: none;
text-indent: 1px;
}
a.swap { background-position: left bottom; background-color:#060; }
a:hover.switch_thumb {
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
OK, việc cuối cùng là thêm một đoạn Jquery để chức năng của chúng ta có thể hoạt động.
JQUERY
$(document).ready(function(){
$("a.switch_thumb").toggle(function(){
$(this).addClass("swap");
$("ul.display").fadeOut("fast", function() {
$(this).fadeIn("fast").addClass("thumb_view");
});
}, function () {
$(this).removeClass("swap");
$("ul.display").fadeOut("fast", function() {
$(this).fadeIn("fast").removeClass("thumb_view");
});
});
});
Bây giờ các bạn Save lại và xem thành quả nhé! BB all!

Hiện có 6 comments

TRAN PHUONG NAM

cái này ứng dụng cho blogger được không anh

Salipro Phạm

Nếu @TRAN PHUONG NAM nắm rõ cấu trúc HTML của blogger thì hoàn toàn có thể vì đây chỉ áp dụng vài thao tác của jQuery. Hãy cứ "thử một lần ui` bạn sẽ thích" :D

Omi Tien

hiện tại mình đang có 1 blog bài đăng đang ở dạng list bình thường muốn áp dụng jquery này vào thì phải chèn code vào đâu vậy bạn ơi? mình làm mãi mà nó không ra hix hix

Salipro Phạm

@Omi Tien Blog ban rất mượt! Để đơn giản, đầu tiên là bạn phải thiết kế được cái layout Gridview bằng css trên trang hiện tại. Sau đó, bạn dùng một chút jquery để change nó. Chúc bạn may mắn!

Duy Lê Đức

Bạn có thể hướng dẫn mình chi tiết chèn thêm cookie vào được không bạn?

Hiep Nguyen

Bài viết rất hay và chi tiết
..........................
Mr.Hiệp
Đam Mê Bóng Đá
bong88 l bong88

Post a Comment

Bạn có thể tự do cho ý kiến, thảo luận về bài viết này nhưng phải theo những điều khoản sau:
- Phải nghiêm túc, không dung tục, không spam.
- Nội dung phải liên quan đến bài viết.
- Không mang tính chất chính trị...
- Hạn chế sử dụng Ẩn danh, hãy dùng Tên/URL để thay thế.
Lưu ý : Có thể sử dụng tag HTML cơ bản trong comment: br, b, i, u, a href= ...

:)
:(
;)
:D
=))
:-/
:x
I-)
@-)
=D:
:-q
:-w
[-X
B-)
:((
:-B
:-h
:x(
:-*
~O)
@};-

About

RSS
Coming soon... :))