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。