1. jQuery뿐 아니라 여러 javascript 의 플러그인 사용을 위해 template handler에 <!--%load_js_plugin("이름")--> 기능 추가 ( ./common/js/plugins/이름/plugin.load 파일에 기재된 js/css, 또는 lang을 import 함)

2. 1번에 의해 ui.datepicker, ui.tree를 플러그인으로 빼서 적용
3. jquery의 버전별 이름이 생길 문제를 대비하여 jquery.js로 파일 이름 변경
4. js/css파일들은 크기보다 그 개수가 적어야 함으로 jquery-1.2.6.fix.js를 common.js 파일로 통합


git-svn-id: http://xe-core.googlecode.com/svn/sandbox@5083 201d5d3c-b55e-5fd7-737f-ddc643e51545

common/css/calendar-system.css

@@ -1,251 +0,0 @@
-/* The main calendar widget.  DIV containing a table. */
-
-.calendar {
-  position: relative;
-  display: none;
-  border: 1px solid;
-  border-color: #fff #000 #000 #fff;
-  font-size: 11px;
-  cursor: default;
-  background: Window;
-  color: WindowText;
-  font-family: tahoma,verdana,sans-serif;
-}
-
-.calendar table {
-  border: 1px solid;
-  border-color: #fff #000 #000 #fff;
-  font-size: 11px;
-  cursor: default;
-  background: Window;
-  color: WindowText;
-  font-family: tahoma,verdana,sans-serif;
-}
-
-/* Header part -- contains navigation buttons and day names. */
-
-.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
-  text-align: center;
-  padding: 1px;
-  border: 1px solid;
-  border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
-  background: ButtonFace;
-}
-
-.calendar .nav {
-  background: ButtonFace url(menuarrow.gif) no-repeat 100% 100%;
-}
-
-.calendar thead .title { /* This holds the current "month, year" */
-  font-weight: bold;
-  padding: 1px;
-  border: 1px solid #000;
-  background: ActiveCaption;
-  color: CaptionText;
-  text-align: center;
-}
-
-.calendar thead .headrow { /* Row <TR> containing navigation buttons */
-}
-
-.calendar thead .daynames { /* Row <TR> containing the day names */
-}
-
-.calendar thead .name { /* Cells <TD> containing the day names */
-  border-bottom: 1px solid ButtonShadow;
-  padding: 2px;
-  text-align: center;
-  background: ButtonFace;
-  color: ButtonText;
-}
-
-.calendar thead .weekend { /* How a weekend day name shows in header */
-  color: #f00;
-}
-
-.calendar thead .hilite { /* How do the buttons in header appear when hover */
-  border: 2px solid;
-  padding: 0px;
-  border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
-}
-
-.calendar thead .active { /* Active (pressed) buttons in header */
-  border-width: 1px;
-  padding: 2px 0px 0px 2px;
-  border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
-}
-
-/* The body part -- contains all the days in month. */
-
-.calendar tbody .day { /* Cells <TD> containing month days dates */
-  width: 2em;
-  text-align: right;
-  padding: 2px 4px 2px 2px;
-}
-.calendar tbody .day.othermonth {
-  font-size: 80%;
-  color: #aaa;
-}
-.calendar tbody .day.othermonth.oweekend {
-  color: #faa;
-}
-
-.calendar table .wn {
-  padding: 2px 3px 2px 2px;
-  border-right: 1px solid ButtonShadow;
-  background: ButtonFace;
-  color: ButtonText;
-}
-
-.calendar tbody .rowhilite td {
-  background: Highlight;
-  color: HighlightText;
-}
-
-.calendar tbody td.hilite { /* Hovered cells <TD> */
-  padding: 1px 3px 1px 1px;
-  border-top: 1px solid #fff;
-  border-right: 1px solid #000;
-  border-bottom: 1px solid #000;
-  border-left: 1px solid #fff;
-}
-
-.calendar tbody td.active { /* Active (pressed) cells <TD> */
-  padding: 2px 2px 0px 2px;
-  border: 1px solid;
-  border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
-}
-
-.calendar tbody td.selected { /* Cell showing selected date */
-  font-weight: bold;
-  border: 1px solid;
-  border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
-  padding: 2px 2px 0px 2px;
-  background: ButtonFace;
-  color: ButtonText;
-}
-
-.calendar tbody td.weekend { /* Cells showing weekend days */
-  color: #f00;
-}
-
-.calendar tbody td.today { /* Cell showing today date */
-  font-weight: bold;
-  color: #00f;
-}
-
-.calendar tbody td.disabled { color: GrayText; }
-
-.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
-  visibility: hidden;
-}
-
-.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
-  display: none;
-}
-
-/* The footer part -- status bar and "Close" button */
-
-.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
-}
-
-.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
-  background: ButtonFace;
-  padding: 1px;
-  border: 1px solid;
-  border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
-  color: ButtonText;
-  text-align: center;
-}
-
-.calendar tfoot .hilite { /* Hover style for buttons in footer */
-  border-top: 1px solid #fff;
-  border-right: 1px solid #000;
-  border-bottom: 1px solid #000;
-  border-left: 1px solid #fff;
-  padding: 1px;
-  background: #e4e0d8;
-}
-
-.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
-  padding: 2px 0px 0px 2px;
-  border-top: 1px solid #000;
-  border-right: 1px solid #fff;
-  border-bottom: 1px solid #fff;
-  border-left: 1px solid #000;
-}
-
-/* Combo boxes (menus that display months/years for direct selection) */
-
-.calendar .combo {
-  position: absolute;
-  display: none;
-  width: 4em;
-  top: 0px;
-  left: 0px;
-  cursor: default;
-  border: 1px solid;
-  border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
-  background: Menu;
-  color: MenuText;
-  font-size: 90%;
-  padding: 1px;
-  z-index: 100;
-}
-
-.calendar .combo .label,
-.calendar .combo .label-IEfix {
-  text-align: center;
-  padding: 1px;
-}
-
-.calendar .combo .label-IEfix {
-  width: 4em;
-}
-
-.calendar .combo .active {
-  padding: 0px;
-  border: 1px solid #000;
-}
-
-.calendar .combo .hilite {
-  background: Highlight;
-  color: HighlightText;
-}
-
-.calendar td.time {
-  border-top: 1px solid ButtonShadow;
-  padding: 1px 0px;
-  text-align: center;
-  background-color: ButtonFace;
-}
-
-.calendar td.time .hour,
-.calendar td.time .minute,
-.calendar td.time .ampm {
-  padding: 0px 3px 0px 4px;
-  border: 1px solid #889;
-  font-weight: bold;
-  background-color: Menu;
-}
-
-.calendar td.time .ampm {
-  text-align: center;
-}
-
-.calendar td.time .colon {
-  padding: 0px 2px 0px 3px;
-  font-weight: bold;
-}
-
-.calendar td.time span.hilite {
-  border-color: #000;
-  background-color: Highlight;
-  color: HighlightText;
-}
-
-.calendar td.time span.active {
-  border-color: #f00;
-  background-color: #000;
-  color: #0f0;
-}

