박스모델 공식, 그리드 정렬공식 (정리와 설명은 나중에)

박스모델의 생성

박스모델의 생성과 아이콘 위치 조절

박스모델의 동적 생성

박스모델의 동적 생성과 아이콘의 위치 조절

jQuery를 사용한 mouseover,mouseout,mousemove,mousedown,mouseup

jQuery-ui를 사용한 drag

jQuery-ui를 사용한 drag와 옵션

jQuery-ui를 사용한 drag와 옵션 - Grid

jQuery-ui를 사용한 drag와 옵션 - Grid 의 아이콘 수평 가로 정렬, 수직 세로 정렬 맞추기

jQuery - ContextMenu Library를 사용한 ContextMenu의 생성

jQuery - ContextMenu Library를 사용한 ContextMenu의 동적생성

jQuery - ContextMenu Library를 사용한 ContextMenu의 동적생성과 옵션

설명과 정리 포스팅 중...

박스모델 그리기

var code = "";
		code += "<div id='container_box"+_pCount+"' style='position:absolute;color:white;'>";
		code +=		"<table border=0 cellpadding=0 cellspacing=0>";
		code +=			"<tr>";
		code +=				"<td align='center' id='upTD"+_pCount+"'> <img id='imgID"+idName+"'  src='"+ _url + CUR.arrIcon[_pCount] +"' style='border:none;'/> </td>";
		code +=			"</tr>";
		code +=			"<tr>";
		code +=				"<td id='downTD"+idName+"' style='text-align:center;padding:7px 0 0 0;color:#"+CUR.arrLabelColor[_pCount]+"'>";
		code +=					"<span style='white-space:nowrap;font-size:"+CUR.arrSize[_pCount]+"%'>"+ CUR.arrSysName[_pCount] +"</span>";
		code +=				"</td>";
		code +=			"</tr>";
		code +=		"</table>";
		code +=		"<div style='position:absolute;left:0px;top:0px;'>";
		code +=			"<img id='venID"+_pCount+"' style='position:absolute;border:none;' src='"+ _venURL + CUR.arrVendor[_pCount] +".png' />";
		code +=			"<img id='statID"+idName+"' style='position:absolute;border:none;' src='"+ _statURL + colorArr[ CUR.arrStatus[_pCount] ] +".gif' />";
		code +=		"</div>";
		code += "</div>";
		$('#containerID').append( code );
		
		var c_box = $("#container_box"+_pCount);
		c_box.attr('n', _pCount);
		c_box.attr('inputName', idName);
		var upTD = $('#upTD'+_pCount); //이미지,텍스트가 길어도 upTD 사이즈를 기준으로 하면 됨.
		var img = $('#imgID'+idName);
		var vendor = $('#venID'+_pCount);
		var stat = $('#statID'+idName);
		
		//ICON : target * size / 100,  VENDOR : (target * size / 100) * vendorSize(내부정의) / 100
		var IMG_W =  Math.floor(  CUR.arrIconWidth[_pCount]  * CUR.arrSize[_pCount] / 100 );
		var IMG_H =  Math.floor(  CUR.arrIconHeight[_pCount] * CUR.arrSize[_pCount] / 100 );
		var VEN_W =  Math.floor( (CUR.arrIconWidth[_pCount]  * CUR.arrSize[_pCount] / 100) * _venSize / 100 );
		var VEN_H =  Math.floor( (CUR.arrIconHeight[_pCount] * CUR.arrSize[_pCount] / 100) * _venSize / 100 );
		var STAT_W = Math.floor( _statSize * CUR.arrSize[_pCount] / 100 );
		var STAT_H = Math.floor( _statSize * CUR.arrSize[_pCount] / 100 );
		
		//아이콘이 직사각형 형태일경우 벤더는 MIN 정사각형
		if( VEN_W > VEN_H ) VEN_W = VEN_H;
		else VEN_H = VEN_W;

		//size연산 먼저 css적용
		img.css({'width':IMG_W, 'height':IMG_H});
		vendor.css({'width':VEN_W, 'height':VEN_H});
		stat.css({'width':STAT_W, 'height':STAT_H});
		
		//var
		var img_w = img.width();
		var img_h = img.height();

		//센터좌표 = 좌표 - 테이블width/2 + 이미지/2
		var DIV_X = Math.floor(CUR.arrX[_pCount] - upTD.width()/2 + img.width()/2);
		var DIV_Y = Math.floor(CUR.arrY[_pCount] - img.height()/5);
		c_box.css({'left':DIV_X, 'top':DIV_Y});

		//console.log(Math.floor(img.offset().left), Math.floor(img.offset().top));

		vendor.css({ 'left': - Math.floor(VEN_W/2), 'top':img_h - Math.floor(VEN_H/1.5)});
		if (!CUR.arrVendor[_pCount] || CUR.arrVendor[_pCount]=='') vendor.css('display','none'); //벤더가 없으면 보이지않게

		stat.css({'left':Math.floor(upTD.width()/2 + img_w/2 - STAT_W/2 ), 'top':-Math.floor(STAT_H/2) });
		if ( CUR.arrStatus[_pCount]=='' || CUR.arrStatus[_pCount]==0 || CUR.arrStatus[_pCount]==1 ) stat.css({'display':'none', 'width':0, 'height':0}); //이미지가 '',0,1 이면 보이지않게

