jQuery封装的屏幕居中提示信息代码
本文实例讲述了jQuery封装的屏幕居中提示信息代码。分享给大家供大家参考，具体如下：
functionshowLoad(tipInfo,type,autohide){
varpic="";
switch(type){
case0://loading
pic="./Images/loading.gif";
break;
case1://ok
pic="./Images/right.png";
break;
case2://error
pic="./Images/error.png";
break;
default://其他任何值时
pic="./Images/loading.gif";
break;
}
vareTip=document.createElement('div');
eTip.setAttribute('id','tipDiv');
eTip.style.display='none';
eTip.style.width='300px';
eTip.style.height='20px';
eTip.style.padding='5px15px'
eTip.innerHTML="<imgsrc=\""+pic+"\"style=\"float:left;\"/><spanstyle=\"color:#373737;font-size:14px\">"+tipInfo+"</span>";
try{
document.body.appendChild(eTip);
}catch(e){}
$("#tipDiv").css({
position:"absolute",
border:"solid0px#D1D1D1",
left:($(window).width()-$("#tipDiv").outerWidth())/2,
top:($(window).height()-$("#tipDiv").outerHeight())/2+$(document).scrollTop()
});
$('#tipDiv').show();
if(autohide==true){
$('#tipDiv').fadeOut(3000);
}
}
functioncloseLoad(){
$('#tipDiv').fadeOut();
}
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jquery提示框封装</title>
<scriptsrc="JS/jquery-1.8.0.min.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(function(){
$("#name").blur(function(){
if($(this).val()==""){
tip(this,"×请输入");
}else{
tip(this,"√输入正确");
}
})
});
functiontip(o,tip){
vareTip=document.createElement("span");
varobjid=$(o).attr("id")+"_tipDiv";
varvalue=$(o).val();
//绝对路径
varx=$(o).offset().top;
vary=$(o).offset().left;
varw=$(o).width();
varh=$(o).height();
eTip.setAttribute("id",objid);
try{
document.body.appendChild(eTip);
}catch(e){}
$("#"+objid).hide();
$("#"+objid).css({
top:x,
left:y+w+10,
height:h,
position:"absolute",
padding:"5px"
});
$("#"+objid).html(tip);
$("#"+objid).show();
}
</script>
</head>
<body>
<br/><br/><br/><br/><br/>
<inputtype="text"id="name"/><br/><br/><br/><br/>
<inputtype="text"id="pwd"/>
</body>
</html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。