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

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!