박스모델에 참고해야 할 문서 위치 : F:\01.Develop\HTML\01.API\동적으로 박스모델 생성(NeoMS, map.js)

각박스모델을 jQuery-ui의 grid 옵션을 사용할텐데, 각 노드들이 가로 센터 정렬, 세로 수직정렬 되기 위해서는 

박스와 grid의 상관관계(차이)가 각각 다르므로 gap을 구해서 gird되는 부분에 array로 넣어 주려 했으나 잘 안되서

,grid:[_grid_ax, _grid_ay] 라는 옵션에 참조값을 var n = parseInt( $(this).attr('n'), 10 ); 형태로 사용할 수 없어서

그냥 margin으로 밀어넣었다.

grid와 계산 참조 : F:\01.Develop\jQuery (제이쿼리)\02.API - jQuery UI\Draggable - 드래그

//3.마우스 다운 : 마우스 무브등록
		c_box.mousedown(function(){
			$(this).css('cursor','move');
			
			$(this).mousemove(function(){
				$(this).css('cursor','move');
			});
			
			//각 노드마다 한번만 실행됨
			var n = parseInt( $(this).attr('n'), 10 );
			
			if(_grid_arrBool[n] == true) return;

			if( _grid_ax > 1){
				var dis_X = Math.floor(CUR.arrX[n] / _grid_ax); //격자이동의 몫
				var dis_restX = Math.floor(CUR.arrX[n] % _grid_ax);//격자이동의 나머지값

				if( dis_restX <= Math.floor(_grid_ax/2) )
				{
					//나머지가 격자 절반의 이하
					var gap_x = dis_X * _grid_ax; //몫*그리드간격
					$(this).css('left', gap_x);

				}else{
					//나머지가 격자 절반의 초과
					var gap_x = (dis_X + 1 )* _grid_ax; //몫*그리드간격
					$(this).css('left', gap_x);
				}
				
				//박스의 너비가 그리드보다 작으면 남은공간의 절반을 마진left에 더해준다.
				if( _grid_ax > c_box.width() )
				{ 
					gap_x = Math.floor( ( _grid_ax - c_box.width() ) /2 );
					$(this).css({'margin-left': gap_x+'px'});
				}
			}
			
			if( _grid_ay > 1){
				var dis_Y= Math.floor(CUR.arrY[n] / _grid_ay); //격자이동의 몫
				var dis_restY = Math.floor(CUR.arrY[n] % _grid_ay);//격자이동의 나머지값

				if( dis_restY <= Math.floor(_grid_ay/2) )
				{
					//나머지가 격자 절반의 이하
					var gap_y = dis_Y * _grid_ay; //몫*그리드간격
					$(this).css('top', gap_y);
				}else{
					//나머지가 격자 절반의 초과
					var gap_y = (dis_Y + 1 )* _grid_ay; //몫*그리드간격
					$(this).css('top', gap_y);
				}
				
				//박스의 높이가 그리드보다 작으면 남은공간의 절반을 마진top에 더해준다.
				if( _grid_ay > c_box.height() )
				{ 
					gap_y = Math.floor( ( _grid_ay- c_box.height() ) /2 );
					$(this).css({'margin-top': gap_y+'px'});
				}
				
			}

			_grid_arrBool[n] = true;
			
		});
		//4.마우스 업 : 마우스 포인터 + 무브 삭제
		c_box.mouseup(function(){
			$(this).css('cursor','default');
			$(this).unbind('mousemove');
		});

		/******************************************************************************************************
		* //어빌리티 : 드래그
		******************************************************************************************************/
		c_box.draggable({ 
			cursor:'move'
			,scroll: true
			//,drag:function(){ updateStatus( $(this) ); }
			,stop : function (event, ui){
				var x = $(this).offset().left;
				var y = $(this).offset().top;
				//console.log(inputName +' : '+ x+','+y);

				//폼데이터
				var inputName = $(this).attr('inputName');
				var frm = $("form[name='frmEdit']");
				frm.find("input[name='"+ inputName +"']").val( x+','+y);
				//console.log( frm.find("input[name='"+ inputName +"']").val() );
			}
			,grid:[_grid_ax, _grid_ay]
			//,containment:[0,0,0,0]
			//,revert:'invalid'
		});//end if dragAble
	}

컨텍스트 메뉴의 생성

참조 폴더 : F:\01.Develop\jQuery (제이쿼리)\06.FrameWork\jQuery-contextMenu-master (컨텍스트메뉴)\step