Matt Smith 的悬浮标签

来源：互联网发布：ubuntu 开放端口编辑：程序博客网时间：2024/06/06 02:53

悬浮标签就是在用户输入同时将需要提示用户的信息一并显示，有助于人机的交互。

https://github.com/clubdesign/floatlabels.js

前提：

要使用floatlabel.js要依赖jquery1.8+的版本，之前的版本，没有测过。

<head>..<script src="jquery.js" type="text/javascript"></script><script src="floatlabels.js" type="text/javascript"></script>..</head>

下面是一个简单的事例

<head>..<script src="jquery.js" type="text/javascript"></script><script src="floatlabels.js" type="text/javascript"></script>..<script>    $('input.floatlabel').floatlabel();</script></head><body>    <div>        <input type="text" id="test-input" placeholder="This is the placeholder" class="floatlabel">    </div></body>

需要用到的一些属性

data-label: 在input标签上用来显示悬浮的内容且不同于初始的值。

data-class: 给悬浮的内容添加css，用空格来分隔多个css。

js选项

slideInput : 默认值为true，如果为true，input框会下拉到适合悬浮标签的尺寸

labelStartTop ：默认值20px，设置距离input框顶部20px的起始点

labelEndTop ：默认值10px，设置距离input顶部10px的终止点

transitionDuration ：默认值0.3是，缓动持续时间

transitionEasing : 默认值ease-in-out, 可以参照http://easings.net/zh-cn

labelClass ：作用与data-class相同

defaults = {
slideInput : true,
labelStartTop : '20px',
labelEndTop : '10px',
paddingOffset : '10px',
transitionDuration : 0.3,
transitionEasing : 'ease-in-out',
labelClass : '',
typeMatches : /text|password|email|number|search|url/
};

0 0

Matt Smith 的 悬浮标签

Matt Smith 的悬浮标签