panel 소스 코드 분석

우리 가 easyui 의 panel 을 사용 할 때 div 와 관련 된 속성 만 지정 하면 조작 단 추 를 가 진 panel 을 생 성 할 수 있 습 니 다.
원본 div 의 코드 는:

<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
				title="My Panel" iconCls="icon-save"
				collapsible="true" minimizable="true"
				maximizable=true closable="true">
			<p>  </p>
			<p>  </p>
			<p>  </p>
			<p>  </p>
		</div>

 
그리고 easyui 변환 을 거 친 코드 는:

 <div class="panel" style="display: block; width: 500px;">
			<!-- -->
			<div class="panel-header" style="width: 488px;">
				<!--        -->
				<div class="panel-title panel-with-icon">My Panel</div>
				<!--  -->
				<div class="panel-icon icon-save"></div>
				<!--     -->
				<div class="panel-tool">
					<div class="panel-tool-close"></div>
					<div class="panel-tool-max"></div>
					<!--    
					<div class="panel-tool-max panel-tool-restore"></div>
					-->
					<div class="panel-tool-min"></div>
					<div class="panel-tool-collapse"></div>
					<!--    
					<div class="panel-tool-collapse panel-tool-expand"></div>
					-->
				</div>
			</div>
			<!--  -->
			<div closable="true" maximizable="true" minimizable="true" collapsible="true" iconcls="icon-save" title="" style="width: 478px; height: 152px; padding: 10px;" class="easyui-panel panel-body" id="p">
					<p>  </p>
					<p>  </p>
					<p>  </p>
					<p>  </p>
			</div>
	</div>

 대 비 를 통 해 알 수 있 듯 이 easyui 를 통 해 전 환 된div 는 원본 div 코드 와 마찬가지 로 panel-body 와 같은 클래스 만 추가 하고 div 너비 와 높이 를 바 꿉 니 다.
소스 코드 에 따라 easyui 의 panel 생 성 절 차 를 다음 과 같이 분석 할 수 있 습 니 다.
1.들 어 오 는 매개 변수 에 따라 해당 하 는 방법 을 실행 할 지 초기 화 할 지 결정 합 니 다.
2.초기 화 할 때 원본 div 를 포 장 했 습 니 다.포장 함 수 는 wrapPanel(this)입 니 다.

	//  panel
	function wrapPanel(target){
		var panel = $(target).addClass('panel-body').wrap('<div class="panel"></div>').parent();
		panel.bind('_resize', function(){
			var opts = $.data(target, 'panel').options;
			//  fit=true     
			if (opts.fit == true){
				setSize(target);
			}
			//       
			return false;
		});
		
		return panel;
	}

 
이 함 수 는 주로 원본 div 에 panel-body 류 를 추가 하고 외부 에를 포장 합 니 다.
html 코드 생 성

<div class="panel">
			<!--  -->
			<div closable="true" maximizable="true" minimizable="true" collapsible="true" iconcls="icon-save" title="" style="width: 478px; height: 152px; padding: 10px;" class="easyui-panel panel-body" id="p">
					<p>  </p>
					<p>  </p>
					<p>  </p>
					<p>  </p>
			</div>
	</div>

 
3.panel 헤드 와 제목 을 추가 하고 호출 된 함수 addHeader(this)를 추가 합 니 다.
구체 적 인 코드 는 다음 과 같다.

//      
	function addHeader(target){
		var opts = $.data(target, 'panel').options;
		var panel = $.data(target, 'panel').panel;
		//       
		removeNode(panel.find('>div.panel-header'));
		//          
		if (opts.title && !opts.noheader){
			// <div class="panel-header"><div class="panel-title">  </div></div>   panel 
			var header = $('<div class="panel-header"><div class="panel-title">'+opts.title+'</div></div>').prependTo(panel);
			
			/*   iconCls  ， ：
			<div class="panel-header">
				<div class="panel-title panel-with-icon">  </div>
				<div class="panel-icon icon-save"></div>
			</div>
			*/
			if (opts.iconCls){
				// <div class="panel-title">  panel-with-icon 
				header.find('.panel-title').addClass('panel-with-icon');
				// <div class="panel-header">   <div class="panel-icon"></div>
				$('<div class="panel-icon"></div>').addClass(opts.iconCls).appendTo(header);
			}

			// <div class="panel-header">   <div class="panel-tool"></div>
			var tool = $('<div class="panel-tool"></div>').appendTo(header);
			/*   closable  ， ：
			<div class="panel-tool">
					<div class="panel-tool-close"></div>
			</div>
			*/
			if (opts.closable){
				// <div class="panel-tool"></div>   <div class="panel-tool-close"></div>，   click  
				$('<div class="panel-tool-close"></div>').appendTo(tool).bind('click', onClose);
			}
			//   
			if (opts.maximizable){
				$('<div class="panel-tool-max"></div>').appendTo(tool).bind('click', onMax);
			}
			//   
			if (opts.minimizable){
				$('<div class="panel-tool-min"></div>').appendTo(tool).bind('click', onMin);
			}
			//  
			if (opts.collapsible){
				$('<div class="panel-tool-collapse"></div>').appendTo(tool).bind('click', onToggle);
			}
			//     tools  
			if (opts.tools){
				for(var i=opts.tools.length-1; i>=0; i--){
					var t = $('<div></div>').addClass(opts.tools[i].iconCls).appendTo(tool);
					if (opts.tools[i].handler){
						t.bind('click', eval(opts.tools[i].handler));
					}
				}
			}

			/*     hover    ，  
					<div class="panel-tool-close"></div>
					<div class="panel-tool-max"></div>
					<div class="panel-tool-min"></div>,    
			*/
			tool.find('div').hover(
				function(){$(this).addClass('panel-tool-over');},
				function(){$(this).removeClass('panel-tool-over');}
			);
			//  body   panel-body-noheader   
			panel.find('>div.panel-body').removeClass('panel-body-noheader');
		} else {
			//    div.panel-body panel-body-noheader  
			panel.find('>div.panel-body').addClass('panel-body-noheader');
		}
		
		//  
		function onToggle(){
			if ($(this).hasClass('panel-tool-expand')){
				expandPanel(target, true);
			} else {
				collapsePanel(target, true);
			}
			return false;
		}
		
		//   
		function onMin(){
			minimizePanel(target);
			return false;
		}
		
		//   
		function onMax(){
			if ($(this).hasClass('panel-tool-restore')){
				restorePanel(target);
			} else {
				maximizePanel(target);
			}
			return false;
		}
		//  
		function onClose(){
			closePanel(target);
			return false;
		}
	}

 그 본질은 버튼 div 를 생 성하 고 해당 하 는 조작 함 수 를 연결 하 는 것 입 니 다.구체 적 인 저 는 함수 에 주석 을 추 가 했 습 니 다.
4.상태 에 따라 패 널 을 열 고 닫 으 면 패 널 렌 더 링 이 완 료 됩 니 다.
 
원본 코드 에서 동쪽 발견:
1.panel 에 있 는 모든 이 벤트 는 bind 와 trigger 를 통 해 촉발 되 는 것 이 아니 라 함수 호출 을 통 해 촉발 되 는 것 입 니 다.촉발 하 는 방식 은?
opts.onMaximize.call(target);opts.onResize.apply(target,[opts.width,opts.height]);
2.panel-body 의 스타일 은 기 교 를 볼 수 있 습 니 다.먼저 모든 border 의 스타일 을 설정 하고 상단 의 너 비 를 0px 로 설정 합 니 다.
.panel-body{  overflow:auto;  border:1px solid #99BBE8;  border-top-width:0px; }