强大的jQuery超级标签插件

强大的jQuery超级标签插件

简介

在进行表单设计时，你是否想过让标签以一种更具吸引力的方式与输入框互动？jQuery Super Labels 插件就是为了解决这个问题而诞生的。它提供了一种创新的方法，使标签能在获得焦点时优雅地滑过输入框，并在输入值后淡出，为你的表单增加一丝"性感"。

此插件支持以下元素：input[type="text"], input[type="search"], input[type="url"], input[type="tel"], input[type="email"], input[type="password"], input[type="number"], textarea，甚至包括select字段。

(如果可用，将使用easing插件)

谁在使用？

一些知名网站已经在他们的平台上采用了Super Labels。你可以在项目的seen-on.md文件中查看列表。如果你也正在使用这个插件，并希望将自己的站点添加到列表中，可以通过我的网站发送请求或提交Pull Request。

演示

你可以在我个人网站上的这里体验到插件的部分功能，演示文件也包含在仓库的demo目录下。

使用方法

确保标签和输入框的容器元素设置了position:relative;。然后，该插件应具备足够的灵活性来满足大部分需求。

基础用法

最简单的使用方式如下：

// 确保DOM已加载后再执行此代码。
jQuery(function($) {
  $('form').superLabels();
});

对form应用插件会自动将特效应用于上述接受的字段。如果你需要微调标签的位置，可以传递labelLeft和/或labelTop参数：

$('form').superLabels({
  labelLeft:5,
  labelTop:5
});

最后，你也可以选择只对特定的字段应用superLabels，如：

$('input.foo, textarea.bar, select.baz').superLabels();

高级用法

插件还提供了许多可选参数供你自定义：

• autoCharLimit - 是否自动计算字符限制（见下文更多内容）。(默认：false)
• baseZindex - 标签的基础z-index。(默认：0)
• debug - 是否显示控制台消息。(默认：false)
  • 注意：minify版本中不可用。
• duration - 动画持续时间（毫秒）。(默认：500)
• easingIn - 滑入动画使用的缓动函数。(默认：'easeInOutCubic')
• easingOut - 滑出动画使用的缓动函数。(默认：'easeInOutCubic')
• fadeDuration - 只有淡入淡出时的动画时间。(默认：250)
• labelLeft - 标签距左的距离。(默认：0)
  • 如果你是细节控，可以指定单位，例如labelLeft:'5px'
• labelTop - 标签距顶的距离。(默认：0)
  • 同上，labelTop:'5px'
• noAnimate - 是否禁用动画。设为true则类似占位符。(默认：false)
  • 这是一个备用选项，当动画性能问题出现时可启用。
• opacity - 淡出时的透明度。(默认：0.5)
• slide - 是否滑动标签。(默认：true)
• wrapSelector - 包裹每个字段的元素的选择器。(默认：false)
  • 当作为最后一招时使用，优先确保字段和标签在标记中相邻，或使用for属性将标签指向字段的name或id。

"字符限制"

自版本1.1.2起，你可以通过添加data-sl-char-limit数据属性来设置某个字段淡出前需输入的字符数。如果不需要，就省略这个属性。

例如，让标签在输入20个字符后淡出：

<label for="text-input">Name</label>
<input type="text" name="text-input" value="" data-sl-char-limit="20" />

自1.2.0版本开始，还可以让superLabels自动尝试预测字符长度。可通过设置autoCharLimit选项，或者将data-sl-char-limit属性设置为auto。

autoCharLimit选项会被特定元素data-sl-char-limit属性中的值覆盖。

需要注意的是，除非使用等宽字体，否则无法精确确定字符长度，因为这会影响性能。

关于placeholder

按照规范，placeholder应用于“提供一个简短的提示词（一个单词或短语），帮助用户输入数据”。而不是代替标签。

SuperLabels从1.1.1版本开始对placeholder的处理是这样的：

• 如果字段既有标签又有placeholder，则placeholder成为标签的title，鼠标悬停时会出现提示。
• 如果仅有placeholder，那么它将成为字段的标签。

已知问题

我会在此列出已知的问题，并尽快解决。

• 部分浏览器（非Chrome）自动填充表单字段时会导致视觉错误。当前，标签保持可见并定位在输入框之上，即使输入框已有值。已在Firefox 这里报告此问题。
• IE中加粗标签文本的透明度问题。由alensa在这个bug中指出。建议修复办法是在CSS中为标签添加背景色。

许可证

本项目采用MIT许可证，详细信息请参考http://remybach.mit-license.org/。

总之，jQuery Super Labels插件是你提升表单用户体验的不二之选。赶快试试看吧，给你的网站增添一份独特的魅力！