介绍
jquery.superlabels 是一个 jQuery 插件，它可以为表单元素添加标签效果。当用户在表单元素中输入文本时，标签将移动到输入框的顶部，以提供更好的可读性。
安装
您可以使用 npm 或 yarn 安装 jquery.superlabels：
npm install jquery.superlabels # 或者 yarn add jquery.superlabels
使用
要使用 jquery.superlabels，您需要先引入 jQuery 和 jquery.superlabels 的 JavaScript 文件：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="path/to/jquery.superlabels.min.js"></script>
接下来，您需要为要添加标签效果的表单元素设置一些 HTML 属性：
<input type="text" id="my-input" data-label="Your email address"> <label for="my-input">Your email address</label>
在这个例子中，我们为输入框设置了一个 data-label 属性，并将其值设置为 "Your email address"。我们还为标签添加了一个 for 属性，并将其值设置为输入框的 ID。
现在，您可以调用 jquery.superlabels：
$('#my-input').superlabels();这将为输入框添加标签效果。
配置选项
jquery.superlabels 可以使用以下选项进行配置：
labelCls: 标签元素的 CSS 类名，默认为 "superlabel"activeCls: 当输入框获得焦点时，标签元素添加的 CSS 类名，默认为 "active"animDuration: 动画时长（以毫秒为单位），默认为 150
您可以在调用 superlabels() 时传递选项：
$('#my-input').superlabels({
labelCls: 'my-label',
activeCls: 'my-active',
animDuration: 300
});示例代码
-- -------------------- ---- -------
--------- -----
------
------
---------------------------------
------- -----------------------------------------------------------
------- -------------------------------------------------
-------
----------- -
--------- ---------
----- --
---- --
---------- -----
------ -----
----------- --- ----- ---------
----------------- ---- ----
--------------- -----
-
------------------ -
------ -----
---------- -----
---------- -------------- ------ ---
-
----- -
-------- ----
------- --- ----- -----
------ ------
-------------- -----
-
--------
-------
------
------ ----------- ------------- ---------------- ----- ---------
------ ------------------- ----- ---------------
------ --------------- ---------------- ----------------------
------ ----------------------------------
--------
-----------------------------
-------------------------------
--------- -----------
---------- ------------
------------- ---
---
---------
-------
-------在这个例子中，我们为两个输入框添加了标签效果。第一个输入框使用了默认选项，而第二个输入框使用了自定义选项。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/36912