common/js/common.js

@@ -239,6 +239,37 @@ jQuery(function($) {
     }
 });
 
+/*
+ * jQuery 1.2.6
+ * Opera 브라우저에서 $(window).height() / width() 값을 잘못 가져오는 문제 수정
+ * jQuery 1.3에서 수정되었음
+ * @link http://dev.jquery.com/changeset/5938
+ */
+if(jQuery.fn.jquery == '1.2.6') {
+    jQuery.each([ "Height", "Width" ], function(i, name){
+        var type = name.toLowerCase();
+
+        jQuery.fn[ type ] = function( size ) {
+            return this[0] == window ?
+                // Opera 브라우저에서 $(window).height() / width() 값을 잘못 가져오는 문제 수정
+                jQuery.browser.opera  && document.body.parentNode[ "client" + name ] ||
+
+                jQuery.browser.safari && window[ "inner" + name ] ||
+                document.compatMode == "CSS1Compat" && document.documentElement[ "client" + name ] || document.body[ "client" + name ] :
+
+                this[0] == document ?
+                    Math.max(
+                        Math.max(document.body["scroll" + name], document.documentElement["scroll" + name]),
+                        Math.max(document.body["offset" + name], document.documentElement["offset" + name])
+                    ) :
+
+                    size == undefined ?
+                        (this.length ? jQuery.css( this[0], type ) : null) :
+                        this.css( type, size.constructor == String ? size : size + "px" );
+        };
+    });
+}
+
 
 
 /**
@@ -888,4 +919,4 @@ function replaceOuterHTML(obj, html) {
 
 function getOuterHTML(obj) {
     return jQuery(obj).html().trim();
-}
+}

common/js/jquery-1.2.6.fix.js

@@ -1,31 +0,0 @@
-
-/*
- * jQuery 1.2.6
- * Opera 브라우저에서 $(window).height() / width() 값을 잘못 가져오는 문제 수정
- * jQuery 1.3에서 수정되었음
- * @link http://dev.jquery.com/changeset/5938
- */
-if(jQuery.fn.jquery == '1.2.6') {
-    jQuery.each([ "Height", "Width" ], function(i, name){
-        var type = name.toLowerCase();
-
-        jQuery.fn[ type ] = function( size ) {
-            return this[0] == window ?
-                // Opera 브라우저에서 $(window).height() / width() 값을 잘못 가져오는 문제 수정
-                jQuery.browser.opera  && document.body.parentNode[ "client" + name ] ||
-
-                jQuery.browser.safari && window[ "inner" + name ] ||
-                document.compatMode == "CSS1Compat" && document.documentElement[ "client" + name ] || document.body[ "client" + name ] :
-
-                this[0] == document ?
-                    Math.max(
-                        Math.max(document.body["scroll" + name], document.documentElement["scroll" + name]),
-                        Math.max(document.body["offset" + name], document.documentElement["offset" + name])
-                    ) :
-
-                    size == undefined ?
-                        (this.length ? jQuery.css( this[0], type ) : null) :
-                        this.css( type, size.constructor == String ? size : size + "px" );
-        };
-    });
-}

