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

2022-12-26 0 604

jQuery Label Better 协助你记号您的配置文件输出域,暗含迷人的动画电影效用所以不占用空间。那个应用程序的独有之处是大部份你须要做的是加进两个转义水晶本,多于当采用者须要它的这时候才表明条码。

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

应用程序的组织工作基本上原理比较简单,应用程序检验 input 表头的状况,当辨认出 input 表头被著眼时,应用程序将用转义文本造成两个捷伊 div,接着采用 css3使其向下体育运动。当 input 表头丧失关注点时,应用程序就会检查和 input 的文本,假如辨认出它是空的,所以就将原本转义文本放回来。

基本上用语

要将其加进到您的中文网站,只需将最捷伊 jQuery 库与 jquery.labelbetter.js 文件格式一同包涵到您的中文网站中,并只需初始化下列表达式方可:

$(“input.labelbetter”).labelbetter({ 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

该记号使您能分别表述每个输出表头的边线。

data-new-placeholder

有时您可能期望转义水晶本与条码文本不同。您能透过如下表述捷伊转义水晶本来做到这一点,并且该值将表明为条码。

这是 Label Better 应用程序的全部文本。敬请期待更多的更新。

相关链接

在线实例:http://www.thepetedesign.com/demos/labelbetterdemo.htmlGithub 地址:https://github.com/peachananr/labelbetter

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务