jQuery Label Better 优雅的表单输入框提示插件 - 文章教程

jQuery Label Better 优雅的表单输入框提示插件

发布于 2020-03-24 字数 2998 浏览 1692 评论 0

jQuery Label Better 帮助你标记您的表单输入域,带有美丽的动画效果而且不占用空间。这个插件的独特之处在于所有你需要做的就是添加一个占位符文本,只有当用户需要它的时候才显示标签。

jQuery Label Better 优雅的表单输入框提示插件

插件的工作原理非常简单,插件检测 input 字段的状态,当发现 input 字段被聚焦时,插件将用占位文字产生一个新的 div,然后使用 css3 使其向上运动。当 input 字段失去焦点时,插件就会检查 input 的内容,如果发现它是空的,那么就将原来占位文字放回去。

基本用法

要将其添加到您的网站,只需将最新的 jQuery 库与 jquery.label_better.js 文档一起包含到您的网站中 <head>,并只需调用以下函数即可:

$("input.label_better").label_better({
  position: "top",
  animationTime: 500,
  easing: "ease-in-out",
  offset: 20,
  hidePlaceholderOnFocus: true
});

可选参数

position

这将使您定义当用户单击输入字段时标签将出现的位置。可接受的选项是 topbottomleft 和 right. 默认值 top

animationTime

这将让您控制标签显示时的动画速度。此选项接受以毫秒为单位的值。默认值是 500

easing

通过此选项,您可以定义希望对标签进行动画处理的CSS缓动。该选项接受所有默认的CSS缓动,例如 linearease 等。另一个可以使用的附加选项是 bounce。默认值为 ease-in-out

offset

您可以在输入和标签之间添加更多间距。此选项接受以像素为单位的值(不包含单位)。默认值为 20

hidePlaceholderOnFocus

默认的占位符文本将隐藏在焦点上。

HTML 属性

使用此插件,您可以使用标记来覆盖上面函数中定义的全局选项。您可以根据自己的喜好使用以下所有标记:

data-position

该标记使您可以分别定义每个输入字段的位置。

<input type="text" class="label_better" data-position="top" placeholder="Username">
<input type="text" class="label_better" data-position="right" placeholder="Email Address">

data-new-placeholder

有时您可能希望占位符文本与标签文本不同。您可以通过如下定义新的占位符文本来做到这一点,并且该值将显示为标签。

<input type="text" class="label_better" data-new-placeholder="Type your username" placeholder="Username">
<input type="text" class="label_better" data-new-placeholder="Type your email address" placeholder="Email Address">

这就是 Label Better 插件的全部内容。敬请期待更多的更新。

相关链接

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

扫码加入群聊

发布评论

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

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

关于作者

JSmiles

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

2891 文章
评论
84935 人气
更多

推荐作者

伊面

文章 0 评论

白况

文章 0 评论

七禾

文章 0 评论

亢潮

文章 0 评论

悲念泪

文章 0 评论