common/js/plugins/ui.datepicker/plugin.load

@@ -0,0 +1,2 @@
+ui.datepicker.js
+ui.datepicker.css

common/js/plugins/ui.tree/jquery.simple.tree.css

@@ -40,7 +40,7 @@
 .simpleTree .root
 {
 	margin-left:-16px;
-	background: url(../tpl/images/tree/root.gif) no-repeat 16px 0 #ffffff;
+	background: url(./images/root.gif) no-repeat 16px 0 #ffffff;
 }
 .simpleTree .line
 {
@@ -49,7 +49,7 @@
 	line-height: 3px;
 	height:3px;
 	font-size:3px;
-	background: url(../tpl/images/tree/line_bg.gif) 0 0 no-repeat transparent;
+	background: url(./images/line_bg.gif) 0 0 no-repeat transparent;
 }
 .simpleTree .line-last
 {
@@ -58,7 +58,7 @@
 	line-height: 3px;
 	height:3px;
 	font-size:3px;
-	background: url(../tpl/images/tree/spacer.gif) 0 0 no-repeat transparent;
+	background: url(./images/spacer.gif) 0 0 no-repeat transparent;
 }
 .simpleTree .line-over
 {
@@ -67,7 +67,7 @@
 	line-height: 3px;
 	height:3px;
 	font-size:3px;
-	background: url(../tpl/images/tree/line_bg_over.gif) 0 0 no-repeat transparent;
+	background: url(./images/line_bg_over.gif) 0 0 no-repeat transparent;
 }
 .simpleTree .line-over-last
 {
@@ -76,41 +76,41 @@
 	line-height: 3px;
 	height:3px;
 	font-size:3px;
-	background: url(../tpl/images/tree/line_bg_over_last.gif) 0 0 no-repeat transparent;
+	background: url(./images/line_bg_over_last.gif) 0 0 no-repeat transparent;
 }
 .simpleTree .folder-open
 {
 	margin-left:-16px;
-	background: url(../tpl/images/tree/collapsable.gif) 0 -2px no-repeat #fff;
+	background: url(./images/collapsable.gif) 0 -2px no-repeat #fff;
 }
 .simpleTree .folder-open-last
 {
 	margin-left:-16px;
-	background: url(../tpl/images/tree/collapsable-last.gif) 0 -2px no-repeat #fff;
+	background: url(./images/collapsable-last.gif) 0 -2px no-repeat #fff;
 }
 .simpleTree .folder-close
 {
 	margin-left:-16px;
-	background: url(../tpl/images/tree/expandable.gif) 0 -2px no-repeat #fff;
+	background: url(./images/expandable.gif) 0 -2px no-repeat #fff;
 }
 .simpleTree .folder-close-last
 {
 	margin-left:-16px;
-	background: url(../tpl/images/tree/expandable-last.gif) 0 -2px no-repeat #fff;
+	background: url(./images/expandable-last.gif) 0 -2px no-repeat #fff;
 }
 .simpleTree .doc
 {
 	margin-left:-16px;
-	background: url(../tpl/images/tree/leaf.gif) 0 -1px no-repeat #fff;
+	background: url(./images/leaf.gif) 0 -1px no-repeat #fff;
 }
 .simpleTree .doc-last
 {
 	margin-left:-16px;
-	background: url(../tpl/images/tree/leaf-last.gif) 0 -1px no-repeat #fff;
+	background: url(./images/leaf-last.gif) 0 -1px no-repeat #fff;
 }
 .simpleTree .ajax
 {
-	background: url(../tpl/images/tree/spinner.gif) no-repeat 0 0 #ffffff;
+	background: url(./images/spinner.gif) no-repeat 0 0 #ffffff;
 	height: 16px;
 	display:none;
 }
