飞舞的幻想

常用链接

统计

Google Adsense

Zanox FWHX

花个明白

最新评论

通过Iframe实现带横向滚动条的多选下拉框并且带提示框

主要思路：
通过Iframe添加滚动条，在调用页面使用Iframe实现滚动条，在iframe页面里面实现多选select。通过主页面将动态option传递给iframe的select实现下拉框。通过popup窗口的方式实现提示框。
说明：调用页面代码里面还加了一个隐藏多选下拉框的目的是为了将值方便的传递以及保持相对较少的代码改动（主要是修改实现）。
调用页面代码：

  1. <select name=TMPFIELD size=9  style='width:160px;display:none;' multiple>  
  2. <%  
  3.    for(int opt5 =0;opt5<cols.size();opt5++){  
  4.      RepColsVo colVo =(RepColsVo) cols.get(opt5);  
  5. %>  
  6. <option title="<%=colVo.getRepColdis()%>" value="<%=colVo.getReportColid()%>"><%=colVo.getRepColdis()%></option>  
  7. <%}%>  
  8. </select>  
  9. <iframe name="iframeShowFields" src="<%=request.getContextPath()%>/jsp/include/iframeSelectReports.jsp"  id="iframeshow" allowTransparency="true"    style="z-index:0;height:150px;width:140px;" scrolling="auto">  
  10. </iframe>  

Iframe页面内容：
  1. <html>  
  2. <head>  
  3. <script language="javascript">  
  4.   var oP=window.createPopup();  
  5.   var globalobject;  
  6.   var oPopBody;  
  7.   function   showTip(_obj){  
  8.   globalobject=_obj;  
  9.   oPopBody= oP.document.body;  
  10.   line=parseInt(event.offsetY/15);  
  11.   if(globalobject.options.length>0){  
  12.   if(line>globalobject.options.length-1)  
  13.   {    
  14.       line=globalobject.options.length-1;   
  15.   }   
  16.   oPopBody.style.background="#fdfce9";   
  17.   oPopBody.style.border="solid black 1px";  
  18.   oPopBody.innerHTML="";  
  19.   var sText =globalobject.options[line].text;      
  20.   oPopBody.innerHTML='<div style="font-family:Arial;font-size:12px;">'+sText+'</div>';   
  21.   len=globalobject.options[line].text.length*10;  
  22.   oP.show(event.clientX+10,event.clientY+10,len, 20,document.body);  
  23.   }   
  24.  }  
  25.  function   hideTip(_obj){    
  26.   if(oP.isOpen){   
  27.     oP.hide();    
  28.    }  
  29.  }  
  30. function   addOption(){   
  31.     var   s=parent.document.frmdefine.TMPFIELD;  
  32.     var len=s.length;  
  33.     for(var i=0;i<len;i++)  
  34.     {  
  35.         var opt=document.createElement("OPTION");        
  36.         opt.text=s.options[i].text;    
  37.         opt.value=s.options[i].value;  
  38.         TMPFIELD.add(opt);  
  39.     }  
  40.        
  41.    
  42.  }  
  43.  </script>  
  44. </head>  
  45. <body bgcolor="#efefef" onload="addOption()">  
  46. <select  id="idtmpfield" onclick="showTip(this);" onmouseout="hideTip(this);" name="TMPFIELD" size=9   style="background-color:#efefef;width:auto;height:auto;border-width:0px;border-style:none;position:absolute;z-index:0;line-height:14px;border:none;clip:rect(0 95% 97% 0);margin-left:-13;margin-right:-50;margin-top:-19;margin-bottom:-40" multiple >  
  47. </select>  
  48. </body>  
  49. </html> 
效果图如下：



posted on 2008-06-30 09:39 飞舞的幻想 阅读(1829) 评论(0)  编辑  收藏 所属分类: 生活感想


只有注册用户登录后才能发表评论。
网站导航: