Pagination chính là phần phân trang, một thành phần rất quen thuộc đối với các lập trình viên. Việc nội dung của trang web được hiển thị quá nhiều sẽ khiến người dùng cảm thấy lộn xộn, thiếu chuyên nghiệp, chính vì vậy các phần phân trang ra đời, nó sẽ giúp lập trình viên xác định được số item sẽ hiển thị ra trong mỗi trang, từ đó khiến website trở nên gọn gàng và chuyên nghiệp hơn.
«
1
2
3
4
5
6
7
»
Ở đây mình sẽ tạo ví dụ gồm có 7 trang, trong thực tế số
trang này có thể lên tới hàng trục thậm trí hàng trăm tùy thuộc vào dữ liệu của website.
2. Định dạng các thành phần với CSS
Giờ ta đã có các thành phần nền rồi, mình tiếp tục sử dụng CSS để định dạng cho các thành phần dễ nhìn hơn, các bạn thêm đoạn mã CSS dưới đây vào bên trong thẻ style nhé:
.container {
width: 500px;
margin: auto;
text-align: center;
}
.pagination {
width: 400px;
margin-left: 50px;
}
.pagination a {
display: block;
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
}
.pagination a.active {
background-color: #4CAF50;
color: white;
}
.pagination a:hover:not[.active] {
background-color: #ddd;
}
Đoạn mã này rất cơ bản, chỉ là các thuộc tính về margin, padding và background, nên mình cũng không giải thích nữa.
Xong rồi giờ các bạn
chạy file index.html
để xem thành quả nhé.
3. Lời kết
Qua bài viết này, mình đã hướng dẫn các bạn định dạng một phần Pagination đơn giản với CSS, hi vọng nó sẽ giúp các bạn có thêm sự lựa chọn khi xây dựng website. Nếu có bất cứ thắc mắc gì các bạn hãy để lại ở phần bình luận, hẹn gặp lại trong các bài viết tiếp theo trên freetuts.net
Tham khảo: w3schools.com
Khi một trang web bạn có nhiều sản phẩm hay bài viết thì việc phân trang là một nhiệm vụ rất quan trọng. Nó làm tăng tốc độ tải trang cũng như giúp người dùng có thể dễ dàng theo dõi nội dung của bạn trên trang web. Bây giờ chúng ta hãy cùng nhau đi vào tìm hiểu cách thiết kế pagination bằng HTML, CSS và Javascript cho website nhé!
Cách tạo Pagination Cơ Bản Bằng HTML CSS
Đầu tiên chúng ta sẽ đi vào tìm hiểu cách tạo pagination cơ bản cho
trang web bằng HTML và CSS nhé!
HTML
«
1
2
3
4
5
6
»
Class active
có nhiệm vụ giúp người dùng biết được mình đang ở trang nào thông qua cách chúng ta thiết lập màu cho nó. Và thường thì color của class này sẽ khác so với các số trang còn lại. Để hiểu rõ hơn bạn xem đoạn mã CSS sau nhé!
CSS
/* thiết lập style cho thẻ a */
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
}
/* thiết lập style cho class active */
.pagination a.active {
background-color: dodgerblue;
color: white;
}
/* thêm màu nền khi người dùng hover vào class không active */
.pagination a:hover:not[.active] {
background-color: #ddd;
}
Và kết quả cuối cùng bạn xem ở dưới đây nhé:
See the Pen Pagination cơ bản by haycuoilennao19 [@haycuoilennao19] on CodePen.
Nguồn
Cách tạo Pagination Border
Bằng HTML CSS
Như bạn thấy ở ví dụ trên thì class active
của chúng ta có hình chữ nhật. Trong phần này mình sẽ giới thiệu đến bạn cách tạo pagination với hình tròn nhé!
HTML
«
1
2
3
4
5
6
»
CSS
/* thiết lập style cho thẻ a */
.pagination a {
color: black;
float: left;
padding: 12px 18px;
text-decoration: none;
}
/* thiết lập style cho class active */
.pagination a.active {
background-color: dodgerblue;
color: white;
/*Thiết kế hình tròn với CSS*/
border-radius: 50%;
}
/* thêm màu nền khi người dùng hover vào class không active */
.pagination a:hover:not[.active] {
background-color: #ddd;
/*Thiết kế hình tròn với CSS*/
border-radius: 50%;
}
Và kết quả cuối cùng bạn xem ở bên dưới nhé:
See the Pen
pagination với hình tròn by haycuoilennao19 [@haycuoilennao19] on CodePen.
Nguồn
Cách tạo Pagination Với Thẻ li
Phần này chúng ta sẽ đi
vào tìm hiểu cách tạo phần trang từ thẻ li
nhé!
HTML
CSS
/*thiết lập style cho màu sắc, vị trí, độ cao... cho pagination*/
.flex {
width: 400px;
height: 80px;
line-height: 80px;
background-color: #eeeeee;
position: absolute;
top: 15%;
left: 40%;
margin: -25px 0 0 -150px;
}
/*Thiết lập style cho thẻ ul*/
.flex ul {
display: flex;
padding: 0;
margin: 0;
box-shadow: 0 10px 20px 0 #cccccc;
}
/*thiết lập style cho thẻ li*/
.flex ul li {
flex: 1;
list-style: none;
text-align: center;
position: relative;
font-size: 20px;
font-weight: bold;
transition: 0.3s ease;
cursor: pointer;
user-select: none;
}
/*tạo hiệu ứng hover cho thẻ li */
.flex ul li:hover {
background-color: rgba[255, 255, 255, 0.25];
color: #65bcc9;
}
/*chuyển đổi vị trí của class bar khi người dùng hover vào các con số*/
.flex ul li:hover:nth-of-type[2] ~ .bar {
left: 20%;
}
.flex ul li:hover:nth-of-type[3] ~ .bar {
left: 40%;
}
.flex ul li:hover:nth-of-type[4] ~ .bar {
left: 60%;
}
.flex ul li:hover:nth-of-type[5] ~ .bar {
left: 80%;
}
/*thiết lập style cho class bar*/
.flex ul .bar {
width: 20%;
background-color: dodgerblue;
height: 5px;
position: absolute;
left: 0;
bottom: 0;
transition: 0.3s ease;
}
Và kết quả cuối cùng bạn xem ở dưới đây nhé:
See the Pen pagination vởi thẻ li by haycuoilennao19
[@haycuoilennao19] on CodePen.
Nguồn
Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen
mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.
Cách Tạo Pagination Javascript
Kết quả bạn xem bên dưới nhé!
See the Pen
Pacman pagination by Mikael Ainalem [@ainalem] on CodePen.
Nguồn
Tổng Hợp Các Pagination HTML CSS
Kết quả bạn xem bên dưới nhé!
See the Pen Pagination by Vineeth.TR [@vineethtrv] on CodePen.
Nguồn
Thiết Kế Pagination CSS3 Javascript
Kết quả bạn xem bên dưới nhé!
See the Pen Flexing pagination arrows by Hakim El Hattab [@hakimel] on CodePen.
Nguồn
Thiết Kế Pagination CSS
Kết quả bạn xem bên dưới nhé!
See the Pen Pagination by Rosa [@RRoberts] on CodePen.
Nguồn
Thiết Kế Pagination Với SVG
Kết quả bạn xem bên dưới nhé!
See the Pen Infinite Pagination by Mariusz Dabrowski [@MarioD] on CodePen.
Nguồn
Cách Tạo Pagination Jquery
Kết quả bạn xem bên dưới nhé!
See the Pen
Hover and Active Pagination by Doğukan Çavuş [@dgknca] on CodePen.
Nguồn
Thiết Kế CSS Pagination
Kết quả bạn xem bên dưới nhé!
See the Pen Pagination One by Steven Roberts [@matchboxhero] on CodePen.
Nguồn
Thiết Kế Pagination
Kết quả bạn xem bên dưới nhé!
See
the Pen responsive pagination by Milica [@micadev] on CodePen.
Nguồn
Thiết Lập Hiệu Ứng Animation cho Pagination
Kết quả bạn xem bên dưới nhé!
See the Pen
Spring pagination by Mikael Ainalem [@ainalem] on CodePen.
Nguồn
Thiết Kế Pagination HTML5
Kết quả bạn xem bên dưới nhé!
See the Pen Pagination with morphing numbers by Mikael Ainalem [@ainalem] on CodePen.
Nguồn
Tạo Hiệu Ứng Pagination Với GSAP
Kết quả bạn xem bên dưới nhé!
See the
Pen Dot Hopper - Pagination by Elliot Geno [@pyrografix] on CodePen.
Nguồn
Cách Tạo Jquery Pagination
Kết quả bạn xem bên dưới nhé!
See the Pen WebDesignerDepot pagination by Wouter Bles [@wouterbles] on CodePen.
Nguồn
Thiết Kế Responsive Pagination
Kết quả bạn xem bên dưới nhé!
See the Pen pagination hover animation by Elena Nazarova [@nazarelen] on CodePen.
Nguồn
Hiệu Ứng Hover Cho Pagination
Kết quả bạn xem bên dưới nhé!
See the Pen
Gooey Pagination by Lucas Bebber [@lbebber] on CodePen.
Nguồn
Thiết Kế Pagination Bằng Jquery
Kết quả bạn xem bên dưới nhé!
See the Pen Pagination by Kasper Mikiewicz [@Idered] on CodePen.
Nguồn
Tổng Hợp Các Pagination Với SVG
Kết quả bạn xem bên dưới nhé!
See the Pen SVG Pagination Animation[s] by Adam, Ironclad, Wells [@Adamlwells408] on CodePen.
Nguồn
Thiết Kế Pagination Jquery CSS3
Kết quả bạn xem bên dưới nhé!
See the Pen Unrealistic Pagination by Tony Banik [@banik] on CodePen.
Nguồn
Thiết Kế Pagination CSS Javascript
Kết quả bạn xem bên dưới nhé!
See the Pen
Pagination : Almost Tabs by Mandy McClausky [@mandynicole] on CodePen.
Nguồn
Cách Tạo Responsive Pagination HTML CSS
Kết quả bạn xem bên dưới nhé!
See
the Pen Responsive Pagination by Tommy Hodgins [@tomhodgins] on CodePen.
Nguồn
Cách Tạo Responsive Pagination Jquery Cho Website
Kết quả bạn xem bên dưới nhé!
See the Pen Responsive Magic Line Pagination by Ryan Yu [@iamryanyu] on CodePen.
Nguồn
Pure CSS3 Responsive
Pagination
Kết quả bạn xem bên dưới nhé!
See
the Pen Pure CSS3 Responsive Pagination by Béla Varga [@netzzwerg] on CodePen.
Nguồn
Pagination Buttons
Kết quả bạn xem bên dưới nhé!
See the Pen Pagination Buttons
by Himalaya Singh [@himalayasingh] on CodePen.
Nguồn
SVG Pagination
Kết quả bạn xem bên dưới nhé!
See the Pen SVG Page Hopper by Chris Gannon [@chrisgannon] on CodePen.
Nguồn
Pure CSS pagination
Kết quả bạn xem bên dưới nhé!
See the Pen Pure CSS pagination
by Brendan Mullins [@jsnanigans] on CodePen.
Nguồn
Morphing Pagination
Kết quả bạn xem bên dưới nhé!
See the Pen Morphing Pagination by
Aaron Iker [@aaroniker] on CodePen.
Nguồn
Material Angular Paging demo
Kết quả bạn xem bên dưới nhé!
See the Pen
Material Angular Pagination Demo by Crawlink [@crawlink] on CodePen.
Nguồn
Pagination UI
Kết quả bạn xem bên dưới nhé!
See the Pen Pagination or Navigation Links
Application by Himalaya Singh [@himalayasingh] on CodePen.
Nguồn
Line Pagination with Hover [PureCSS]
Kết quả bạn xem bên dưới nhé!
See the Pen
Line Pagination with Hover [PureCSS] by Mark Mead [@markmead] on CodePen.
Nguồn
Pagination HTML Bootstrap
Kết quả bạn xem bên dưới nhé!
See the Pen
Pagination by alphardex [@alphardex] on CodePen.
Nguồn
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những pagination hữu ích dành cho việc phát triển, thiết kế web
và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!