css 및 js 호출순서 조정기능 추가

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

widgets/navigator/conf/info.xml

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<widget version="0.2">
+    <title xml:lang="ko">메뉴 출력기</title>
+    <title xml:lang="zh-CN">菜单显示器</title>
+    <title xml:lang="zh-TW">導覽列</title>
+    <description xml:lang="ko">메뉴 모듈에서 생성된 메뉴를 출력하는 위젯입니다.</description>
+    <description xml:lang="zh-CN">此控件可以在任意位置显示菜单模块中的菜单。</description>
+    <description xml:lang="zh-TW">메뉴 모듈에서 생성된 메뉴를 출력하는 위젯입니다.</description>
+    <version>0.1</version>
+    <date>2009-02-10</date>
+
+    <author email_address="zero@zeroboard.com" link="http://www.zeroboard.com">
+        <name xml:lang="ko">zero</name>
+        <name xml:lang="zh-CN">zero</name>
+        <name xml:lang="zh-TW">zero</name>
+    </author>
+
+    <extra_vars>
+        <var id="menu_srl">
+            <type>menu</type>
+            <name xml:lang="ko">메뉴</name>
+            <name xml:lang="zh-CN">菜单</name>
+            <name xml:lang="zh-TW">選單</name>
+            <description xml:lang="ko">선택하신 메뉴를 출력합니다. 선택하지 않으면 호출된 레이아웃의 첫번째 메뉴를 자동으로 지정합니다.</description>
+            <description xml:lang="zh-CN">请选择要显示的菜单。</description>
+            <description xml:lang="zh-TW">선택하신 메뉴를 출력합니다. 선택하지 않으면 호출된 레이아웃의 첫번째 메뉴를 자동으로 지정합니다.</description>
+        </var>
+        <var id="start_depth">
+            <type>select</type>
+            <name xml:lang="ko">시작 깊이</name>
+            <name xml:lang="zh-CN">开始深度</name>
+            <name xml:lang="zh-TW">階層數</name>
+            <description xml:lang="ko">출력될 메뉴의 시작 깊이(depth)를 지정할 수 있습니다. 1이 최상단이고 2부터는 선택된 상위 메뉴가 있으면 출력하게 됩니다</description>
+            <options>
+                <value>1</value>
+                <name xml:lang="ko">1 depth</name>
+                <name xml:lang="zh-CN">1 depth</name>
+                <name xml:lang="zh-TW">1 depth</name>
+            </options>
+            <options>
+                <value>2</value>
+                <name xml:lang="ko">2 depth</name>
+                <name xml:lang="zh-CN">2 depth</name>
+                <name xml:lang="zh-TW">2 depth</name>
+            </options>
+
+        </var>
+    </extra_vars>
+</widget>

widgets/navigator/navigator.class.php

