用 Vanilla JavaScript 从零开始实现标签组件

通过重新创建已知的标签组件来增强你的开发技能,而不仅仅是瓦尼拉JavaScript和你的不可磨灭的智慧!

我们都知道他们在做什么,并在我们的网页浏览器中每天使用它们,而不给他们太多思考,然而,设计一个现代的,可重复使用的标签组件,它在移动设备上运作得很好,仅使用本地浏览器技术,实际上可能是相当具有挑战性的,并且是一个很好的机会来构建一些真实世界的代码。

基本要求

我们的Tab组件必须是:

  • 响应性
  • 可重复使用
  • 不稳定
  • 可以设置默认标签

让我们来! 首先,我会从代码开始,然后分解正在发生的事情:

标记

以下是我们的标签组件的基本HTML标记:

 1<!doctype html>
 2<html lang="en">
 3<head>
 4  <meta charset="utf-8">
 5  <meta name="viewport" content="width=device-width, initial-scale=1" />
 6  <title>Gator tabs</title>
 7  <link rel="stylesheet" href="index.css">
 8</head>
 9<body>
10  <div class="gator-tabs-container">
11    <ul class="gator-tabs-header">
12      <li>The nest</li>
13      <li class="default-gator-tab">Hello world!</li>
14      <li>Rise of the gator</li>
15    </ul>
16    <ul class="gator-tabs">
17      <li class="gator-tabs-container">
18        <ul class="gator-tabs-header">
19          <li>Nested 1</li>
20          <li class="default-gator-tab">Nested 2</li>
21        </ul>
22        <ul class="gator-tabs">
23          <li class="gator-tab">Some eggs in nest one</li>
24          <li class="gator-tab">Some eggs in nest two</li>
25        </ul>
26      </li>
27      <li class="gator-tab">Hello world from tab one!</li>
28      <li class="gator-tab">Believe me I know tabs, I have the best tabs. Nobody does tabs like I do.</li>
29      <li class="gator-tab">For now the eggs lay dormant but soon the gators will rise from the swamps.</li>
30    </ul>
31  </div>
32  <script src="main.js"></script>
33</body>
34</html>

风格

还有一些CSS风格,让一切看起来都很好:

 1/* minimal reset */
 2  * {
 3    margin:0;
 4    border:0;
 5    padding:0;
 6    box-sizing:border-box;
 7    list-style:none;
 8  }
 9
10  body{
11    background-color: #333;
12    /* because serifs are gross (IMO) */
13    font-family: sans-serif;
14  }
15
16  .gator-tabs-container{
17    display:flex;
18    flex-direction:column;
19    width:100%;
20  }
21
22  .gator-tabs-header {
23    background-color:#DFA612;
24    display:flex;
25    flex-wrap:wrap;
26    padding:.375rem;
27  }
28
29  .gator-tabs-header > li {
30    color:#fff;
31    cursor:pointer;
32    flex-grow:1;
33    padding:.375rem;
34    font-size:1.125rem;
35  }
36
37  .gator-tabs {
38    display:flex;
39  }
40
41  .gator-tab {
42    padding:1rem;
43    color:#fff;
44  }

JavaScript 代码

现在让我们用一些简单的JavaScript来实现魔法:

 1function tabify( element ){
 2  const header = element.querySelector('.gator-tabs-header');
 3  const content = element.querySelector('.gator-tabs');
 4  const tab_headers = [...header.children];
 5  const tab_contents = [...content.children];
 6  tab_contents.forEach( x => x.style.display = 'none');
 7  let current_tab_index = -1;
 8
 9  function setTab( index ){
10    if( current_tab_index > -1 ){
11      tab_headers[ current_tab_index ].style.fontWeight = 400;
12      tab_contents[ current_tab_index ].style.display = 'none';
13    }
14    tab_headers[ index ].style.fontWeight = 800;
15    tab_contents[ index ].style.display = 'flex';
16    current_tab_index = index;
17  }
18
19  default_tab_index = tab_headers.findIndex( x => {
20    return [...x.classList].indexOf('default-gator-tab') > -1;
21  });
22
23  default_tab_index = default_tab_index === -1 ? 0 : default_tab_index;
24  setTab( default_tab_index );
25  tab_headers.forEach((x,i) => x.onclick = event => setTab(i));
26}
27
28  // this is where the magic happens!
29[...document.querySelectorAll('.gator-tabs-container')]
30  .forEach(x => tabify(x));

以下是手机应用程序的屏幕截图:

Mobile screenshot of gator tabs

重复 / 破解

我们的第一个要求是构建一些响应性的东西,这很容易通过使用 Flexboxflex-wrap属性解决,所以卡头现在将在移动设备上相互堆叠。

使代码可重复使用可能一开始看起来很困难,但通过将我们的代码包装成一个名为tabify的函数,我们可以将任何东西变成一个满足所需的类 / 标签结构的标签。

最后的要求是能够在页面打开时将卡设置为默认选项,这是通过将默认-gator-tab类添加到所需的卡头来实现的,我们的脚本将找到该类第一个卡头的索引,并使用它来设置初始卡。

在之前的一篇文章中,我们描述了使用React的构建卡(https://andsky.com/tech/tutorials/react-tabs-component),但坦率地说,我很难找到React在这种情况下具有明显的优点。

如果我们想,我们可以很容易地扩展我们所需要的内容,包括动画或更复杂的功能,但我会把这一点留给您。

Published At
Categories with 技术
Tagged with
comments powered by Disqus