关于选择页面的设计模式

新建网页 1

    b/s难免会用到选择页面：比如选客户，选员工，选产品等等，对于这些，我们通常的方法是打开一个新窗口，上面会有上述内容的列表，然后我们勾选一下返回就可以了，通过一段时间的使用，渐渐发现了某些弊端：

弹出窗口对于有些机器来说会很慢 频繁选择使客户失去耐心 我对我要选的内容很熟悉，为什么还要给我一大堆的列表 而且这些列表显示的时候很慢

    可能在我们开发者来说，并不是特别麻烦的，但是对于测试人员和客户来说，是个天大的灾难，他们不得不仅仅为了选一个他熟悉的记录花费大量的时间。

    由此，我在新的项目开始的时候注意到了这个问题，通过试验，得出了一个比较好的办法，那就是－－－－模拟outlook填写email地址的方式。

    由于是b/s系统，如果需要实现这个问题我们就要用到xmlhttp来无刷新读取记录。废话不多说，完整的思路是这样：

有一个text的输入框，允许客户填写选择的内容，比如：他要选客户，那就填写他的客户的助记码 按回车后，xmlhttp把这个助记码传回服务器端，执行查询，并将结果以xml的形式返回到前端（浏览器）。 前端浏览器通过js解析，如果有唯一记录，那么就将正确的客户名称加下划线（表示通过验证，客户存在）赋值给文本框， 如果是多个记录，文本框隐藏，显示一个下拉的列表让操作人选择一个，并加选中内容加下划线赋给文本框，文本框显示，下拉列表隐藏。 如果没有记录，那么显示一个消息框。

  通过这样处理，就很好的提高了操作效率，提高了软件的人性化的程度。
　

  下面是demo的代码：

   function run(obj){ if (document.all.code.value==''||document.all.code.value==' '){alert("您需要运行的代码为空!");obj.focus()} else{var winEx = window.open("", "winEx", "width=800,height=600,resizable=yes,top=0,left=0"); winEx.document.write(document.all.code.value);winEx.document.close()}} 请输入公司名称 function Search(){ document.all.layer1.style.textDecoration= "none" if(event.keyCode==13){ switch(document.all.layer1.value){ case "M" : document.all.S1.style.display="" break case "KFC" : document.all.layer1.style.textDecoration="underline" document.all.layer1.value = "肯德鸡" break; default : if(document.all.layer1.value!=""){ alert("没找到该公司") document.all.layer1.value ="" } } } } function setValue(obj){ strText = obj.options[obj.selectedIndex].text document.all.layer1.value =strText document.all.layer1.style.textDecoration="underline" obj.style.display="none" } 请输入公司名称 上海麦当老 南京麦当老 北京麦当老 ... ... body,td,a { font-size: 9pt; color: #330000; text-decoration: none} .aa {filter:alpha(opacity=100)} 层样式的选择窗口

0

本文地址：http://com.8s8s.com/it/it31098.htm