前言
在前端开发过程中，UI 组件和交互部分的处理和实现是必不可少的。而在处理这些东西时，往往会使用一些外部的工具库，以方便快速地实现功能。其中，containers.js 就是一款相对实用且适用范围广泛的一个库。
containers.js 是一个 JS 实用程序库，根据各种数据结构构建 DOM 元素以及创建动画效果。它提供了一些通用的基础容器结构，包括卡片、面板、窗口和更多。containers.js 是一个用于 Web 应用程序的完整前端 UI 库，帮助开发人员更快地构建自定义和精美的用户界面。
安装
你可以使用 npm 包管理器来安装 containers.js。在你的项目中，运行以下指令：
npm install containers.js --save
示例
下面是一个添加了 cards 和 panels 的基本示例。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------------- ----------
----- ---------------- ----------------------
-------
------
---- -----------------------
---- ------------ ----------------
---- --------------------
------- --- ---------
-- --------- -------------
------
---- ---------------------------
------
------
---- ------------------------
---- ------------- ----------------
---- ---------------------
------- --- ----------
-- --------- -------------
------
---- ----------------------------
------
------
------- -----------------------------
-------
-------你可以在你的 CSS 中添加以下代码：
-- -------------------- ---- -------
----------------
-------- -----
---------- -----
-
------
------- ----
------- --- ----- -----
------ ----------- - ------
---------- ----------- - ------
----------- ------
-
----- -------------
------------- -----
-------------- -----
------------ -----
--------------- -----
------ -----
----------- -----
-------- -----
---------------- --------------
-
----- ------------ ---
------- --
---------- -----
------------ -----
--------------- ----------
-
----- ------------ --
---------- -----
-
----- --------------
-------- -----
-
-----------------
-------- -----
---------- -----
-
-------
------- ----
------- --- ----- -----
------ -------- - ------
---------- -------- - ------
----------- ------
-
------ --------------
------------- -----
-------------- -----
------------ -----
--------------- -----
------ -----
----------- -----
-------- -----
---------------- --------------
-
------ ------------- ---
------- --
---------- -----
------------ -----
--------------- ----------
-
------ ------------- --
---------- -----
-
------ ---------------
-------- -----
-这个例子中，我们创建了两个容器，一个 card 容器，一个 panel 容器，每个容器下又各自加入了一个添加按钮。而页内样式表处添加了样式，给容器和按钮等添加了美观的样式。
指南
基本容器
containers.js 提供了四个基本容器，它们分别是：
.card-container.panel-container.window-container.modal-container
可以通过添加对应的 className 来为容器添加样式列表：
<div class="card-container">...</div> <div class="panel-container">...</div> <div class="window-container">...</div>
添加容器 Item
对于容器中的 Item，可以使用下面的代码来添加：
-- -------------------- ---- -------
--- ---- - --- -----------
----- -------
------- -
------ ----- -------
------- -
----- ------
----- -------
--------- -----------
---------- ----------
-
-
--
-------- -------- ------------
---创建一个新的 Card 实例后，若想将它添加至容器中，则可按照以下方式进行操作：
Card.addTo(".card-container");该代码会将 Card 实例添加至 class 名为 .card-container 的节点中。其他容器也有类似的操作方式。
除了可以通过 description 方式创建实例内容外，你也可以通过直接将 HTML 结构插入类似以下的代码内来创建新实例：
-- -------------------- ---- -------
---- ------------ -----------------
---- --------------------
-------- ----------
-- --------- -------------
------
---- ---------------------
------- -----------
------
------其中，你需要使用 data-type 属性为容器指定类别。
配置
在创建新的容器实例时，它可以接收一个包含属性的对象。不同的容器类型可能有不同的属性。通用的属性包括：
type:（必填）容器的类型header:（可选）头部的配置title：标题action：操作项的配置text：文字icon：图标callback：回调函数
content:（可选）内容
例如，对于 Card 容器实例，你可以按照如下方式进行实例化：
-- -------------------- ---- -------
--- ---- - --- -----------
----- -------
------- -
------ ----- -------
------- -
----- ------
----- -------
--------- -----------
---------------- ----------
-
-
--
-------- -------- ------------
---其中，我们设置了 Card 的标题、按钮以及容器内容。
自定义容器
如果你想要在容器中添加自定义元素、事件处理程序、样式等，则可以在创建容器时为其添加新的 CSS 类、事件监听器等。
自定义 CSS 类
你可以向容器中添加自定义 CSS 类名。例如，如果你想要将一些特定的元素添加到 /css/containers.css 中提供的基本样式之上，则可以按照如下方式进行操作：
.my-card {
background-color: #111;
color: #fff;
border: none;
}在实例化新的 Card 对象时，我们可以定义新的 type 值以进行新容器的扩展和自定义：
let myCard = new Container({
type: "my-card",
header: {
title: "My Card"
},
content: "<p>A custom card container</p>"
});容器实例化后，可以将 my-card 添加到 .card-container 中。
自定义事件监听器
-- -------------------- ---- -------
--- ------ - --- -----------
----- ----------
------- -
------ --- ------
------- -
----- ------- --------
--------- -----------
------------------- ------ ----------
-
-
--
-------- ----- ------ ---- --------------
---
---------------------------------
----------------- --- ------- ---- ---------- -- ------
---可以看到，在创建新容器时，我们可以使用 onClick 方法为容器添加自定义事件监听器。
动画效果
containers.js 还提供了一些默认的动画效果，可以实现一些简单的旋转、翻转和移动效果。
动画效果 Type
目前支持的动画 Type 如下：
spin: 按钮呈现顺时针菊花状旋转rotate: 按钮在垂直方向上执行翻转效果slide: 按钮执行带缓冲的水平平移效果
按钮动画
-- -------------------- ---- -------
--- ---------- - --- -----------
----- ---------
----- -------
---------- ------
---
------------------------------
----------------- ------ ----------
---
--------------------------------------卡片动画
-- -------------------- ---- -------
--- ------------ - --- -----------
----- -------
------- -
------ --- -------- ------
------- -
----- -------
---------- -------
--------- ---------- -
----------------- ----------
-
-
--
-------- -------- -------------
---------- -------
---
--------------------------------------可以看到，这个容器在添加到页面时执行了平移效果，而当我们点击容器中的按钮时，它又执行了翻转效果。
更多关于 containers.js 的特性和使用方法，请参考官网相关文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60059cc281e8991b448ed46d