当前位置:首页 > 验证控件的气泡提示效果

验证控件的气泡提示效果

点击次数:1350  更新日期:2010-12-30
\n

用途


\n

本程序能改善asp.net的验证控件的显示效果,用比较人性化的气泡提示来替换掉原来枯燥的界面提示,并带有”关闭提示”的功能,有效的解决了一个输入框带多个验证控件时,显示错误提示信息不在同一个地方的缺陷,也有效解决了验证控件占用页面提示信息版面的缺陷。


\n

程序原理


\n

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


\n

核心代码


\n

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


\n

效果截图


\n


\n


\n

使用方法


\n

将WinValidatorFiles文件夹copy到站点根目录,然后在 </form>之后插入如下代码:


\n

<script type=”text/javascript” src=”/WinValidatorFiles/js/validator.js”></script>


\n

注意


\n

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

\n

版权相关


\n

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


\n

演示


\n

http://www.shouji138.com/aspnet2/


\n

下载


\n

WinValidatorFiles文件夹下载WinValidatorFilesSource.rar
demo项目下载WinValidatorSource.rar
dll下载Winsteps.Validator.dll.rar

出处:蓝色理想

\n