15种表单占位符placeholder动画jquery插件

当前位置:主页 > jQuery库 > 表单 > 15种表单占位符placeholder动画jquery插件
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
15种表单占位符placeholder动画jquery插件
分享:

    插件介绍

    foxholder.js是一款表单占位符placeholder动画jquery插件。该placeholder动画共有15种动画效果,它使用简单,兼容性好,值得推荐。

    浏览器兼容性

    浏览器兼容性
    时间:2017-03-29
    阅读:
简要教程

foxholder.js是一款表单占位符placeholder动画jquery插件。该placeholder动画共有15种动画效果,它使用简单,兼容性好,值得推荐。foxholder.js插件的特点还有:

  • 可以执行平滑和性能优化的CSS3 placeholder动画。
  • 15种不同的placeholder动画特效。
  • 兼容IE 9+, Safari 9+, FF, Opera, Chrome, Edge等主流浏览器。

使用方法

在页面中引入foxholder-styles.css,jquery和foxholder.js文件。

<link href="path/to/css/foxholder-styles.css" rel="stylesheet">
<script src='path/to/js/jquery.min.js'></script>
<script src='path/to/js/foxholder.js'></script>
                
HTML结构

使用foxholder.js插件的placeholder占位符动画的基本HTML结构如下:

<div class="your-class">
  <form>
    <input id="your-id-1" type="text" placeholder="My Input" />
    <textarea id="your-id-2" placeholder="My Textarea"></textarea>
    <button type="submit">提交</button>
  </form>
</div>        
                

需要注意的是,提交按钮只能使用<button>按钮。

初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该placeholder占位符动画插件。

jQuery('.your-class').foxholder({
    demo: 1 //or other number of demo (1-15) you want to use
});               
                

foxholder.js placeholder占位符动画插件的github地址为:https://github.com/eisenfox/foxholder

网友评论