@@ -169,18 +169,18 @@
 
 #drag_container li.doc, #drag_container li.doc-last
 {
-	background: url(../tpl/images/tree/leaf.gif) no-repeat -17px 0 #ffffff;
+	background: url(./images/leaf.gif) no-repeat -17px 0 #ffffff;
 }
 #drag_container .folder-close, #drag_container .folder-close-last
 {
-	background: url(../tpl/images/tree/expandable.gif) no-repeat -17px 0 #ffffff;
+	background: url(./images/expandable.gif) no-repeat -17px 0 #ffffff;
 }
 
 #drag_container .folder-open, #drag_container .folder-open-last
 {
-	background: url(../tpl/images/tree/collapsable.gif) no-repeat -17px 0 #ffffff;
+	background: url(./images/collapsable.gif) no-repeat -17px 0 #ffffff;
 }
 .contextMenu
 {
 	display:none;
-}
+}

common/js/plugins/ui.tree/jquery.simple.tree.js

@@ -182,7 +182,7 @@ $.fn.simpleTree = function(opt){
 					$('body').append('<div id="drag_container"><ul></ul></div>');
 					$('#drag_container').hide().css({opacity:'0.8'});
 					$('#drag_container >ul').append(cloneNode);
-					$("<img>").attr({id	: "tree_plus",src	: "./common/tpl/images/tree/plus.gif"}).css({width: "7px",display: "block",position: "absolute",left	: "5px",top: "5px", display:'none'}).appendTo("body");
+					$("<img>").attr({id	: "tree_plus",src	: "./common/js/plugins/ui.tree/images/plus.gif"}).css({width: "7px",display: "block",position: "absolute",left	: "5px",top: "5px", display:'none'}).appendTo("body");
 					$(document).bind("mousemove", {LI:LI}, TREE.dragStart).bind("mouseup",TREE.dragEnd);
 				}
 				return false;
@@ -221,7 +221,7 @@ $.fn.simpleTree = function(opt){
 			TREE.setEventLine($('.line, .line-last', obj));
 		};
 		TREE.setTrigger = function(node){
-			$('>span',node).before('<img class="trigger" src="./common/tpl/images/tree/spacer.gif" border=0>');
+			$('>span',node).before('<img class="trigger" src="./common/js/plugins/ui.tree/images/spacer.gif" border=0>');
 			var trigger = $('>.trigger', node);
 			trigger.click(function(event){
 				TREE.nodeToggle(node);
@@ -258,19 +258,19 @@ $.fn.simpleTree = function(opt){
 
 					if(parent.className.indexOf('folder-close')>=0 && ajaxChildSize==0)
 					{
-						if(isrc.indexOf('minus')!=-1)$("#tree_plus").attr('src','./common/tpl/images/tree/plus.gif');
+						if(isrc.indexOf('minus')!=-1)$("#tree_plus").attr('src','./common/js/plugins/ui.tree/images/plus.gif');
 						$("#tree_plus").css({"left": screenScroll.x, "top": screenScroll.y}).show();
 						dragDropTimer = setTimeout(function(){
 							parent.className = parent.className.replace('close','open');
 							$('>ul',parent).show();
 						}, 700);
 					}else if(parent.className.indexOf('folder')>=0 && ajaxChildSize==0){
-						if(isrc.indexOf('minus')!=-1)$("#tree_plus").attr('src','./common/tpl/images/tree/plus.gif');
+						if(isrc.indexOf('minus')!=-1)$("#tree_plus").attr('src','./common/js/plugins/ui.tree/images/plus.gif');
 						$("#tree_plus").css({"left": screenScroll.x, "top": screenScroll.y}).show();
 					}else if(parent.className.indexOf('folder-close')>=0 && ajaxChildSize>0)
 					{
 						mouseMoved = false;
-						$("#tree_plus").attr('src','./common/tpl/images/tree/minus.gif');
+						$("#tree_plus").attr('src','./common/js/plugins/ui.tree/images/minus.gif');
 						$("#tree_plus").css({"left": screenScroll.x, "top": screenScroll.y}).show();
 
 						$('>ul',parent).show();
@@ -280,7 +280,7 @@ $.fn.simpleTree = function(opt){
 						TREE.setAjaxNodes(ajaxChild,parent.id, function(){
 							parent.className = parent.className.replace('close','open');
 							mouseMoved = true;
-							$("#tree_plus").attr('src','./common/tpl/images/tree/plus.gif');
+							$("#tree_plus").attr('src','./common/js/plugins/ui.tree/images/plus.gif');
 							$("#tree_plus").css({"left": screenScroll.x, "top": screenScroll.y}).show();
 						});
 
@@ -465,4 +465,4 @@ $.fn.simpleTree = function(opt){
 	});
 }
 
-})(jQuery);
+})(jQuery);

common/js/plugins/ui.tree/plugin.load

@@ -0,0 +1,2 @@
+jquery.simple.tree.css
+jquery.simple.tree.js