Hướng dẫn pagination css
|
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. Show
 Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức. Trong bài này mình sẽ hướng dẫn các bạn định dạng một phần phân trang đơn giản, các bạn hãy xem ví dụ dưới đây: Ok chúng ta cùng tiến hành nhé! 1. Xây dựng giao diệnBước đầu tiên là xây dựng phần giao diện, các bạn tạo file Bài viết này được đăng tại [free tuts .net] Code Ở đâ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 CSSGiờ 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 3. Lời kếtQua 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é! Đầ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é! Class CSSVà 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 CSSNhư bạn thấy ở ví dụ trên thì class HTMLCSSVà 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ẻ liPhần này chúng ta sẽ đi
vào tìm hiểu cách tạo phần trang từ thẻ HTMLCSSVà 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 JavascriptKế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 CSSKế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 JavascriptKế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 CSSKế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 JqueryKế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 PaginationKế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ế PaginationKế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 PaginationKế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 HTML5Kế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 GSAPKế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 PaginationKế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 PaginationKế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 PaginationKế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 JqueryKế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 SVGKế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 CSS3Kế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 JavascriptKế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 CSSKế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 WebsiteKế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 PaginationKế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 ButtonsKết quả bạn xem bên dưới nhé! See the Pen Pagination Buttons by Himalaya Singh (@himalayasingh) on CodePen. Nguồn SVG PaginationKế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 paginationKế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 PaginationKế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 demoKế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 UIKế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 BootstrapKế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ẻ! |
