WEB组合框的实现方式-会员卡,广州印刷,深圳印刷,印刷公司,名片,彩页,名片设计,设计教程,名片制作,彩色名片,名片模板,贵宾卡,pvc卡,设计欣赏,深圳名片,广州名片,business card design

首页	名片设计 CorelDRAW Illustrator AuotoCAD Painter 其他软件 Photoshop Fireworks Flash

» 彩色名片
» PVC卡
» 彩色磁性卡
» 彩页/画册
» 个性印务
» 彩色不干胶
» 明信片
   » 明信片
   » 彩色书签
   » 门挂
» 其他产品与服务
   » 创业锦囊
   » 办公用品
   » 信封、信纸
   » 便签纸、斜面纸砖
   » 无碳复印纸
   » 海报
   » 大篇幅印刷
   » KT板
   » 海报
   » 横幅

WEB组合框的实现方式
　由于html控件中没有组合框，所以web　组合框需要用特别方式构造，当然构造方式有很多了：

　　一、利用文本框与列表框叠加而成，这个需要用css的clip，用的较多，但是需要绝对定位，而且定位需要精确。

　　二、一个文本框 +　一个新的页面，这种方式用的也不少，也就是载入页面时只装载文本框，只有需要的时候才通过代开一个新页面的方法打开列表。

　　三、利用文本框与一个列表容器并排摆放，但是列表容器需定义为绝对定位，但是不给其 left 和 top 的定义。这个容器即可以是<div><span><table>等容器，也可以是列表控件。

　　下面就利用第三种方式实现组合框，这个组合框利用的容器是<div><table></table> </div>,而且支持动态过滤，也就是当你在文本框中输入用于过滤的文本后，就可以根据输入的文本，自动过滤列表，也缩小选取范围。

　　核心代码如下：
<script language="javascript">
///////////////// 动态列表 start　 ////////////////////////////////
　 //用于由一个文本框和一个div组成的用于根据别名动态选择列表
　 var ifMouseOver=0;
　　var PatA=/[^x00-xff]+/;　　 //一个正则表达式，当文本框中的文字符合这个正则时，就不进行过滤
　 function dl_mouseOver(p1)
　 {
　　　ifMouseOver=1;
　 }
　
　 function dl_mouseOut(p1)
　 {
　　　ifMouseOver=0;
　 }
　
　
　 function dl_showDiv(p1)
　 {
　　　var DivObj=document.getElementById(p1);
　　　if(DivObj)
　　　{
　　　　 if(DivObj.style.display==\\\'none\\\')
　　　　　　 DivObj.style.display=\\\'\\\';
　　　　　　　　else
　　　　　　　　　　DivObj.style.display=\\\'none\\\';
　　　}　　
　 }
　
　
　 function dl_hideDiv(p1)
　 {
　　　var DivObj=document.getElementById(p1);
　　　if(DivObj)
　　　{
　　　　 if(DivObj.style.display==\\\'\\\' && ifMouseOver==0)
　　　　　　 DivObj.style.display=\\\'none\\\';　　 }　　
　 }
　
　
　 function dl_InsertData(p1,p2,p3)
　 {
　　　var DivObj=document.getElementById(p2);
　　　var textObj=document.getElementById(p3);
　　　if(textObj) textObj.value=p1.innerText;
　　　if(DivObj) {DivObj.style.display=\\\'none\\\';}
　 }
var s_value="";
　 function dl_sFilter(p1,p3,p5,p7)
　 {
　　　//var kCode=event.keyCode;
　 //var ccds=document.selection.createRange();
　　　//ccds.pasteText=\\\'\\\';
　　　var tmpP1=p1.value;
　　　if(PatA.test(tmpP1)) return false;
　　　//document.selection .clear ();
　　　　　if (tmpP1!=s_value)
　　　　　 {
　　　　　 s_value=tmpP1;
　　　　　　if(document.getElementById(p3))
　　　　　　　　document.getElementById(p3).style.display=\\\'\\\';
　　　　　　for(var n=0;n<p5.length;n++)
　　　　　　{
　　　　　　　 if(p5[n].indexOf(tmpP1)>=0)
　　　　　　　 {
　　　　　　　　　 if(document.getElementById(p7 + n))
　　　　　　　　　　　　document.getElementById(p7 + n).style.display=\\\'\\\';　　　　
　　　　　　　 }
　　　　　　　 else
　　　　　　　 {
　　　　　　　　　 if(document.getElementById(p7 + n))
　　　　　　　　　　　　document.getElementById(p7 + n).style.display=\\\'none\\\';　
　　　　　　　
　　　　　　　 }
　　　　　　}
　　　　　}
　 }
　 ///////////////////　动态列表　end　////////////////////////////////////
　 </script>
　
　
　　<% sub create_Dy_select(p_arrayname,byref p_rs,p_alias_field,p_main_field,p_inputname,p_divid,p_tr_id)　
　　　　　\\\'p_arrayname　生成的js数组名字
　　　　　\\\'p_rs　　　　　数据库记录集　
　　　　　\\\'p_alias_field 别名字段名，用于过滤，假如与p_main_field一样，就是我们常见的组合框过滤方式
　　　　　\\\'p_main_field　主字段名
　　　　　\\\'p_inputname　文本框名字
　　　　　\\\'p_divid　　　 div容器的ID
　　　　　\\\'p_tr_id　　　表格行id前缀
　　　 r_count=p_rs.RecordCount
　　　 if r_count>0 then
　　　　%>
　　　　　　　　　　　　　　　　
　　　　<script language="javascript">
　　　　　　 var <%=p_arrayname%>=new Array(<%=r_count%>)
　　　　　　 var mm=0;
　　　　</script>
　　　 <%end if%>
　　　<div id="<%=p_divid%>" onmouseover="dl_mouseOver(this);" onmouseout="dl_mouseOut();" style="border:1 solid #FF0000;cursor:default;width:150;height:200;overflow-y:auto;background-color:#e0e0e0;position:absolute;display:\\\'none\\\'">
　　　　 <table width=100%>
　　　　
　　　　 <%
　　　　　　if r_count>0 then
　　　　　　　 dim i
　　　　　　　 i=0
　　　　 do while not p_rs.EOF
　　　　　　o_alias=p_rs(p_alias_field)
　　　　 %>
　　　　　　 <script language="javascript">
　　　　　　　　<%=p_arrayname%>[mm]=\\\'<%=o_alias%>\\\';
　　　　　　　　mm++;
　　　　　　 </script>
　　　　　　　　　 <tr id="<%=p_tr_id%><%=i%>" onmouseover="this.style.backgroundColor=\\\'<%=selectedOptionBgColor%>\\\';this.style.color=\\\'<%=selectedOptionColor%>\\\';" onmouseout="this.style.backgroundColor=\\\'\\\';this.style.color=\\\'\\\';"><td width=100% onclick="dl_InsertData(this,\\\'<%=p_divid%>\\\',\\\'<%=p_inputname%>\\\');">
　　　　　　　　 <%=p_rs(p_main_field)%>
　　　　　　 </td></tr>
　　　　<%　　 i=i+1
　　　　　　　　p_rs.MoveNext
　　　　 loop
　　　　　　end if
　　　 %>
　　　　 </table>
　　　　 </div>
　　　　　　　　　　　　
　　　　 <%end sub%>　　

　　调用方式：

<%　　　　　　 s_arrayname　　　 ="js_array_1"
　　　　　　　　　　s_alias_field　　 ="cz_alias"
　　　　　　　　　　s_main_field　　　="cz_name"
　　　　　　　　　　s_inputname　　　 ="cz"
　　　　　　　　　　s_divid　　　　　 ="selectList_1"
　　　　　　　　　　s_tr_id　　　　　 ="tr_id_1"
　　　　　　　　　%>　　
　　　　　　　　　　　<input　name="<%=s_inputname%>"　type="text" onclick="dl_showDiv(\\\'<%=s_divid%>\\\');" onblur="dl_hideDiv(\\\'<%=s_divid%>\\\')"　onkeyup="dl_sFilter(this,\\\'< %=s_divid%>\\\',<%=s_arrayname%>,\\\'<%=s_tr_id%>\\\');"><br>
　　　<%
　　　　　 Call create_Dy_select(s_arrayname,rs,s_alias_field,s_main_field,s_inputname,s_divid,s_tr_id)
　　　　 %>

返回类别: 教程
上一教程: 用ASP生成条形码
下一教程: 无组件图文混合上传，MSSQL & ACCESS

您可以阅读与"WEB组合框的实现方式"相关的教程:
· 表单填写时用回车代替TAB的实现方法
· 嵌入式WEB视频点播系统实现方式
· ASP中COOKIE读写的实现方式
· WEB环境下办公自动化文档修改痕迹保留的实现
· 用WEB(ASP)方法实现SQL SERVER 数据库的备份和恢复


	快精灵印艺坊版权所有	首页会员中心在线印刷在线编辑付款方式索取样品设计指南连锁门店网站地图关于我们友情链接