[js]Easyui组件扩展--fieldset

效果图：

 

各文件路径（我的extra文件夹与easyui文件夹在同一等级）：

extra\fieldset\lq.fieldset.js	主要js文件
extra\fieldset\lq.fieldset.css	主要样式文件
extra\fieldset\lq.fieldset.html	测试页面
extra\fieldset\images\panel_tools.png	按钮图标（拷贝于easyui，可根据主题不同进行修改）

 

lq.fieldset.js

/*
	Easyui1.4.2
	Create time:2015-11-02  Author:duolaaqian
	
	$("#fs").lqfieldset({
		title:'个人信息',				//标题显示文字
		collapsible:true,				//是否可伸缩
		collapsed:false,				//初始化状态 是否为收起状态
		checkboxToggle:false,			//伸缩按钮是否为checkbox
		onBeforeCollapse:function(){	//收起之前调用该方法，返回false则取消收起
		},
		onCollapse:function(){			//收起之后调用该方法
		},
		onBeforeExpand:function(){		//展开之前调用该方法，返回false则取消展开
		},
		onExpand:function(){			//展开之后调用该方法
		}
	});
	
	$("#fs").lqfieldset('collapse');	//收起组件
	$("#fs").lqfieldset('expand');		//展开组件
*/
;(function ($) {
	//添加自定义方法
	function initFieldSet(thisObj){
		initDom(thisObj);
		refreshFront(thisObj);
	};
	function initDom(thisObj){
		var thisData = $.data(thisObj, "lqfieldset");
		var thisOptions = thisData.options;
		var innerDom = $(thisObj).wrap("
");
		innerDom.wrap('
');
		innerDom = innerDom.parent('div.lq-fieldset-wrapmain');
		if(thisOptions.title||thisOptions.collapsible){
			var fieldSetDom = innerDom.parent('fieldset');
			thisOptions.fieldSetDom = fieldSetDom;
			var checkboxToggle = thisOptions.checkboxToggle;
			if(checkboxToggle){
				innerDom = innerDom.before("
"
						+''
						+''+thisOptions.title+"
");
				var dd = fieldSetDom.find('input[type=checkbox]');
				dd.unbind('.lqfieldset').bind('change.lqfieldset',function(){
					var checked = $(this).prop("checked");
					if(checked){
						doExpand(thisObj);
					}else{
						doCollapse(thisObj);
					}
				});
			}else{
				innerDom = innerDom.before("
"
						+''
						+''+thisOptions.title+"
");
				var dd = fieldSetDom.find('a.lq-fieldset-legend-icon');
				dd.unbind('.lqfieldset').bind('click.lqfieldset',function(){
					var collapsed = thisOptions.collapsed;
					if(collapsed){
						doExpand(thisObj);
					}else{
						doCollapse(thisObj);
					}
				}).bind('mouseover',function(){
					dd.removeClass("mouseout").addClass("mouseover");
				}).bind('mouseout',function(){
					dd.removeClass("mouseover").addClass("mouseout");
				});
			}
			if(!thisOptions.collapsible){
				fieldSetDom.find('.lq-fieldset-legend a').remove();
				fieldSetDom.find('.lq-fieldset-legend input[type=checkbox]').remove();
			}
		}
		diLimitSize(thisObj,innerDom);
	};
	function refreshFront(thisObj){
		var thisData = $.data(thisObj, "lqfieldset");
		var thisOptions = thisData.options;
		var collapsed = thisOptions.collapsed;
		if(collapsed){
			doCollapse(thisObj);
		}else{
			doExpand(thisObj);
		}
	};
	//收缩
	function doCollapse(thisObj){
		var thisData = $.data(thisObj, "lqfieldset");
		var thisOptions = thisData.options;
		if(thisOptions.onBeforeCollapse.call(thisObj) == false){
			return;
		}
		var fieldSetDom = thisOptions.fieldSetDom;
		thisOptions.collapsed = true;
		fieldSetDom.removeClass('expand').addClass('collapse');
		fieldSetDom.find('input[type=checkbox]').prop('checked',false);
		thisOptions.onCollapse.call(thisObj);
	};
	//展开
	function doExpand(thisObj){
		var thisData = $.data(thisObj, "lqfieldset");
		var thisOptions = thisData.options;
		if(thisOptions.onBeforeExpand.call(thisObj) == false){
			return;
		}
		var fieldSetDom = thisOptions.fieldSetDom;
		thisOptions.collapsed = false;
		fieldSetDom.removeClass('collapse').addClass('expand');
		fieldSetDom.find('input[type=checkbox]').prop('checked',true);
		thisOptions.onExpand.call(thisObj);
	};
	function diLimitSize(thisObj,innerDom){
		var thisData = $.data(thisObj, "lqfieldset");
		var thisOptions = thisData.options;
		var innerHeight = innerDom.height();
		var maxHeight = thisOptions.maxHeight;
		var minHeight = thisOptions.minHeight;
		if( maxHeight && $.isNumeric(maxHeight) ){
			if(innerHeight>maxHeight){
				innerDom.height(maxHeight);
			}
		}
		if( minHeight && $.isNumeric(minHeight) ){
			if(innerHeightmaxWidth){
				innerDom.width(maxWidth);
			}
		}
		if(minWidth&&$.isNumeric(minWidth)){
			if(innerWidth

 

extra\fieldset\lq.fieldset.css

.lq-fieldset{border:1px solid;padding:10px;/*margin-bottom:10px;*/display:block;}
.lq-fieldset.collapse{padding-bottom:0 !important;border-width:1px 1px 0 1px !important;border-left-color:transparent;border-right-color:transparent;}
.lq-fieldset.expand{}

.lq-fieldset .lq-fieldset-wrapmain{overflow:auto;}
.lq-fieldset.expand .lq-fieldset-wrapmain{display:block;}
.lq-fieldset.collapse .lq-fieldset-wrapmain{display:none;}

.lq-fieldset-legend{}
.lq-fieldset-legend a{width:16px;height:16px;opacity:0.6;display:inline-block;margin:0 2px 0 2px;vertical-align:top}
.lq-fieldset-legend a.mouseout{opacity:0.6;}
.lq-fieldset-legend a.mouseover{opacity:1;}

.lq-fieldset-legend>span{font:bold 12px verdana,helvetica,arial,sans-serif;}

/*yuan jiao*/
.lq-fieldset{border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;}

/*icon*/
.collapse .lq-fieldset-legend-icon{background: url('images/panel_tools.png') no-repeat -32px -16px;}
.expand .lq-fieldset-legend-icon{background: url('images/panel_tools.png') no-repeat -32px 0;}

/***color***/
.lq-fieldset{border-color: #95B8E7;}/*边框颜色*/
.lq-fieldset-legend>span{color:#15428b;}/*标题颜色*/

 

lq.fieldset.html

	

		

			

				

					
姓名：
					

				
				

					
性别：
					

				
				

					
出生日期：