`
流浪鱼
  • 浏览: 1684537 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

eayui的validatebox分析

 
阅读更多



在分析eayui的validatebox的源代码中发现,该验证框架不支持删除验证的方法,在api中可以看见有个destroy方法,这个方法不是用来删除验证的,而是把元素和验证都一块删除,所以不符合逻辑。

为此我写了一个删除验证的方法:

/*
*@param elemId 元素的id
*删除easyui已有的验证
*/
function delRules(elemId){
	var v = $("#"+elemId)[0] ;
	if($.data(v,'validatebox')){
		$.data(v,'validatebox').options={};
		$.data(v,'validatebox').tip=null;
		$("#"+elemId).removeClass('validatebox-invalid');
	}
}

调用改函数的方法

function delyanzheng(){
	/*destroy把元素和验证都一块删除,所以不符合逻辑
	$("#addValidate").validatebox('destroy');
	*/
	delRules('addValidate');
}

 

 

验证框架的小箭头样式比较有意思以后可以用下。

css代码为:

.validatebox-tip{
	position:absolute;
	width:200px;
	height:auto;
	display:none;
	z-index:9900000;
}
.validatebox-tip-content{
	display:inline-block;
	position:absolute;
	top:0px;
	left:10px;
	padding:3px 5px;
	border:1px solid #CC9933;
	background:#FFFFCC;
	z-index:9900001;
	font-size:12px;
}
.validatebox-tip-pointer{
	background:url('images/validatebox_pointer.gif') no-repeat left top;
	display:inline-block;
	width:10px;
	height:19px;
	position:absolute;
	left:1px;
	top:0px;
	z-index:9900002;
}

 

效果图为:

 

 

上面的方法只能算是流氓编码,现在给出基于easyui的真正扩展方法的写法

$.extend($.fn.validatebox.methods, {
	remove:function(jq,param){
		var f = param?param:false;
		if(f){
			//动态combo
			var v = $.data(jq[0], 'combo').combo.find('input.combo-text')[0];
		}else{
			var v = jq[0] ;
		}
		
		if($.data(v,'validatebox')){
			var tip = $.data(v, 'validatebox').tip;
			if (tip){
				tip.remove();
			}
			$(v).removeClass('validatebox-invalid');
			$(v).removeClass('validatebox-text');
			$(v).unbind('.validatebox');
			$(v).removeData('validatebox');
		}
	}
});

使用方法如下:

如果删除的是普通的即非combo的使用此方法:

 

$("#addValidate2").validatebox('remove');

 

 

如果删除的是combo的极其子对象的使用此方法

$("#addValidate2").validatebox('remove',true);

至于参数true的含义,看我扩展的方法立马就知道了

 

上面的方式忘记了删除项切换和下拉列表的监听,下面的验证是最终版

 

$.extend($.fn.validatebox.methods, {
remove : function(jq, param) {
//console.error("ddd",$.data(jq[0], 'combo').combo);
var f = param ? param : false;
if (f) {
//动态combo
var v = $.data(jq[0], 'combo').combo.find('input.combo-text')[0];
var opts = $.data(jq[0], 'combo').options;
delete (opts.validType);
//主体面板
var panel = $.data(jq[0], 'combo').panel.find('div.combobox-item');
//console.error("items",panel.length);
//找到下拉箭头
var arrow = $.data(jq[0], 'combo').combo.find('.combo-arrow');
//删除所有的监听
arrow.unbind('.validatebox');
} else {
var v = jq[0];
}

if ($.data(v, 'validatebox')) {
//console.error("ddd11111",$.data(v,'validatebox').options);
var tip = $.data(v, 'validatebox').tip;
if (tip) {
tip.remove();
}
$(v).removeClass('validatebox-invalid');
$(v).removeClass('validatebox-text');
$(v).unbind('.validatebox');
$(v).die('focus');
$(v).removeData('validatebox');
}
}
});

$.extend($.fn.validatebox.methods, {
	remove : function(jq, param) {
		//console.error("ddd",$.data(jq[0], 'combo').combo);
		var f = param ? param : false;
			if (f) {
				//动态combo
			var v = $.data(jq[0], 'combo').combo.find('input.combo-text')[0];
			var opts = $.data(jq[0], 'combo').options;
			delete (opts.validType);
			//主体面板
			var panel = $.data(jq[0], 'combo').panel.find('div.combobox-item');
			//console.error("items",panel.length);
			//找到下拉箭头
			var arrow = $.data(jq[0], 'combo').combo.find('.combo-arrow');
			//删除所有的监听
			arrow.unbind('.validatebox');
		} else {
			var v = jq[0];
		}
	
		if ($.data(v, 'validatebox')) {
			//console.error("ddd11111",$.data(v,'validatebox').options);
			var tip = $.data(v, 'validatebox').tip;
			if (tip) {
				tip.remove();
			}
			$(v).removeClass('validatebox-invalid');
			$(v).removeClass('validatebox-text');
			$(v).unbind('.validatebox');
			$(v).die('focus');
			$(v).removeData('validatebox');
		}
	}
});
 

 

  • 大小: 570 Bytes
2
0
分享到:
评论
3 楼 sui159753 2013-09-17  
是否可以删除验证的问题,我也找了好久,我们公司用的1.3的。所以只能自己解决这个问题。
我看官网上1.3.4的版本已经更新是否需要验证方法了。楼主的扩展不错,拿过来直接可以用。。
2 楼 流浪鱼 2012-07-04  
哈哈!这个还不是最终版
1 楼 lqs6910 2012-07-03  
,敏兄。今天找这个问题,偶遇你博客啊。你真给力啊,问题一下解决了。

相关推荐

    eayui+mvc3 编商店

    通过学习和分析这个项目,你可以了解以下关键知识点: 1. **EayUI基础**:EayUI的核心是CSS和JavaScript,它提供了许多预定义的样式和组件,如导航菜单、表格、表单、对话框等。初学者应学习如何在HTML中引用EayUI...

    HTML+EAYUI皮肤组件

    在"HTML+EAYUI皮肤组件"的后台模板中,EasyUI的皮肤组件扮演着关键角色。它们提供了多种视觉风格,使用户可以根据个人喜好或企业品牌形象自由选择。皮肤通常包括颜色方案、字体样式和布局模式等,可以快速改变整个...

    servlet+eayui实例

    在IT行业中,Servlet、EasyUI、JSON、JDBC和Properties文件是构建Web应用程序的重要组成部分。以下是对这些技术的详细说明: ...它是一个Java类,可以接收并响应来自Web客户端(如浏览器)的请求,然后返回动态生成的...

    eayui前台导出excel

    eayui前台将datagrid导出成Excel工具类,亲测有效,分享。

    eayui1.5.5API

    Eayui1.5.5 API 提供了对 EasyUI 框架1.5.5版本的详细接口和方法的文档,对于维护这些项目至关重要。 EasyUI 的核心特点包括: 1. **组件丰富**:EasyUI 包含了大量的组件,如对话框(dialog)、表格(datagrid)...

    简单eayui前台框架、jquery1.7_20111204、和帮助文档

    标题中的“简单eayui前台框架”指的是EasyUI,它是一个基于jQuery的用户界面插件集合,用于构建具有专业外观的Web应用。EasyUI提供了一系列的组件,如表格、下拉菜单、对话框、按钮、分页等,使得开发者能够快速创建...

    定时发布天气微博

    压缩包中为ssh+eayui做的定时发布天气信息微博,实现页面对定时器的配置,实现后台根据定时器配置定时获取天气信息,生成天气信息图片并发布至新浪微博

    spring mvc 注解 easyui 分页

    在IT行业中,Spring MVC是一个广泛使用的Java Web框架,它提供了模型-视图-控制器(MVC)架构,便于开发人员构建高效、可维护的Web应用。EasyUI则是一个基于jQuery的UI库,提供了丰富的组件,如表格、下拉菜单、...

    EasyUI_Icon拓展

    EasyUI 是一个基于 jQuery 的前端框架,主要用于构建现代 Web 应用程序的用户界面。它提供了丰富的组件,如布局、表格、菜单、对话框、树形控件等,以及一套美观的图标集,大大简化了网页开发的工作。...

    uimaker分享-免费漂亮easyui主题eayui皮肤easyui组件美化模版黑色+蓝色html后台管理模版

    EasyUI 是一个基于 jQuery 的轻量级前端框架,它提供了丰富的组件和易于使用的主题系统,使得开发者能够快速构建用户界面。本套分享的资源是一组免费且漂亮的 EasyUI 主题,包括黑色和蓝色两种风格,适用于后台管理...

    easyui1.4.4

    EasyUI 1.4.4 是一个基于 jQuery 的前端框架,专为简化Web应用程序的用户界面开发而设计。这个版本的发布主要针对之前版本的一些已知问题进行了修复和改进,提高了整体的稳定性和用户体验。 1. **jQuery EasyUI**:...

    easyUI项目

    这可能包含了一些特定的数据展示、分析或者操作,比如地图集成、图表展示、数据录入等。具体的功能需要查看源代码或文档才能进一步了解。 总的来说,这个项目结合了easyUI的高效UI组件和Bootstrap的响应式设计,...

    MVC+EF+EasyUI简单示例

    **MVC 模式** MVC(Model-View-Controller)模式是一种常用的设计模式,用于构建Web应用程序。在MVC架构中,模型(Model)负责处理业务逻辑...通过分析和实践这个示例,初学者可以提升对MVC、ORM和前端UI设计的理解。

    EasyUI+v1.3.4官方API中文版

    `validatebox`验证插件使得表单验证变得简单,API会说明如何配置验证规则。 4. **菜单(Menu)**: 菜单系统可帮助构建多级导航,通过`menus`属性和嵌套的JSON对象来定义菜单结构。 5. **树形结构(Tree)**: Tree...

    颜色选择器工具

    颜色选择器工具 下载

    easyui 模态窗口插件

    EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列易于使用的组件,帮助开发者快速构建用户界面。在 EasyUI 中,模态窗口(Modal Window)是一种常用的功能,用于展示弹出式对话框,通常用于输入数据、确认操作...

    s2s3h3、easyui界面、权限过滤、可使用json的简单登陆系统1

    【标题】"s2s3h3、easyui界面、权限过滤、可使用json的简单登陆系统1"所涉及的知识点主要包括以下几个方面: 1. **s2s3h3框架**: s2s3h3可能是一个自定义或者特定项目使用的框架,它可能结合了S2(可能是Struts2...

    ASP.NET Core MVC/WebApi基础系列1

    >前言 最近发表的EF Core貌似有点多,可别误以为我只专攻EF Core哦,私下有时间也是一直在看ASP.NET Core的内容,所以后续会穿插讲EF Core和ASP.NET Core,别认为你会用ASP.NET Core就自认为你很了解ASP.NET Core,...

    spring+springMVC+mybatis+easyui 增删查改以及分页源码

    标题 "spring+springMVC+mybatis+easyui 增删查改以及分页源码" 描述了一个使用SSM(Spring、SpringMVC、MyBatis)框架与EasyUI前端库联合实现的Web应用项目,特别是关注于CRUD(创建、读取、更新、删除)操作和无...

    easyui-前端处理树

    easyui实现的树,转自他人的,感觉不错!可以拿来借鉴和学习,

Global site tag (gtag.js) - Google Analytics