@@ -0,0 +1,139 @@
+<?php
+    /**
+     * @class navigator 
+     * @author zero (zero@nzeo.com)
+     * @brief 메뉴 출력기
+     * @version 0.1
+     **/
+
+    class navigator extends WidgetHandler {
+
+        /**
+         * @brief 위젯의 실행 부분
+         *
+         * ./widgets/위젯/conf/info.xml 에 선언한 extra_vars를 args로 받는다
+         * 결과를 만든후 print가 아니라 return 해주어야 한다
+         **/
+        function proc($args) {
+            $oModuleModel = &getModel('module');
+
+            // $args->menu_srl이 지정되어 있으면 해당 메뉴로, 그렇지 않다면 현재 레이아웃의 메뉴를 구함
+            if(!$args->menu_srl) {
+                $current_module_info = Context::get('current_module_info');
+                $args->layout_srl = $current_module_info->layout_srl;
+
+                $oLayoutModel = &getModel('layout');
+                $layout_info = $oLayoutModel->getLayout($current_module_info->layout_srl);
+                if(!$layout_info) return;
+
+                if($layout_info->extra_var_count) {
+                    foreach($layout_info->extra_var as $var_id => $val) {
+                        $layout_info->{$var_id} = $val->value;
+                    }
+                    if(!$layout_info->menu_count) return;
+
+                    // 레이아웃 정보중 menu를 Context::set
+                    foreach($layout_info->menu as $menu_id => $menu) {
+                        if(file_exists($menu->php_file)) {
+                            $args->menu_srl = $menu->menu_srl;
+                            @include($menu->php_file);
+                        }
+                        break;
+                    }
+                } else return;
+            } else {
+                $php_file = sprintf('%sfiles/cache/menu/%d.php', _XE_PATH_, $args->menu_srl);
+                @include($php_file);
+            }
+            if(!$menu) return;
+
+            // 시작 depth가 2이상, 즉 상위 메뉴 선택 이후 하위 메뉴 출력시 처리
+            if($args->start_depth == 2 && count($menu->list)) {
+                $t_menu = null;
+                foreach($menu->list as $key => $val) {
+                    if($val['selected']) {
+                        $t_menu->list = $val['list'];
+                        break;
+                    }
+                }
+                $menu = $t_menu;
+            }
+
+            $widget_info->menu = $menu->list;
+
+            $this->_arrangeMenu($arranged_list, $menu->list, 0);
+            $widget_info->arranged_menu = $arranged_list;
+
+            // men XML 파일
+            $widget_info->xml_file = sprintf('%sfiles/cache/menu/%d.xml.php',getUrl(''), $args->menu_srl);
+            $widget_info->menu_srl = $args->menu_srl;
+
+            if($this->selected_node_srl) $widget_info->selected_node_srl = $this->selected_node_srl;
+            Context::set('widget_info', $widget_info);
+
+            // 템플릿 컴파일
+            $tpl_path = sprintf('%sskins/%s', $this->widget_path, $args->skin);
+            $tpl_file = 'navigator';
+
+            Context::set('colorset', $args->colorset);
+
+            $oTemplate = &TemplateHandler::getInstance();
+            return $oTemplate->compile($tpl_path, $tpl_file);
+        }
+
+        /**
+         * @brief 메뉴를 1차원 배열로 변경
+         **/
+        function _arrangeMenu(&$menu, $list, $depth) {
+            if(!count($list)) return;
+            $idx = 0;
+            $list_order = array();
+            foreach($list as $key => $val) {
+                if(!$val['text']) continue;
+                $obj = null;
+                $obj->href = $val['href'];
+                $obj->url = $val['url'];
+                $obj->node_srl = $val['node_srl'];
+                $obj->parent_srl = $val['parent_srl'];
+                $obj->title = $obj->text = $val['text'];
+                $obj->expand = $val['expand']=='Y'?true:false;
+                $obj->depth = $depth;
+                $obj->selected = $val['selected'];
+                $obj->child_count = 0;
+                $obj->childs = array();
+
+                if(Context::get('mid') == $obj->url){
+                    $selected = true;
+                    $this->selected_node_srl = $obj->node_srl;
+                    $obj->selected = true;
+                }else{
+                    $selected = false;
+                }
+
+                $list_order[$idx++] = $obj->node_srl;
+
+                // 부모 카테고리가 있으면 자식노드들의 데이터를 적용
+                if($obj->parent_srl) {
+
+                    $parent_srl = $obj->parent_srl;
+                    $expand = $obj->expand;
+                    if($selected) $expand = true;
+
+                    while($parent_srl) {
+                        $menu[$parent_srl]->childs[] = $obj->node_srl;
+                        $menu[$parent_srl]->child_count = count($menu[$parent_srl]->childs);
+                        if($expand) $menu[$parent_srl]->expand = $expand;
+
+                        $parent_srl = $menu[$parent_srl]->parent_srl;
+                    }
+                }
+
+                $menu[$key] = $obj;
+
+                if(count($val['list'])) $this->_arrangeMenu($menu, $val['list'], $depth+1);
+            }
+            $menu[$list_order[0]]->first = true;
+            $menu[$list_order[count($list_order)-1]]->last = true;
+        }
+    }
+?>

widgets/navigator/skins/horiNavigator/css/widget.css

