Floatlable.js 输入时动画浮动显示 placeholder 提示文本 - 文章教程

Floatlable.js 输入时动画浮动显示 placeholder 提示文本

发布于 2020-03-23 字数 2373 浏览 917 评论 0

Floatlable.js 是一个 jQuery 插件,用于用户输入时动态再文本框上面浮动显示 placeholder 提示文本,同时会增大输入框的高度,失去焦点时恢复默认的状态,如果文本框有值,则 placeholder 提示文本不会消失,这样能够避免用户不知道该如何输入。

Floatlable.js 输入时动画浮动显示 placeholder 提示文本

安装

Git URL

git://www.github.com/m10l/FloatLabel.js.git

Git Clone 代码到本地

git clone http://www.github.com/m10l/FloatLabel.js

Subversion 代码到本地

$ svn co --depth empty http://www.github.com/m10l/FloatLabel.js
Checked out revision 1.
$ cd repo
$ svn up trunk

使用

将 jquery.FloatLabel.css 添加到您的网站样式表中,并将 jquery.FloatLabel.js 添加到您的脚本中。

将 jquery.FloatLabel.js 添加到脚本中:

<script src="scripts/jquery.js"></script>
<script src="scripts/jquery.FloatLabel.js"></script>
<script src="scripts/main.js"></script>

将 jquery.FloatLabel.css 添加到样式表中:

<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/jquery.FloatLabel.css">
<link rel="stylesheet" href="styles/main.css">

用所选的类包装您想要影响的字段:

<div class="js-float-label-wrapper">
  <label for="name">Name</label>
  <input id="name" type="text">
</div>

初始化 FloatLabel.js,传递您的输入/标签包装类插件:

$('.js-float-label-wrapper').FloatLabel();

定制

当 FloatLabel.js 使用 CSS 类工作时,动画可以在 jquery.FloatLabel.css 文件中找到。

如果默认类由于任何原因与 CSS 的其余部分发生冲突,则可以在初始化插件时通过传入参数来更改它们。别忘了更新 jquery.FloatLabel.css 如果你需要改变你的新类名。

$( '.js-float-label-wrapper' ).FloatLabel({
  populatedClass : 'custom-populated-class',
  focusedClass : 'custom-focused-class'
});

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0