js是如何创建排序指示箭头的?

How does tablesort.js create the sort indicator arrows

本文关键字：指示 排序 创建 何创建 js      更新时间：2023-09-26

我最近发现了tablesort.js组件，它允许对普通HTML表的行进行排序。请看下面的小例子。

我试图了解如何在表头中创建排序指示器(向上/向下箭头)。

tables .js使用的CSS是非常小的，不包含任何(背景)图像。另外，查看javascript代码和使用浏览器的开发工具并没有帮助我理解指示器是如何创建的。

有人能解释一下这些指标是如何创建的吗?

tables .js使用的CSS如下:

th.sort-header {
  cursor:pointer;
  }
th.sort-header::-moz-selection,
th.sort-header::selection {
  background:transparent;
  }
table th.sort-header:after {
  content:'';
  float:right;
  margin-top:7px;
  border-width:0 4px 4px;
  border-style:solid;
  border-color:#404040 transparent;
  visibility:hidden;
  }
table th.sort-header:hover:after {
  visibility:visible;
  }
table th.sort-up:after,
table th.sort-down:after,
table th.sort-down:hover:after {
  visibility:visible;
  opacity:0.4;
  }
table th.sort-up:after {
  border-bottom:none;
  border-width:4px 4px 0;
  }

他们在使用伪元素:

table th.sort-header:hover:after {
    visibility: visible;
}
table th.sort-header:after {
    content: '';
    float: right;
    margin-top: 7px;
    border-width: 0 4px 4px;
    border-style: solid;
    border-color: #404040 transparent;
    visibility: hidden;
}

然后切换一个类来改变border-width样式，从而改变箭头。

编辑:需要说明的是，border-width样式是用来形成箭头形状的。
相关文章：