打印

[.net] asp.net验证控件的气泡提示效果

本主题由 SinNeR 于 2008-2-13 18:54 设置高亮
[用途:]
        本程序能改善asp.net的验证控件的显示效果,用比较人性化的气泡提示来替换掉原来枯燥的界面提示,并带有"关闭提示"的功能,有效的解决了一个输入框带多个验证控件时,显示错误提示信息不在同一个地方的缺陷,也有效解决了验证控件占用页面提示信息版面的缺陷。

[程序原理:]
在微软asp.net框架中,使用的验证控件提示是通过封装在JS库中的ValidatorUpdateDisplay函数来实现的.
一般通过浏览器查看到aspx的源文件中,有类似<script src=/WebResource.axd?...的代码,ValidatorUpdateDisplay就包含在里面.
本程序通过覆盖掉他原来的方法达到效果,在WinValidatorFiles文件夹下面,每一个效果下面有js/validator.js文件,里面重写了ValidatorUpdateDisplay方法,结合css和javascript构造出了各种气泡效果.
大家也可以通过这个思路继续开发出更多美观的效果.

[核心代码:]

WinVal类:该类封装调用各种特效的属性和方法
ClientDeal类:该类用于处理客户端javascript和css
config.xml:配置文件,保存各种效果的名称,文件夹路径,css路径,js路径信息.扩展时,只需要配置该xml文件,并增加相应效果的资源文件到WinValidatorFiles文件夹即可.

[效果截图:]








[使用方法:]
将WinValidatorFiles文件夹copy到站点根目录,然后在 </form>之后插入如下代码:
<script type="text/javascript" src="/WinValidatorFiles/js/validator.js">
</script>

[注意:]
        1. 本程序在asp.net2.0,IE6、Firefox2下通过,但不保证能适应所有浏览器。
        2. 在使用验证控件时,请将验证控件的Display属性设为Static(默认为Static)。
        3. 路径都是从根路径开始,所以本地测试时请设置为网站,而不是虚拟目录。
        4. 本程序的原理是覆盖掉.net框架中自带的ValidatorUpdateDisplay函数,所以引入的代码一定要在他本身生成的<script src="/WebResource.axd代码段之后。

[版权相关:]
        欢迎大家使用和转载本程序,但是为了尊重作者的劳动成果,请转载时不要将作者的联系信息去掉;也欢迎大家根据这个思路创造出更好的验证提示效果,同时也请将修改后的程序发一份给作者本人,欢迎交流,共同进步。此气泡特效参考了蓝色理想中的代码,在此对其表示感谢。

[演示和下载:]
http://www.shouji138.com/aspnet2/

[ 本帖最后由 SinNeR 于 2008-2-15 15:48 编辑 ]
附件: 您所在的用户组无法下载或查看附件,您需要注册/登录后才能查看!
本帖最近评分记录
  • SinNeR 威望 +1 谢谢分享 对.net不了解,不知道技术含 ... 2008-2-15 13:16
漫漫长夜
顶上去啊
---------------------请不要进行无意义回复

[ 本帖最后由 幻想曲 于 2008-2-2 17:12 编辑 ]
http://www.qlili.com 个人站帮点啊
不错,收了,这个有点像Ajax Toolkit中的那个提示控件!
下了放自己网站上测试了,真漂亮,谢谢楼主,好东西
ღ 鳌鱼 ღ

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!
呵呵,好东西自然会拿出来共享的。
如果做出了更漂亮的提示效果,别忘记了也发我一份啊。
漫漫长夜

TOP

用过后有个提议,如果能完善非Static就好了。不然有时候不好安排页面。

TOP

谢谢sunofdream 的建议,在新版本中改进。
漫漫长夜

TOP

希望下次发帖能把经验或者想法共享一下,技术版不是发布产品的地方,谢谢合作。
承接定制建站、在线系统,代售域名、邮局、主机,价格从优。
有意者站内PM。
新一代四无新人……

TOP

AJAX怎么实现?。。。
设计自我,完美自我!

TOP

十分有用,下载来研究一下

TOP

学习一下,谢谢分享,顶

TOP

感谢大家的支持,特别是sunofdream等人提出的意见非常好,在此表示感谢.
本人对其进行了如下调整:
1. 使用cs代码调用控件,不使用原来在aspx文件中插入script代码的方式;
2. 效果提示增加到3种,分别为rightpoptip(右侧气泡)、toppoptip(头部气泡)、buttompoptip(底部气泡);
3. 增加提示自动关闭和淡出关闭效果;
4. 增加关闭等待时间控制;
5. 自动支持虚拟目录和站点;
6. 可扩展性,增加config.xml文件配置,可以自由扩展,但是注意:修改config.xml之后需要重启IIS,因为使用了缓存机制。

演示和下载还是
http://www.shouji138.com/aspnet2/
漫漫长夜

TOP

想法很不错,感谢楼主分享,效果类似于和.net的ajax控件差不多,但是比我感觉比那个好多了
要钱没有,要命不给,你咋地吧

TOP

还行.不过感觉这样太麻烦了.


还不如直接用js写起来方便多了!
找。。。。。。。工。。。。。。。作。。

TOP

不采取用直接写js的方法有如下几点考虑:
1。 可以实现封装。
     设置控件的外观,等待关闭时长,是否自动关闭等属性都是通过设置WinVal的属性完成。

2。 减少出错的可能性。
     我们知道,asp.net发布时需要经过编译,这样就避免了一些低级性错误的发生(如写错了字母等),而直接写js的话,如果不小心写错了字母,排错起来就没那么简单。

3。 更好的实现扩展。
     目前提供的只有3种样式,但是可以通过配置config.xml文件和增加新样式的资源文件来达到扩展的目的,而对程序代码本身不需要做任何修改。

综上优点,所以在后续的版本中采取了不直接在aspx文件中写script语句而在后台代码中设置的方法。
漫漫长夜

TOP