jQuery EasyUI解决输入框在屏幕右侧造成ValidateBox提示信息超出屏幕不可见.

来源:互联网 发布:java读写xml文件 编辑:程序博客网 时间:2024/05/22 01:58

EasyUI的 ValidateBox的提示信息是在右侧的,而且不支持自动适应和配置,当输入框在屏幕右侧这就比较麻烦

 

先看一下我解决后的效果:

 

主要修改内容:修改了js文件还有css样式文件,并且复制修改了一张图片.就是那个三角的图片


使用方法:
设置验证的表单控件,添加tipBottom属性即可,例如:<input tipBottom="true"/>

 

在来看看我都改了那些代码
//************************************************************************************
jquery.easyui.min.js  5023行改为以下代码:

 if(box.attr("tipBottom")){  tip.css({display:"block",left:box.offset().left,top:box.offset().top + box.outerHeight() + 10});  tip.find(".validatebox-tip-pointer").addClass("validatebox-tip-pointer-bottom"); } else {  tip.css({display:"block",left:box.offset().left+box.outerWidth(),top:box.offset().top}); }


//************************************************************************************
themes/default/easyui.css  1615行插入以下代码:

.validatebox-tip-pointer-bottom{ background:url('images/validatebox_pointer_bottom.gif') no-repeat left top; width:19px; height:10px; left:15px; top:-9px;}


//************************************************************************************
新加文件:themes/default/images/validatebox_pointer_bottom.gif

文件在此:

 

该图由themes/default/images/validatebox_pointer.gif图片顺时针旋转90度得来


==================================================

以上就是我的解决方案,欢迎大家把自己的解决方案也共享出来