04/10/2018, 20:17

Đổi danh sách dạng box sang dạng list đơn giản với jQuery

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 ...

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ọ.

change-form-box-to-list

Xem Demo | 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ới class .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%;
	awidth: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{
	awidth: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;
	awidth: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;
	awidth: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{
	awidth: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.

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

Tags: css3 CSS3 Transitions jQuery

Chuyên Mục: Javascript

Bài viết được đăng bởi webmaster

Bài liên quan

Đổi danh sách dạng box sang dạng list đơn giản với jQuery

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 ...

Hoàng Hải Đăng viết 20:17 ngày 04/10/2018

5 mẫu CSS về liệt kê danh sách (List Styles) bạn nên tham khảo

Hầu hết trong các mẫu thiết kế web, chúng ta thường xuyên phải sử dụng danh sách (list) để liệt kê nội dung. Hôm nay mình sẽ chia sẻ với các bạn 5 cách định dạng css khác nhau , từ các danh sách đơn giản, đến các danh sách có hình ảnh thumnails, số thứ tự…Bài viết này sẽ rất hữu ích cho ...

Tạ Quốc Bảo viết 20:00 ngày 04/10/2018

Các thẻ heading (h1,h2,h3,h4,h5,h6) và list (danh sách)

Các thẻ và thuộc tính trong HTML Các thẻ định dạng văn bản trong HTML Các thẻ Table, Tr, Td, tBody, thead, tfoot Thẻ liên kết a trong HTML Hướng dẫn học HTML sử dụng thẻ heading (h1,h2,h3,h4,h6) và list (ul,ol,li) giúp nhấn mạnh nội dung trang web và chia nội dung theo danh sách hình ...

Trịnh Tiến Mạnh viết 16:50 ngày 04/09/2018

Các thuộc tính định dạng DANH SÁCH (LIST) trong CSS

Cấu trúc của danh sách Có hai kiểu danh sách là: danh sách có thứ tự (dùng thẻ <ol>) và danh sách không có thứ tự (dùng thẻ <ul>) Các thẻ: <ol>, <ul>, <li> đều thuộc dạng PHẦN TỬ KHỐI. Hình ảnh minh họa dưới đây sẽ cho bạn thấy rõ cấu trúc phạm vi của các phần tử ...

Hoàng Hải Đăng viết 11:01 ngày 18/08/2018

Cách tạo danh sách (list) trong HTML

Trong HTML có rất nhiều loại danh sách như: danh sách không có thứ tự, danh sách có thứ tự, danh sách hai cấp, danh sách ba cấp,.... Ví dụ: Danh sách không thứ tự HTML/CSS JavaScript Server Side Danh sách có thứ tự HTML/CSS JavaScript Server Side ...

Bùi Văn Nam viết 10:38 ngày 18/08/2018
0