现在的位置: 首页 > 综合 > 正文

onfocus时显示一个小的信息提示层

2012年07月25日 ⁄ 综合 ⁄ 共 2225字 ⁄ 字号 评论关闭

用到了jquery

formdiv.js文件:

//小信息提示层
function bulidLittle(id,msg,ele)
{
  
  
  var divHtml = ""
  + "<div id='littleDiv_" + id + "'"
  + "style='"
  + "background:#F7F7E7;position:absolute;padding-top:3px;width:350px; z-index:1;height:20;"
  + "'  class=/"n_null/" "
  + "  onmouseover='hiddenLittle(/"" + id + "/")' "
  + ">"
  + msg
  + " </div>";
  var parentEle = ele.parent();
  parentEle.prepend(divHtml);
}
function addDivIframe(){
 var divIframeHtml = "<iframe id=/"DivShim1/" src=/"javascript:false;/" scrolling=/"no/""
  + "frameborder=/"0/""
  + " style=/"position:absolute; top:0px; left:0px; display:none;/">"
  + " </iframe>";
  //document.body.insertAdjacentHTML("beforeEnd",divIframeHtml);
  
  $("body").prepend(divIframeHtml);
}
 function displayLittle(id,msg, ele,event1){  
  var IfrRef = document.getElementById('DivShim1'); 
  if( IfrRef == null){
   addDivIframe();
  }  
  var ele1 = jQuery(ele);
  var DivRef = document.getElementById("littleDiv_"+id);
  var offset = ele1.offset(); 
  if(DivRef == null){ 
   bulidLittle(id,msg,ele1);
   DivRef = document.getElementById("littleDiv_"+id); 
  }else{
   DivRef.style.visibility="visible";
  }
  DivRef.style.left = offset.left;
  DivRef.style.top=parseInt(offset.top) - DivRef.clientHeight;
  
  IfrRef = document.getElementById('DivShim1');    
  //DivRef.style.display = "block";
  IfrRef.style.display = DivRef.style.display;
  IfrRef.style.width = DivRef.offsetWidth;
  IfrRef.style.height = DivRef.offsetHeight;
  IfrRef.style.top = DivRef.style.top;
  IfrRef.style.left = DivRef.style.left;
  IfrRef.style.zIndex = DivRef.style.zIndex - 1;
  
 }
 function hiddenLittle1(event){
  hiddenLittle(event.data.id)
 }
 function hiddenLittle(id){
  var t = document.getElementById("littleDiv_"+id);
  if(t != null){ 
   t.style.visibility="hidden";
  }
  document.getElementById('DivShim1').style.display ="none";
 }

jsp文件:

引用
 <script src="<%=request.getContextPath()%>/js/JQuery/jquery-1.2.6.js"
  type="text/javascript"></script> 
<script language="javascript" src=js/formFunc.js"></script>

 

 <html:text property="customertelno"     styleClass="input_text" style="width:150px"
        onfocus="showIlluDiv(this.name,this, event);"  onmousedown="showIlluDiv(this.name,this, event);" onblur="hiddenLittle(this.name);"/>
       必填&nbsp;<span id="customertelno_illu" style="display:none"><bean:message key="phoneno.maskmsg" arg0=""/></span>

抱歉!评论已关闭.