Khi hiển thị bài viết hoặc sản phẩm trên trang web, chắc hẳn là các bạn sẽ có lúc bối rối không biết nên sắp xếp các bài viết của mình theo dạng box hay dạng list, thì sẽ thân thiện hơn đối với người dùng. Nhưng qua bài viết này, các bạn sẽ không cần phải suy nghĩ nhiều nữa, vì mình sẽ chia sẻ cho các bạn một cách mà người dùng có thể tự tay điều chỉnh danh sách hiển thị theo ý muốn của họ.
Download
HTML
Đầu tiên, các bạn copy đoạn html sau để tạo danh sách hiển thị bài viết hoặc sản phẩm.
<div class="wrapper">
<header>
<a href="javascript:void(0)" class="show-list"><i class="fa fa-th-list"></i></a>
<a href="javascript:void(0)" class="hide-list"><i class="fa fa-th"></i></a>
</header>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
Trong đoạn html bên trên, mình có chèn thêm 2 icon bằng font Awesome dùng để điều chỉnh chức năng hiển thị dạng box hoặc list. Các thẻ div vớiclass .box sẽ là noi chứa các bài viết.
CSS
Kế tiếp là chúng ta sẽ định dạng css cơ bản cho khung chứa bài viết.
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body{
background-color:#F2F2F2;
font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
margin:0;
padding:0;
height:100%;
width:100%;
text-align:center;
color:#404040;
position:relative;
}
a{
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.wrapper{
width:450px;
margin:30px auto 0;
background-color:#FFFFFF;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
header{
text-align:right;
padding:10px;
margin-bottom:10px;
background-color:#5DBA9D;
}
header a{
font-size:20px;
color:#FFFFFF;
width:40px;
height:40px;
line-height:40px;
margin-left:10px;
text-align:center;
display:inline-block;
}
header a:hover, .list-mode header a.hide-list:hover{
background-color:#11956c;
}
header a.hide-list{
background-color:#11956c;
}
.list-mode header a.hide-list{
background-color:#5DBA9D;
}
.list-mode header a.show-list{
background-color:#11956c;
}
.container:after{
content:"";
clear:both;
display:table;
}
.container{
padding:10px 0 10px 10px;
}
Chúng ta cũng sẽ tạo hiệu ứng chuyển đổi đơn giản với thuộc tính transition trong CSS3.
.wrapper .box{
float:left;
width:100px;
height:100px;
margin:0 10px 10px 0;
background-color:#CCCCCC;
-webkit-transition:all 1.0s ease;
-moz-transition:all 1.0s ease;
transition:all 1.0s ease;
transition:all 1.0s ease;
}
.wrapper.list-mode .container{
padding-right:10px;
}
.wrapper.list-mode .box{
width:100%;
}
jQuery
Cuối cùng, các bạn chỉ cần thêm vào đoạn script sau để hiệu ứng chuyển đổi xuất hiện.
$('.show-list').click(function(){
$('.wrapper').addClass('list-mode');
});
$('.hide-list').click(function(){
$('.wrapper').removeClass('list-mode');
});
Đây chỉ là những phần cơ bản để có thể có một chức năng chuyển đổi danh sách, nhưng các bạn có thể áp dụng được ngay vào trong trang web hay blog của các bạn. Và hơn hết là các bạn sẽ học thêm nhiều về jQuery và CSS3 để có thể nâng cao kinh nghiệm của mình.