非常简洁的【注册登录表单界面】浮动标签并且跨浏览器 jQuery 插件 HTML5 源码

'; }else{ echo '

点击查看原图

FlowupLabels.js是一款可以兼容IE8+浏览器的实用jQuery表单浮动标签插件。该浮动标签插件可以在某个表单字段获得焦点的时候,使该表单字段的label标签滑动到输入域的上方,效果非常的酷。


使用方法:
使用该w浮动标签插件需要引入jQuery,jquery.FlowupLabels.js和jquery.FlowupLabels.css文件。
<link rel="stylesheet" href="css/jquery.FlowupLabels.css" media="screen">
<script src="dist/jquery.min.js"></script>
<script src="dist/jquery.FlowupLabels.min.js"></script>               
 HTML结构

该浮动标签的HTML结构需求如下:在你的表单元素上添加class FlowupLabels,然后将input输入域和label包裹在一个div.fl_wrap容器中,为input元素添加class fl_label,为label元素添加class fl_input。
<form id='formBody' class='FlowupLabels'>
  <div class='fl_wrap'>
    <label class='fl_label' for='rf_name'>Name:</label>
    <input class='fl_input' type='text' id='rf_name' />
  </div>
  <div class='fl_wrap'>
    <label class='fl_label' for='rf_email'>Email:</label>
    <input class='fl_input' type='email' id='rf_email' />
  </div>
  ......
</form>                
 初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该浮动标签插件。
(function(){
  $('.FlowupLabels').FlowupLabels({
    feature_onInitLoad: true, 
    class_focused:    'focused',
    class_populated:  'populated'
  });
})();
                
 配置参数
该浮动标签插件有3个可用的配置参数:
feature_onInitLoad:在页面加载时处理可能有预填充的输入框。
class_focused:输入框聚焦时的class。
class_populated:输入框输入文本时的class。


在线演示源码下载

'; }?-->

标签: 源码 插件


下载声明

  1. 资源的所有权益归版权者所有
  2. 未经权益所有人同意,不得将资源中的内容挪作商业或盈利用途
  3. 站长开源下载频道仅提供交流平台,并不能对任何下载资源负责
  4. 下载资源中如有侵权或不适当内容,请与我联系邮箱:admin@97ym.cn,QQ: 424405176
  5. 本站不保证本站提供的资源的准确性,安全性和完整性,同时也不承担用户因使用这些下 载资源对自己和他人造成   任何形式的伤害或损失。