先将本文主要介绍通过Javascript和CSS如何实现一个可编辑的下拉菜单自定义控件。。
近来开发一个管理系统,为了提高用户体验和友好的UI界面,开发了一些自定义控件,本文主要介绍用TextBox模拟可编辑的下拉菜单。此控件具有现实参数名称取值的时候可以直接取到参数对应的编码,如:男——001,女——002;页面显示“男”或“女”,取值时可以取到“男”和“女”对应的编码001和002;大家看到这里可能会有个疑问为什么不直接用DropDownList呢,或者用CheckBoxList和RadioButtonList呢?同样可以解决所提出的问题!那么编辑功能呢?或许你可能还会想到用一个文本框覆盖DropDownList,这次问题貌似就全部搞定了!呵呵。。那我再提出一个问题,要是参数列表中有成千上万的参数呢,用以上的解决方案的话,运行起来的效果大家可向而知,效果是多么的糟糕,!还有人认为那就用文本框覆盖DropDownList在结合Ajax不就把全部问题都解决嘛,但是个人(可能是个人能力有限)认为用文本框覆盖DropDownList不太好布局!!!最后,决定用 JavaScript、Ajax和CSS来模拟一个可编辑下来菜单,为了方便项目组使用和管理,最后集成了一个自定义控件。。
看到这里是不是大家很想知道本控件是怎么实现的和它的强大之处,那么先将控件运行效果与大家分享一下:
图一 初始化
控件的实现思路
1. 此控件包括两个文本框和一个小图片,一个文本框用来显示参数名称和输入值,另一个文本框隐藏,用来保存参数对应的编码;用CSS将小图片结合到一起,使其外表像一个下拉菜单(运行效果如图一)。
2. 用根据输入值用Ajax与服务器进行异步交互,获取数据;Server用户可以根据输入值进行筛选数据,在这个过程中解决了参数过多的问题;Client获得到得数据用Javascript进行数据解析再由CSS进行布局的控制(运行效果如图二)。
3. 选择参数过程中,通过Javascript可以将参数名称和对应的编码进行对文本框进行赋值(运行效果如图三)。
4. 此控件可以进行参数正确性的验证(运行效果如图四)。
这样一来,很容易就可以再服务器端获取参数名称和对应的参数编码。
提示:此控件有个小地方想进行改进,就是不想要那个隐藏文本框来保存参数编码;刚开始对此控件扩展了一个属性,用来保存编码,可是在第三个步骤用JavaScript进行赋值和修改扩展属性时,获取不到对属性修改的值和赋的值。还希望大家能帮忙思考一下。。
今天,先写到这里我会逐渐的将具体实现代码贴出来,与大家分享。。
如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