Matt Smith 的悬浮标签

最新推荐文章于 2024-07-22 15:13:59 发布

fnacwang

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量430

点赞数

分类专栏： GitHub 文章标签： javascript jquery

GitHub 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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/
};