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
这将使您定义当用户单击输入字段时标签将出现的位置。可接受的选项是 top
、bottom
、left
和 right. 默认值 top
。
animationTime
这将让您控制标签显示时的动画速度。此选项接受以毫秒为单位的值。默认值是 500
。
easing
通过此选项,您可以定义希望对标签进行动画处理的CSS缓动。该选项接受所有默认的CSS缓动,例如 linear
、ease
等。另一个可以使用的附加选项是 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 插件的全部内容。敬请期待更多的更新。
相关链接
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论