不用alert弹出窗口的方法来显示验证信息

  • 作者:39℃
  • 来源:56gee
  • 更新时间:2012-05-09 13:19:03
  • 点击:1106
[50分]

最近由于工作的需要在开发公司内部的OA系统,无意中发现以前的系统或多或少存在一些不太友善的操作,其中一个对每个操作的返回信息——以类似JS中alert的方法弹出系统内置的对话框提示。相信很多朋友现在还会用这种传统的方法。但个人觉得此方法在当今WEB 2.0的潮流中不但给用户在视觉上产生审美疲劳,同时也会增加用户的操作(至少要按一下键盘或者点一下鼠标才能取消话框)。于是本人简单设计了一个更友善的技巧来替换此传统的方法。下面用一个简单的文本输入验证为例——

打开演示地址

该实例中“页面路径”输入框是必填的,所以当输入为空并按“验证”按钮时,提示信息会在页面上方动态显示,并稍后自动消失。这样,用户既能看到反馈信息,又省去了点击对话框的功夫。下面列出关键的源码部分——

var T_result; 
function F_resultShow(rText,rStyle,P_TObj){ 
 var resultID = ’resultShow’; 
 if($(’#’+resultID).html()){ 
  $(’#’+resultID).remove(); 
  clearTimeout(T_result); 
 } 
 else{ 
  var resultShow = $(’
’); with(resultShow){ attr(’id’,resultID); html(rText); addClass(rStyle); prependTo(P_TObj); } T_result = setTimeout("F_resultShow(’"+rText+"’,’"+rStyle+"’,’"+P_TObj+"’)",1500); } }

其中,“P_TObj”是提示信息在哪显示,实例中是在body中显示,所以用’body’。如果想要在某个对象中显示,可以赋值为$(’#对象ID’)。而为了增加一些视觉上的UI效果,实例中还添加了鼠标聚焦到输入框的动态背景显示,对应源码——

//------------- 输入框的鼠标事件 ---------------- 
with($(’input[type=text]’)){ 
focus(function(){ 
  $(this).removeClass(’input_1’); 
  $(this).addClass(’input_2’); 
}); 
blur(function(){ 
  $(this).removeClass(’input_2’); 
  $(this).addClass(’input_1’); 
}); 
} 
//--------------------------------------------- 

最后,把整个实例的源码展示出来——

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>不用alert弹出窗口显示验证信息———56gee</title>  
<meta name="Author" content="39℃" />  
<link href="/styles/publicdefine.css" rel="stylesheet" type="text/css" />  
<style type="text/css">  
h1 {  
 font-size: 12px;  
 line-height: 24px;  
 color: #FFF;  
 background-color: #396384;  
 text-align: center;  
 margin: 0px;  
 padding: 0px;  
}  

.Column {  
 color: #314f6a;  
 background-color: #d1dfeb;  
 text-align: right;  
 padding-right: 6px;  
 line-height: 24px;  
 font-size: 12px;  
}  
.Column.width1 {  
 width: 90px;  
}  

.bt {  
 background-image: url(../demoImgs/bt_bg.gif);  
 height: 22px;  
 color: #314f6a;  
 font-size: 12px;  
 border: 1px solid #668CA2;  
 background-repeat: repeat-x;  
 cursor: pointer;  
 background-color: #FFFFFF;  
 line-height: 18px;  
 margin-top: 2px;  
 margin-bottom: 2px;  
 letter-spacing: 0.1em;  
 padding-top: 0px;  
 padding-right: 3px;  
 padding-bottom: 0px;  
 padding-left: 3px;  
}  

.input {  
 height: 18px;  
 margin-top: 0px;  
 margin-right: 3px;  
 margin-bottom: 0px;  
 margin-left: 3px;  
 background-repeat: repeat-x;  
 background-position: bottom;  
 padding-top: 0px;  
 padding-right: 2px;  
 padding-bottom: 0px;  
 padding-left: 2px;  
 line-height: 18px;  
}  
.textInfor {  
 padding-left: 4px;  
 color: #666;  
}  


.input.input_1{  
 color: #666;  
 border: 1px solid #87A6B6;  
 background-image: url(../demoImgs/input_bg.jpg);  
}  

.input.input_2{  
 color: #033;  
 border: 1px solid #008080;  
 background-image: url(../demoImgs/input_bg2.jpg);  
}  

.RightResult {  
 background-color: #D7FFFF;  
 line-height: 27px;  
 text-align: center;  
 color: #039;  
 font-weight: bold;  
}  

.ErrorResult {  
 background-color: #FFE6E6;  
 line-height: 27px;  
 text-align: center;  
 color: #C00;  
 font-weight: bold;  
 clear: both;  
}  
.sign {  
 color: #F00;  
}  
</style>  
</head>  
<script type="text/javascript" src="/js/jquery-1.5.min.js"></script>  
<script type="text/javascript" src="js/Edit_Define.js"></script>  

<script type="text/javascript">  
$(document).ready(function(e) {  
 $(’#DoSaveBT’).click(function(){  
   with($(’#PermissionURL’)){  
  if(val()==’’){  
    F_resultShow(’页面路径不能为空!’,’ErrorResult’,’body’);  
    focus();  
    return false;  
  }  
  else{  
    F_resultShow(’输入正确!’,’RightResult’,’body’);  
  }  
   }  
 });  
});  
</script>  
<body>  
  <table width="600" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#5d7b96" bordercolordark="#FFFFFF">  
    <tr>  
      <td colspan="2"><h1>模块权限设置</h1></td>  
    </tr>  
    <tr bordercolor="#5d7b96" bordercolordark="#FFFFFF" class="EditTable1">  
      <td class="Column">页面路径</td>  
      <td><input name="PermissionURL" type="text" class="input input_1" id="PermissionURL" size="60" />  
        <span class="sign">*</span></td>  
    </tr>  
    <tr bordercolor="#5d7b96" bordercolordark="#FFFFFF" class="EditTable1">  
      <td class="Column">页面说明</td>  
      <td><input name="URLExplain" type="text" class="input input_1" id="URLExplain" size="60" /></td>  
    </tr>  
    <tr bordercolor="#5d7b96" bordercolordark="#FFFFFF" class="EditTable1">  
      <td colspan="2"><div align="center">  
        <input name="DoSaveBT" type="button" class="bt" id="DoSaveBT" value="验证" />  
      </div></td>  
    </tr>  
  </table>  
</body>  
</html> 
收藏内容
评分

特别说明:本站所有资源仅供学习与参考,请勿用于商业用途。若转载请注明来自56gee.com中的“来源”。

栏目精华