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

Question

Floatlable.js 是一个 jQuery 插件，用于用户输入时动态再文本框上面浮动显示 placeholder 提示文本，同时会增大输入框的高度，失去焦点时恢复默认的状态，如果文本框有值，则 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'
});

相关链接

• Github 地址：https://github.com/m10l/FloatLabel.js