当前位置: 首頁 > javascript > 表单label提示JQ插件

表单label提示JQ插件

昨天在facebook看到一个表单提示信息的分享,觉得很不错于是自己做了一个。

基本上跟自己理解的实现差不多效果,以下是源码和示例

示例:

JQ插件源码

	$.fn.form=function(option){
		var obj=$(this);
		obj.input=$(obj).find('.option').find('input');
		//事件
		$(obj.input).focus(function(){
			$(this).siblings('label').hide();
			$(this).siblings('label').addClass('hover').slideDown("fast",function(){
				$(this).siblings('input').animate({'height':'28px'},'fast');
				});
		});
		$(obj.input).blur(function(){
			$(this).siblings('label').slideUp("fast",function(){
				$(this).removeClass('hover');
				if($(this).siblings('input').val()==''){
					$(this).fadeIn('fast');
				};
				$(this).siblings('input').animate({'height':'40px'},'fast');
			});
		});
	};	
$(document).ready(function(){
	$('.form').form();
});

HTML源码

css源码

.form{ width:250px; border:3px solid #ededed; padding:10px;}
.form .option{ height:40px; margin:6px 0; position:relative;}
.form .option label{ position:absolute; left:0; height:40px; line-height:40px; width:100%;}
.form .option label.hover{ background:#900; margin:2px; height:14px; line-height:14px; bottom:-4px; font-size:12px;border:2px solid #900;border-width:0px 1px; left:-1px; color:#fff;}
.form .option input{border:2px solid #ededed; height:40px; margin:0; padding:0;width:100%; text-indent:1em; }
.form label{ width:80px; display:inline-block; text-align:center; color:#bbb;}
.submit{ background:#ededed; cursor:pointer; border:2px solid #ededed;}

评论 ( 0 )

网友留言