Triển khai Thành phần Tab từ Scratch trong Vanilla JavaScript
Nâng cao kỹ năng phát triển của bạn bằng cách tạo lại thành phần tab nổi tiếng mà không sử dụng thêm gì nữa, sau đó là JavaScript vani và trí thông minh không thể áp dụng của bạn!
Nhìn bề ngoài, các tab có vẻ khá nhàm chán. Tất cả ta đều biết họ làm gì và sử dụng chúng hàng ngày trong trình duyệt web của bạn mà không cần suy nghĩ nhiều, tuy nhiên, việc thiết kế thành phần tab hiện đại, có thể tái sử dụng hoạt động tốt trên thiết bị di động chỉ sử dụng công nghệ trình duyệt root có thể khá khó khăn và một cơ hội tuyệt vời để xây dựng một số mã “thế giới thực”.
Yêu cầu cơ bản
Thành phần tab của ta cần phải là:
- Phản ứng nhanh nhẹn
- Có thể tái sử dụng
- Lồng được
- Có thể đặt một tab mặc định
Ta hãy đi đến đó! Trước tiên, tôi sẽ bắt đầu với mã, sau đó phân tích những gì đang xảy ra:
Đánh dấu
Đây là đánh dấu HTML cơ bản cho thành phần tab của ta :
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Gator tabs</title> <link rel="stylesheet" href="index.css"> </head> <body> <div class="gator-tabs-container"> <ul class="gator-tabs-header"> <li>The nest</li> <li class="default-gator-tab">Hello world!</li> <li>Rise of the gator</li> </ul> <ul class="gator-tabs"> <li class="gator-tabs-container"> <ul class="gator-tabs-header"> <li>Nested 1</li> <li class="default-gator-tab">Nested 2</li> </ul> <ul class="gator-tabs"> <li class="gator-tab">Some eggs in nest one</li> <li class="gator-tab">Some eggs in nest two</li> </ul> </li> <li class="gator-tab">Hello world from tab one!</li> <li class="gator-tab">Believe me I know tabs, I have the best tabs. Nobody does tabs like I do.</li> <li class="gator-tab">For now the eggs lay dormant but soon the gators will rise from the swamps.</li> </ul> </div> <script src="main.js"></script> </body> </html> Tạo kiểu
Và một số kiểu CSS để làm cho tất cả trông đẹp:
/* minimal reset */ * { margin:0; border:0; padding:0; box-sizing:border-box; list-style:none; } body{ background-color: #333; /* because serifs are gross (IMO) */ font-family: sans-serif; } .gator-tabs-container{ display:flex; flex-direction:column; width:100%; } .gator-tabs-header { background-color:#DFA612; display:flex; flex-wrap:wrap; padding:.375rem; } .gator-tabs-header > li { color:#fff; cursor:pointer; flex-grow:1; padding:.375rem; font-size:1.125rem; } .gator-tabs { display:flex; } .gator-tab { padding:1rem; color:#fff; } Mã JavaScript
Và bây giờ hãy để điều kỳ diệu xảy ra với một số JavaScript đơn giản:
function tabify( element ){ const header = element.querySelector('.gator-tabs-header'); const content = element.querySelector('.gator-tabs'); const tab_headers = [...header.children]; const tab_contents = [...content.children]; tab_contents.forEach( x => x.style.display = 'none'); let current_tab_index = -1; function setTab( index ){ if( current_tab_index > -1 ){ tab_headers[ current_tab_index ].style.fontWeight = 400; tab_contents[ current_tab_index ].style.display = 'none'; } tab_headers[ index ].style.fontWeight = 800; tab_contents[ index ].style.display = 'flex'; current_tab_index = index; } default_tab_index = tab_headers.findIndex( x => { return [...x.classList].indexOf('default-gator-tab') > -1; }); default_tab_index = default_tab_index === -1 ? 0 : default_tab_index; setTab( default_tab_index ); tab_headers.forEach((x,i) => x.onclick = event => setTab(i)); } // this is where the magic happens! [...document.querySelectorAll('.gator-tabs-container')] .forEach(x => tabify(x)); Đây là ảnh chụp màn hình của ứng dụng trên thiết bị di động:
Tóm tắt / Phân tích
Yêu cầu đầu tiên của ta là xây dựng một thứ gì đó đáp ứng và điều này đã được giải quyết dễ dàng bằng cách sử dụng Flexbox với thuộc tính flex-wrap để các tiêu đề tab giờ đây sẽ xếp chồng lên nhau trên thiết bị di động.
Việc làm cho mã có thể tái sử dụng thoạt đầu có vẻ khó khăn nhưng bằng cách gói mã của ta vào một hàm có tên là tabify ta có thể tạo bất kỳ thứ gì thành một tab thỏa mãn cấu trúc thẻ / lớp được yêu cầu. Điều này cũng làm cho yêu cầu tiếp theo của ta , có thể lồng ghép, tự động rơi vào vị trí.
Yêu cầu cuối cùng là khả năng đặt một tab làm tab được chọn mặc định khi trang mở ra. Điều này được thực hiện bằng cách thêm lớp default-gator-tab vào tiêu đề tab mong muốn và tập lệnh của ta sẽ tìm index của tiêu đề tab đầu tiên với lớp này và sử dụng nó để đặt tab ban đầu.
Trong một bài viết trước, ta đã mô tả việc xây dựng các tab bằng React , nhưng thành thật mà nói, tôi khó tìm thấy bất kỳ lợi thế đáng kể nào mà React có so với Javascript đơn thuần trong trường hợp này. Ta có thể chuyển bất kỳ cấu hình nào đến tập lệnh của bạn , chẳng hạn như tab mặc định bằng cách sử dụng tên lớp (thay vì đạo cụ) và ta đang sử dụng cùng một lượng mã như version React mà không cần khuôn khổ!
Nếu ta muốn, ta có thể dễ dàng mở rộng những gì ta có để bao gồm hoạt ảnh hoặc tính năng phức tạp hơn nhưng tôi sẽ để điều đó tùy thuộc vào bạn.
Các tin liên quan
Khám phá cây qua JavaScript2020-02-23
Giới thiệu về danh sách được liên kết qua JavaScript - Phần 2: Triển khai
2020-02-23
Khám phá các và hàng đợi qua JavaScript
2020-02-23
Câu hỏi phỏng vấn JavaScript: Gotchas phổ biến
2020-02-21
Giới thiệu về danh sách được liên kết qua JavaScript - Phần 1: Tổng quan
2020-02-21
Hiểu Radix Sắp xếp Thông qua JavaScript
2020-02-18
Cách xây dựng PWA trong Vanilla JavaScript
2020-02-17
Hiểu về Sắp xếp nhanh qua JavaScript
2020-02-14
Hiểu bản đồ và thiết lập đối tượng trong JavaScript
2020-02-12
Hiểu Hợp nhất Sắp xếp Thông qua JavaScript
2020-02-08