@@ -0,0 +1,63 @@
+@charset "utf-8";
+.widgetNavC{ margin:0; padding:0; font-size:12px; line-height:1.2; background-repeat:repeat-x;background-position:0 0;}
+.widgetNavC ul{ margin:0; padding:0; height:35px;}
+.widgetNavC ul li.active ul{ display:block;}
+.widgetNavC ul.aCenter{ margin-left:auto; margin-right:auto;}
+.widgetNavC ul.aLeft{ margin-right:auto;}
+.widgetNavC ul.aRight{ margin-left:auto;}
+
+ul.widgetNavSub { display:block; height:auto; border:1px solid; padding-bottom:7px; background:#35ad06; background-image:none !important; padding:0; margin:0;}
+ul.widgetNavSub li { list-style:none; }
+ul.widgetNavSub li a{ display:block; padding:5px 10px 5px 10px; color:#fff; text-decoration:none !important; white-space:nowrap;}
+ul.widgetNavSub li a:hover,
+ul.widgetNavSub li a:active,
+ul.widgetNavSub li a:focus{ text-decoration:underline !important;}
+ul.widgetNavSub li.first{ margin-top:-4px; padding-top:14px; background-repeat:no-repeat; background-position:30px top;}
+
+/* widgetNavCgreen */
+.widgetNavCgreen{ background-image:url(../img/white/bgMenuCgreen.gif);}
+.widgetNavCgreen li{ background-image:url(../img/white/bgMenuCgreen.gif);}
+.widgetNavCgreen li.first a{ background-image:url(../img/white/bgMenuCgreen.gif);}
+ul.widgetNavSub.green { background:#35ad06; border-color:#027a00;}
+ul.widgetNavSub.green { background-image:url(../img/white/bgMenuCgreen.gif);}
+ul.widgetNavSub.green li.first{ background-image:url(../img/white/arrowMenuCgreen.gif);}
+
+/* widgetNavCblue */
+.widgetNavCblue{ background-image:url(../img/white/bgMenuCblue.gif);}
+.widgetNavCblue li{ background-image:url(../img/white/bgMenuCblue.gif);}
+.widgetNavCblue li.first a{ background-image:url(../img/white/bgMenuCblue.gif);}
+ul.widgetNavSub.blue { background:#0688ad; border-color:#00557a;}
+ul.widgetNavSub.blue { background-image:url(../img/white/bgMenuCblue.gif);}
+ul.widgetNavSub.blue li.first{ background-image:url(../img/white/arrowMenuCblue.gif);}
+
+/* widgetNavCcyan */
+.widgetNavCcyan{ background-image:url(../img/white/bgMenuCcyan.gif);}
+.widgetNavCcyan li{ background-image:url(../img/white/bgMenuCcyan.gif);}
+.widgetNavCcyan li.first a{ background-image:url(../img/white/bgMenuCcyan.gif);}
+ul.widgetNavSub.cyan { background:#06a4ad; border-color:#00717a;}
+ul.widgetNavSub.cyan{ background-image:url(../img/white/bgMenuCcyan.gif);}
+ul.widgetNavSub.cyan li.first{ background-image:url(../img/white/arrowMenuCcyan.gif);}
+
+/* widgetNavCorange */
+.widgetNavCorange{ background-image:url(../img/white/bgMenuCorange.gif);}
+.widgetNavCorange li{ background-image:url(../img/white/bgMenuCorange.gif);}
+.widgetNavCorange li.first a{ background-image:url(../img/white/bgMenuCorange.gif);}
+ul.widgetNavSub.orange { background:#ad9906;  border-color:#7a6600;}
+ul.widgetNavSub.orange{ background-image:url(../img/white/bgMenuCorange.gif);}
+ul.widgetNavSub.orange li.first{ background-image:url(../img/white/arrowMenuCorange.gif);}
+
+/* widgetNavCred */
+.widgetNavCred{ background-image:url(../img/white/bgMenuCred.gif);}
+.widgetNavCred li{ background-image:url(../img/white/bgMenuCred.gif);}
+.widgetNavCred li.first a{ background-image:url(../img/white/bgMenuCred.gif);}
+ul.widgetNavSub.red { background:#ad4606; border-color:#7a1300;}
+ul.widgetNavSub.red {background-image:url(../img/white/bgMenuCred.gif);}
+ul.widgetNavSub.red li.first{ background-image:url(../img/white/arrowMenuCred.gif);}
+
+/* widgetNavCgray */
+.widgetNavCgray{ background-image:url(../img/white/bgMenuCgray.gif);}
+.widgetNavCgray li{ background-image:url(../img/white/bgMenuCgray.gif);}
+.widgetNavCgray li.first a{ background-image:url(../img/white/bgMenuCgray.gif);}
+ul.widgetNavSub.gray { background:#595959; border-color:#555;}
+ul.widgetNavSub.gray{ background-image:url(../img/white/bgMenuCgray.gif);}
+ul.widgetNavSub.gray li.first{ background-image:url(../img/white/arrowMenuCgray.gif);}

widgets/navigator/skins/horiNavigator/js/navigator.js

@@ -0,0 +1,294 @@
+function WidgetNavigator(menu_srl){
+    var self = this;
+    self.menu_srl = menu_srl;
+
+    // 1depth 메뉴를 먼저
+    jQuery(function(){
+        jQuery('ul.widget_navigator_'+menu_srl+' > li')
+            .mouseover(
+                function(e){
+                    jQuery(this).parent().children('li').removeClass('active');
+                    jQuery(this).addClass('active');
+
+                    var node_srl = jQuery(this).attr('node_srl');
+                    if(self.menu_srl && node_srl && widget_navigator && widget_navigator[self.menu_srl]){
+
+                        // 생성되지 않을때만 생성
+                        if(jQuery('ul[node_srl='+node_srl+']').size() ==0){
+                            var wn = widget_navigator[self.menu_srl].drawMenu(node_srl);
+                            if(wn) wn.appendTo(jQuery('html>body'));
+
+                        // 이미 있다면 show
+                        }else{
+                            jQuery('a',this).show();
+                            jQuery('ul[node_srl='+node_srl+']').show();
+                            jQuery('ul[node_srl='+node_srl+']').children('li').show();
+                            jQuery('ul[node_srl='+node_srl+']').children('li').children('a').show();
+                        }
+                    }
+                }
+            ).mouseout(
+                function(e){
+                    jQuery(this).parent().children('li.active').removeClass('active');
+                    jQuery(this).parent().children('li._active').addClass('active');
+
+                    var node_srl = jQuery(this).attr('node_srl');
+                    jQuery('ul[node_srl='+node_srl+']').hide();
+                }
+        );
+
+    });
+}
+
+
+WidgetNavigator.prototype.drawMenu = function(parent_srl){
+    var self = this;
+    var c = this.getMenu(parent_srl);
+
+    // 하위메뉴가 없다
+    if(c.size()==0) return '';
+
+    var depth = this.getDepth(parent_srl);
+
+    // 하위 메뉴를 만든다
+    var h = jQuery('<ul class="widgetNavSub '+hrMenuColorset+'" node_srl="'+parent_srl+'">')
+
+            .css({ position:'absolute' })
+
+            .mouseover(function(){
+
+                jQuery('li.[node_srl='+parent_srl+']').parent().show();
+                jQuery(this).show();
+
+            })
+            .mouseout(function(){
+//                jQuery(this).hide();
+            });
+
+    // 1차메뉴
+    if(depth <1){
+        var parent_offset = jQuery('li.node_'+parent_srl).offset();
+        h.css({
+                top : parent_offset.top + jQuery('li.node_'+parent_srl).height()-2,
+                left : parent_offset.left + 2
+             })
+
+    // 2차메뉴
+    }else{
+        h.css({
+                left: 40
+             });
+    }
+
+    h.mouseover(function(e){
+        jQuery('li[node_srl='+parent_srl+']').mouseover();
+    })
+    .mouseout(function(e){
+        jQuery('li[node_srl='+parent_srl+']').mouseout();
+    });
+
+
+    c.each(function(i){
+        var t = jQuery(this);
+
+        var m = t.attr('text');
+        var u ='#';
+        if(t.attr('url')){
+            if(/^http\:\/\//.test(t.attr('url'))){
+                u = t.attr('url');
+            }else{
+                u = request_uri.setQuery('mid',t.attr('url'));
+            }
+        }
+        m = '<a href="' + u + '"'+(t.attr('open_window')=='Y'?' target="blank"':'')+'>'+m+'</a>';
+
+
+        jQuery('<li class="node_'+ t.attr('node_srl') +( i==0?'  ':'')+'" node_srl="'+ t.attr('node_srl')+'">')
+            .html(m)
+            .mouseover(function(){
+                jQuery(this).toggleClass('active','');
+                var node_srl = jQuery(this).attr('node_srl');
+
+                if(self.menu_srl && node_srl && widget_navigator && widget_navigator[self.menu_srl]){
+                    if(jQuery('ul[node_srl='+node_srl+']').size() ==0){
+                        var wn = widget_navigator[self.menu_srl].drawMenu(node_srl);
+//                        if(wn) wn.appendTo(jQuery('li[node_srl='+node_srl+']'));
+                    }else{
+                        jQuery('ul[node_srl='+node_srl+']').show();
+                    }
+                }
+            })
+            .mouseout(function(){
+                var node_srl = jQuery(this).attr('node_srl');
+                jQuery('ul[node_srl='+node_srl+']').hide();
+            })
+            .appendTo(h);
+    });
+
+
+    return h;
+}
+
+
+WidgetNavigator.prototype.load = function(xml){
+    this.xml = xml;
+    var self = this;
+    jQuery.get(xml,{},function(data){
+        // for ie
+        self.data = jQuery(data.replace(/\<(\/|)node/g,'<$1span').replace(/\<(\/|)root/g,'<$1div'));
+    },'text');
+}
+
+WidgetNavigator.prototype.getMenu = function(parent_srl){
+    var m = this.data;
+    return m.find("[parent_srl="+parent_srl+"]");
+}
+
+WidgetNavigator.prototype.getDepth = function(node_srl){
+    var m = this.data.find('span[node_srl='+node_srl+']');
+    return m.parents("span").size();
+}
+
+
+
+/*
+function WidgetNavigator(menu_srl){
+    var self = this;
+    self.menu_srl = menu_srl;
+
+    // 1depth 메뉴를 먼저
+    jQuery(function(){
+        jQuery('ul.widget_navigator_'+menu_srl+' > li')
+            .mouseover(
+                function(e){
+                    jQuery(this).parent().children('li').removeClass('active');
+                    jQuery(this).addClass('active');
+
+                    var node_srl = jQuery(this).attr('node_srl');
+                    if(self.menu_srl && node_srl && widget_navigator && widget_navigator[self.menu_srl]){
+
+                        // 생성되지 않을때만 생성
+                        if(jQuery('ul[node_srl='+node_srl+']').size() ==0){
+                            var wn = widget_navigator[self.menu_srl].drawMenu(node_srl);
+                            if(wn) wn.appendTo(jQuery('html>body'));
+
+                        // 이미 있다면 show
+                        }else{
+                            jQuery('ul[node_srl='+node_srl+']').show();
+                        }
+                    }
+                }
+            ).mouseout(
+                function(e){
+                    jQuery(this).parent().children('li.active').removeClass('active');
+                    jQuery(this).parent().children('li._active').addClass('active');
+
+                    var node_srl = jQuery(this).attr('node_srl');
+//                    jQuery('ul[node_srl='+node_srl+']').hide();
+                }
+        );
+
+    });
+}
+
+
+WidgetNavigator.prototype.drawMenu = function(parent_srl){
+    var self = this;
+    var c = this.getMenu(parent_srl);
+
+    // 하위메뉴가 없다
+    if(c.size()==0) return '';
+
+    var depth = this.getDepth(parent_srl);
+
+    // 하위 메뉴를 만든다
+    var h = jQuery('<ul class="widgetNavSub '+hrMenuColorset+'" node_srl="'+parent_srl+'">')
+
+            .css({ position:'absolute' })
+
+            .mouseover(function(){
+
+                jQuery('li.[node_srl='+parent_srl+']').parent().show();
+                jQuery(this).show();
+
+            })
+            .mouseout(function(){
+//                jQuery(this).hide();
+            });
+
+    // 1차메뉴
+    if(depth <1){
+        var parent_offset = jQuery('li.node_'+parent_srl).offset();
+        h.css({
+                top : parent_offset.top + jQuery('li.node_'+parent_srl).height(),
+                left : parent_offset.left
+             })
+
+    // 2차메뉴
+    }else{
+        h.css({
+                left: 40
+             });
+    }
+
+    h.mouseover(function(e){
+        jQuery('li[node_srl='+parent_srl+']').mouseover();
+    })
+    .mouseout(function(e){
+        jQuery('li[node_srl='+parent_srl+']').mouseout();
+    });
+
+
+    c.each(function(i){
+        var t = jQuery(this);
+
+        var m = t.attr('text');
+        m = '<a href="' + (t.attr('url')?t.attr('url'):'#') + '"'+(t.attr('open_window')=='Y'?' target="blank"':'')+'>'+m+'</a>';
+
+
+        jQuery('<li class="node_'+ t.attr('node_srl') +( i==0?'  ':'')+'" node_srl="'+ t.attr('node_srl')+'">')
+            .html(m)
+            .mouseover(function(){
+                jQuery(this).toggleClass('active','');
+                var node_srl = jQuery(this).attr('node_srl');
+
+                if(self.menu_srl && node_srl && widget_navigator && widget_navigator[self.menu_srl]){
+                    if(jQuery('ul[node_srl='+node_srl+']').size() ==0){
+                        var wn = widget_navigator[self.menu_srl].drawMenu(node_srl);
+                        if(wn) wn.appendTo(jQuery('li[node_srl='+node_srl+']'));
+                    }else{
+                        jQuery('ul[node_srl='+node_srl+']').show();
+                    }
+                }
+            })
+            .mouseout(function(){
+                var node_srl = jQuery(this).attr('node_srl');
+                jQuery('ul[node_srl='+node_srl+']').hide();
+            })
+            .appendTo(h);
+    });
+
+
+    return h;
+}
+
+
+WidgetNavigator.prototype.load = function(xml){
+    this.xml = xml;
+    var self = this;
+    jQuery.get(xml,{},function(data){
+        // for ie
+        self.data = jQuery(data.replace(/\<(\/|)node/g,'<$1span').replace(/\<(\/|)root/g,'<$1div'));
+    },'text');
+}
+
+WidgetNavigator.prototype.getMenu = function(parent_srl){
+    var m = this.data;
+    return m.find("[parent_srl="+parent_srl+"]");
+}
+
+WidgetNavigator.prototype.getDepth = function(node_srl){
+    var m = this.data.find('span[node_srl='+node_srl+']');
+    return m.parents("span").size();
+}
+*/

widgets/navigator/skins/horiNavigator/navigator.html

@@ -0,0 +1,22 @@
+<!--%import("./js/navigator.js")-->
+<!--%import("./css/widget.css")-->
+
+<script type="text/javascript">
+if(typeof(widget_navigator) != 'Object') var widget_navigator={};
+var hrMenuColorset = "{$colorset}";
+widget_navigator[{$widget_info->menu_srl}] = new WidgetNavigator({$widget_info->menu_srl});
+widget_navigator[{$widget_info->menu_srl}].load('{$widget_info->xml_file}');
+</script>
+
+<div class="widgetContainer">
+    <div class="widgetMenuC widgetMenuC{$colorset}">
+        <ul class="widget_navigator_{$widget_info->menu_srl} navigator"  menu_srl='{$widget_info->menu_srl}'>
+        <!--@foreach($widget_info->arranged_menu as $key => $val)-->
+            <!--@if($val->text && $val->depth == 0)-->
+            <li class="node_{$val->node_srl} <!--@if($val->first)-->first<!--@end--> {$_first} <!--@if($val->selected)-->active<!--@end-->" node_srl='{$val->node_srl}' ><a href="{$val->href}">{$val->text}</a>
+            </li>
+            <!--@end-->
+        <!--@end-->
+        </ul>
+    </div>
+</div>

widgets/navigator/skins/horiNavigator/skin.xml

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<skin version="0.2">
+    <title xml:lang="ko">가로 메뉴 출력</title>
+    <description xml:lang="ko">
+        지정된 메뉴 정보를 가로 출력하는 기본 위젯입니다.
+        DHTML 기능을 사용으로 하시면 메뉴에 마우스 오버시 하부 메뉴가 나타나게 됩니다.
+    </description>
+    <version>0.1</version>
+    <date>2009-02-19</date>
+    <link>http://www.zeroboard.com</link>
+
+    <author email_address="zero@zeroboard.com" link="http://www.zeroboard.com">
+        <name xml:lang="ko">zero</name>
+    </author>
+
+    <colorset>
+        <color name="gray">
+            <title xml:lang="ko">회색</title>
+        </color>
+        <color name="green">
+            <title xml:lang="ko">초록색</title>
+        </color>
+        <color name="blue">
+            <title xml:lang="ko">파란색</title>
+        </color>
+        <color name="cyan">
+            <title xml:lang="ko">청록색</title>
+        </color>
+        <color name="orange">
+            <title xml:lang="ko">오렌지색</title>
+        </color>
+        <color name="red">
+            <title xml:lang="ko">빨간색</title>
+        </color>
+    </colorset>
+</skin>

widgets/navigator/skins/tree/css/black.css

@@ -0,0 +1,33 @@
+@charset "utf-8";
+
+/* Widget Tree */
+.widgetTree { margin-top:10px;}
+.widgetTree *{ margin:0; padding:0; font-size:12px;}
+.widgetTree a strong{ letter-spacing:-1px; cursor:pointer; _cursor /**/:hand;}
+.widgetTree ul{ position:relative; display:block; padding:3px 0 0 0 !important; zoom:1;}
+.widgetTree ul li{ list-style:none; position:relative; padding:3px 0 2px 8px; white-space:nowrap;}
+.widgetTree ul li a,
+.widgetTree ul li span.nav_tree_label{ position:relative; left:16px; _left /**/:0; top:0;}
+.widgetTree ul li a {text-decoration:none; }
+.widgetTree ul li a.selected {font-weight:bold;}
+.widgetTree ul li button{ display:inline-block; position:relative; _left /**/:-16px; *top:-2px; width:13px; height:13px; *width:17px; *height:17px; margin:0 -13px 0 0; *margin:0 -17px -2px -2px; text-indent:-10000px; *text-indent:0; *font:0/0 Sans-serif; border:none; cursor:pointer; _cursor /**/:hand;}
+.widgetTree ul li ul{ display:none; padding:2px 0 0 0 !important; margin:0 0 -2px 6px; background-position:left top;}
+.widgetTree ul li ul li{ display:none;}
+.widgetTree ul li.nav_tree_on button{ background-position:0 -13px; *background-position:2px -11px;}
+.widgetTree ul li.nav_tree_off button{ background-position:0 0; *background-position:2px 2px;}
+.widgetTree ul li.nav_tree_on ul{ display:block;}
+.widgetTree ul li.nav_tree_on ul li{ display:block;}
+.widgetTree ul li.nav_tree_off ul{ display:none;}
+.widgetTree ul li.nav_tree_off ul li{ display:none;}
+.widgetTree .icon{ position:relative; left:16px;}
+
+/* widgetTree */
+.widgetTree{ color:#999;}
+.widgetTree a { color:#999;}
+
+/* Widget Tree */
+.widgetTree ul{ background:url(../img/black/lineTreeVr.gif) repeat-y 0 -1px;}
+.widgetTree ul li{ background:url(../img/black/lineTreeHr.gif) no-repeat 1px 5px !important;}
+.widgetTree ul li button{ background:url(../img/black/buttonTreeCollapse.gif) no-repeat;}
+.widgetTree ul li.nav_tree_last{ background:url(../img/black/lineTreeLastHr.gif) no-repeat 0 5px !important;}
+

widgets/navigator/skins/tree/css/white.css

@@ -0,0 +1,33 @@
+@charset "utf-8";
+
+/* Widget Tree */
+.widgetTree { margin-top:10px;}
+.widgetTree *{ margin:0; padding:0; font-size:12px;}
+.widgetTree a strong{ letter-spacing:-1px; cursor:pointer; _cursor /**/:hand;}
+.widgetTree ul{ position:relative; display:block; padding:3px 0 0 0 !important; zoom:1;}
+.widgetTree ul li{ list-style:none; position:relative; padding:3px 0 2px 8px; white-space:nowrap;}
+.widgetTree ul li a,
+.widgetTree ul li span.nav_tree_label{ position:relative; left:16px; _left /**/:0; top:0;}
+.widgetTree ul li a {text-decoration:none; }
+.widgetTree ul li a.selected {font-weight:bold;}
+.widgetTree ul li button{ display:inline-block; position:relative; _left /**/:-16px; *top:-2px; width:13px; height:13px; *width:17px; *height:17px; margin:0 -13px 0 0; *margin:0 -17px -2px -2px; text-indent:-10000px; *text-indent:0; *font:0/0 Sans-serif; border:none; cursor:pointer; _cursor /**/:hand;}
+.widgetTree ul li ul{ display:none; padding:2px 0 0 0 !important; margin:0 0 -2px 6px; background-position:left top;}
+.widgetTree ul li ul li{ display:none;}
+.widgetTree ul li.nav_tree_on button{ background-position:0 -13px; *background-position:2px -11px;}
+.widgetTree ul li.nav_tree_off button{ background-position:0 0; *background-position:2px 2px;}
+.widgetTree ul li.nav_tree_on ul{ display:block;}
+.widgetTree ul li.nav_tree_on ul li{ display:block;}
+.widgetTree ul li.nav_tree_off ul{ display:none;}
+.widgetTree ul li.nav_tree_off ul li{ display:none;}
+.widgetTree .icon{ position:relative; left:16px;}
+
+/* widgetTree */
+.widgetTree{ color:#333;}
+.widgetTree a{ color:#333;}
+
+/* Widget Tree */
+.widgetTree ul{ background:url(../img/white/lineTreeVr.gif) repeat-y 0 -1px;}
+.widgetTree ul li{ background:url(../img/white/lineTreeHr.gif) no-repeat 1px 5px !important;}
+.widgetTree ul li button{ background:url(../img/white/buttonTreeCollapse.gif) no-repeat;}
+.widgetTree ul li.nav_tree_last{ background:url(../img/white/lineTreeLastHr.gif) no-repeat 0 5px !important;}
+

widgets/navigator/skins/tree/js/navigator.js

@@ -0,0 +1,22 @@
+function toggleMenu(evt) {
+    var e = new xEvent(evt);
+    var obj = e.target;
+    if(obj.nodeName != 'BUTTON') return;
+
+    var node_srl = obj.className.replace(/^menu_/,'');
+    if(!node_srl) return;
+
+    var li_obj = xGetElementById("menu_parent_"+node_srl);
+    if(!li_obj) return;
+    var className = li_obj.className;
+
+    if(/nav_tree_off/.test(className)) {
+        xInnerHtml(obj,'-');
+        li_obj.className = className.replace(/nav_tree_off/,'nav_tree_on');
+    } else {
+        xInnerHtml(obj,'+');
+        li_obj.className = className.replace(/nav_tree_on/,'nav_tree_off');
+    }
+}
+
+xAddEventListener(document, 'click', toggleMenu);

widgets/navigator/skins/tree/navigator.html

@@ -0,0 +1,45 @@
+<!--%import("./js/navigator.js")-->
+
+<!--@if($colorset == "black")-->
+    <!--%import("./css/black.css")-->
+<!--@elseif($colorset == "white")-->
+    <!--%import("./css/white.css")-->
+<!--@end-->
+
+{@ $_pDepth = 0;}
+
+<div class="widgetContainer">
+    <div class="widgetTree">
+        <ul>
+    <!--@foreach($widget_info->arranged_menu as $key => $val)-->
+        <!--@if($val->text)-->
+
+            <!--@if($_pDepth > $val->depth)-->
+                <!--@for($i=$val->depth; $i<$_pDepth; $i++)-->
+                </li>
+            </ul>
+                <!--@end-->
+                {@ $_pDepth = $val->depth}
+            <!--@end-->
+
+                <li class="<!--@if($val->last)-->nav_tree_last<!--@end--> <!--@if($val->expand)-->nav_tree_on<!--@else-->nav_tree_off<!--@end-->" id="menu_parent_{$val->node_srl}">
+                    <!--@if($val->child_count)-->
+                        <!--@if($val->expand)-->
+                            <button type="button" class="menu_{$val->node_srl}">+</button>
+                        <!--@else-->
+                            <button type="button" class="menu_{$val->node_srl}">-</button>
+                        <!--@end-->
+                    <!--@end-->
+                    <a href="{$val->href}" class="nav_tree_label <!--@if($val->selected)-->selected<!--@end-->">{$val->text}</a> 
+
+                <!--@if($val->child_count)-->
+                    {@$_pDepth++}
+                    <ul>
+                <!--@else-->
+                </li>
+                <!--@end-->
+        <!--@end-->
+    <!--@end-->
+        </ul>
+    </div>
+</div>

widgets/navigator/skins/tree/skin.xml

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<skin version="0.2">
+    <title xml:lang="ko">메뉴 트리 출력 스킨</title>
+    <title xml:lang="zh-CN">树形菜单皮肤</title>
+    <title xml:lang="zh-TW">樹狀選單面板</title>
+    <description xml:lang="ko">메뉴를 트리구조로 출력합니다.</description>
+    <description xml:lang="zh-CN">树形菜单皮肤</description>
+    <description xml:lang="zh-TW">以樹狀結構顯示選單。</description>
+    <version>0.1</version>
+    <date>2009-02-10</date>
+    <link>http://www.zeroboard.com</link>
+
+    <author email_address="zero@zeroboard.com" link="http://www.zeroboard.com">
+        <name xml:lang="ko">zero</name>
+		<name xml:lang="zh-CN">zero</name>
+        <name xml:lang="zh-TW">zero</name>
+    </author>
+
+    <colorset>
+        <color name="layout">
+            <title xml:lang="ko">레이아웃에 맞춤</title>
+            <title xml:lang="jp">レイアウトに合わせる</title>
+            <title xml:lang="zh-CN">随布局</title>
+            <title xml:lang="en">레이아웃에 맞춤</title>
+            <title xml:lang="zh-TW">隨版面</title>
+        </color>
+        <color name="white">
+            <title xml:lang="ko">하얀색(기본)</title>
+            <title xml:lang="jp">白（デフォルト）</title>
+            <title xml:lang="zh-CN">白色（默认）</title>
+            <title xml:lang="en">White (default)</title>
+            <title xml:lang="zh-TW">白色(預設)</title>
+        </color>
+        <color name="black">
+            <title xml:lang="ko">검은색</title>
+            <title xml:lang="jp">黒</title>
+            <title xml:lang="en">Black</title>
+            <title xml:lang="zh-CN">黑色</title>
+            <title xml:lang="zh-TW">黑色</title>
+        </color>
+    </colorset>
+</skin>

widgets/navigator/skins/vertNavigator/css/black.css

@@ -0,0 +1,20 @@
+@charset "utf-8";
+.widgetMenuA{ position:relative; margin:0; padding:0; font-size:12px; line-height:1.2; border-top:1px solid;}
+.widgetMenuA li{ position:relative; list-style:none; border-bottom:1px solid; *zoom:1;}
+.widgetMenuA li sup{ font-size:10px; font-family:Tahoma; line-height:1; color:#888; font-weight:normal;}
+.widgetMenuA li li.active sup{ color:#ff1a1a;}
+.widgetMenuA li li{ padding:0; border:0;}
+.widgetMenuA li ul{ display:none; margin:0 0 10px 20px; padding:0;}
+.widgetMenuA li.active ul{ display:block;}
+.widgetMenuA li a{ position:relative; display:block; padding:7px 0 7px 10px; background-repeat:no-repeat; background-position:0 center; text-decoration:none !important;}
+.widgetMenuA li.active a{ font-weight:bold;}
+.widgetMenuA li.active li a{ font-weight:normal; padding:1px 0; background:none !important;}
+.widgetMenuA li li.active a{ color:#ff1a1a;}
+.widgetMenuA li.active li a:hover,
+.widgetMenuA li.active li a:active,
+.widgetMenuA li.active li a:focus{ text-decoration:underline !important;}
+
+.widgetMenuA{ border-color:#7f7f7f;}
+.widgetMenuA li{ border-color:#7f7f7f;}
+.widgetMenuA li a{ color:#999; background-image:url(../img/black/iconMenuAnormal.gif);}
+.widgetMenuA li.active a{ background-image:url(../img/black/iconMenuAactive.gif);}

widgets/navigator/skins/vertNavigator/css/white.css

@@ -0,0 +1,20 @@
+@charset "utf-8";
+.widgetMenuA{ position:relative; margin:0; padding:0; font-size:12px; line-height:1.2; border-top:1px solid;}
+.widgetMenuA li{ position:relative; list-style:none; border-bottom:1px solid; *zoom:1;}
+.widgetMenuA li sup{ font-size:10px; font-family:Tahoma; line-height:1; color:#888; font-weight:normal;}
+.widgetMenuA li li.active sup{ color:#ff1a1a;}
+.widgetMenuA li li{ padding:0; border:0;}
+.widgetMenuA li ul{ display:none; margin:0 0 10px 20px; padding:0;}
+.widgetMenuA li.active ul{ display:block;}
+.widgetMenuA li a{ position:relative; display:block; padding:7px 0 7px 10px; background-repeat:no-repeat; background-position:0 center; text-decoration:none !important;}
+.widgetMenuA li.active a{ font-weight:bold;}
+.widgetMenuA li.active li a{ font-weight:normal; padding:1px 0; background:none !important;}
+.widgetMenuA li li.active a{ color:#ff1a1a;}
+.widgetMenuA li.active li a:hover,
+.widgetMenuA li.active li a:active,
+.widgetMenuA li.active li a:focus{ text-decoration:underline !important;}
+
+.widgetMenuA{ border-color:#e5e5e5;}
+.widgetMenuA li{ border-color:#e5e5e5;}
+.widgetMenuA li a{ color:#333; background-image:url(../img/white/iconMenuAnormal.gif);}
+.widgetMenuA li.active a{ background-image:url(../img/white/iconMenuAactive.gif);}

widgets/navigator/skins/vertNavigator/js/navigator.js

@@ -0,0 +1,9 @@
+jQuery(function(){
+    jQuery('ul.widgetMenuA.dhtml').find('li')
+        .hover(function(){
+                jQuery('>ul',this).show();
+            }
+            ,function(){
+                jQuery('>ul',this).hide();
+            });
+});

widgets/navigator/skins/vertNavigator/navigator.html

@@ -0,0 +1,32 @@
+<!--@if($colorset == "black")-->
+    <!--%import("./css/black.css")-->
+<!--@elseif($colorset == "white")-->
+    <!--%import("./css/white.css")-->
+<!--@end-->
+
+{@ $_pDepth = 0;}
+<div class="widgetContainer">
+    <ul class="widgetMenuA dhtml">
+        <!--@foreach($widget_info->arranged_menu as $key => $val)-->
+            <!--@if($val->text)-->
+
+                <!--@if($_pDepth > $val->depth)-->
+                    <!--@for($i=$val->depth; $i<$_pDepth; $i++)-->
+                    </li>
+                </ul>
+                    <!--@end-->
+                    {@ $_pDepth = $val->depth}
+                <!--@end-->
+                    <li class="menu_{$val->node_srl}<!--@if($val->selected)--> active<!--@end-->">
+                        <a href="{$val->href}">{$val->text}</a>
+
+                    <!--@if($val->child_count)-->
+                        {@$_pDepth++}
+                        <ul style="display:<!--@if(!$val->selected)-->none<!--@else-->block<!--@end-->">
+                    <!--@else-->
+                    </li>
+                    <!--@end-->
+            <!--@end-->
+        <!--@end-->
+    </ul>
+</div>

widgets/navigator/skins/vertNavigator/skin.xml

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<skin version="0.2">
+    <title xml:lang="ko">세로 메뉴 출력 스킨</title>
+    <description xml:lang="ko">
+        지정된 메뉴 정보를 세로 출력하는 기본 위젯입니다.
+        DHTML기능을 사용으로 하시면 하위메뉴가 마우스 오버시에 레이어로 뜨게 되고 사용으로 하지 않으시면 바로 출력이 됩니다
+    </description>
+    <version>0.1</version>
+    <date>2009-02-10</date>
+    <link>http://www.zeroboard.com</link>
+
+    <author email_address="zero@zeroboard.com" link="http://www.zeroboard.com">
+        <name xml:lang="ko">zero</name>
+	<name xml:lang="zh-CN">zero</name>
+        <name xml:lang="zh-TW">zero</name>
+    </author>
+
+    <colorset>
+        <color name="layout">
+            <title xml:lang="ko">레이아웃에 맞춤</title>
+            <title xml:lang="jp">レイアウトに合わせる</title>
+            <title xml:lang="zh-CN">随布局</title>
+            <title xml:lang="en">레이아웃에 맞춤</title>
+            <title xml:lang="zh-TW">隨版面</title>
+        </color>
+        <color name="white">
+            <title xml:lang="ko">하얀색(기본)</title>
+            <title xml:lang="jp">白（デフォルト）</title>
+            <title xml:lang="zh-CN">白色（默认）</title>
+            <title xml:lang="en">White (default)</title>
+            <title xml:lang="zh-TW">白色(預設)</title>
+        </color>
+        <color name="black">
+            <title xml:lang="ko">검은색</title>
+            <title xml:lang="jp">黒</title>
+            <title xml:lang="en">Black</title>
+            <title xml:lang="zh-CN">黑色</title>
+            <title xml:lang="zh-TW">黑色</title>
+        </color>
+    </colorset>
+</skin>