表单/表格

表单input字段提示信息动画jQuery特效

面包多

表单input字段提示信息动画jQuery特效-创客云
表单和 input 字段是网页设计不被或缺的一部分。自从“placeholder”属性的出现,越来越少的人会在设计表单时使用 Label 标签,而是改为使用占位文字。在这个插件中,我们发挥了一点点想象力,将 input 字段的占位文字产生一些非常酷的动画效果。插件的工作原理非常简单,插件检测 input 字段的状态,当发现 input 字段被聚焦时,插件将用占位文字产生一个新的 div,然后使用 css3 使其向上运动。当 input 字段失去焦点时,插件就会检查 input 的内容,如果发现它是空的,那么就将原来占位文字放回去。

  1. HTML结构
也想出现在这里?联系我们
创客主机

我们可以使用 HTML5 的自定义字段来使该插件工作。

data-position - 这个字段可以让你定义 label 的位置,

  1. <div class="page-container">
  2. <input type="text" class="label_better" data-position="top" placeholder="Username">
  3. <input type="text" class="label_better" data-position="right" placeholder="Email Address">

data-new-placeholder - 这个属性可以使你在占位中不仅使用文本还可以使用图标等其它资源。

  1. <input type="text" class="label_better" data-new-placeholder="Type your username" placeholder="Username">
  2. <input type="text" class="label_better" data-new-placeholder="Type your email address" placeholder="Email Address">

JAVASCRIPT

首先需要引入 jQuery 和 jquery.label_better.js 文件。

  1. <script type="text/javascript" src="http://libs.useso.com/js/jquery/1.11.1/jquery.min.js"></script>
  2. <script type="text/javascript" src="jquery.label_better.js"></script>

然后调用插件:

  1. $("input.label_better").label_better({
  2.     position: "top",
  3.     animationTime: 500,
  4.     easing: "ease-in-out",
  5.     offset: 20
  6.   });

position:定义 label 出现的位置。可用参数为:“left”, “right”, “top" 和 “bottom”。“top”为默认参数。

animateTime:label 向上或向下动画的时间。默认值为 500ms。

easing:类似 CSS easing 动画方式。用于定义动画的类型。可用参数有:linear, ease, ease-in, ease-out, ease-in-out 和 cubic-bezier。默认值为:ease-in-out。你可以在这里测试 easing 动画。

offset:该参数用于调整字段和 label 之间的距离。单位是像素,默认值为:10

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!