Issue 2442. Start. Tree UI component prototype and backup 1.5.

git-svn-id: http://xe-core.googlecode.com/svn/branches/maserati@11238 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
ChanMyeong 2012-09-16 03:47:31 +00:00
parent e0158514db
commit e4008fd564
2 changed files with 692 additions and 174 deletions

View file

@ -0,0 +1,183 @@
<script>
xe.lang.confirm_delete = "{$lang->confirm_delete}";
xe.current_layout = {$current_layout};
jQuery( function() { jQuery('.grant_default').change( function(event) { doShowMenuGrantZone(); } ); doShowMenuGrantZone() } );
</script>
<load target="./js/menu_admin.js" usecdn="true" />
<load target="../../admin/tpl/js/sitemap.js" usecdn="true" />
<load target="./js/sitemap.js" usecdn="true" />
<div cond="$XE_VALIDATOR_MESSAGE" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
<p>{$XE_VALIDATOR_MESSAGE}</p>
</div>
<h1 class="h1">{$lang->menu_gnb_sub['siteMap']}</h1>
<block loop="$menu_list=>$key,$value">
{@$menuSrl = $value->menuSrl}
<form class="portlet siteMap" id="menu_{$menuSrl}" method="post" action="#menu_{$menuSrl}">
<input type="hidden" name="module" value="{$module}" />
<input type="hidden" name="act" value="procMenuAdminArrangeItem" />
<input type="hidden" name="menu_srl" value="{$menuSrl}" />
<input type="hidden" name="menu_item_srl" value="" />
<input type="hidden" name="success_return_url" value="{getUrl('', 'module', 'admin', 'act', 'dispMenuAdminSiteMap')}#menuTop_{$menuSrl}" />
<h2 class="h2" id="menuTop_{$menuSrl}"><input name="title" value="{$value->title}" /></h2>
<a href="#nav_{$key}" class="tgMap">{$lang->collapsing}/{$lang->expanding}</a>
<ul class="lined" id="nav_{$key}" cond="count($value->menuItems->list > 0)" <!--@if($_COOKIE['sitemap_toggle_#nav_'.$key])-->style="display:none;"<!--@end-->>
<block loop="$value->menuItems->list=>$key2,$value2">
{@$item = $value2}
<include target="sitemap.item.html" />
</block>
</ul>
<p class="btnArea">
<span class="btn"><a href="#editMenu" class="modalAnchor _add">{$lang->add_menu}...</a></span>
<span class="btn"><button value="procMenuAdminArrangeItem" name="act" type="submit">{$lang->cmd_save}</button></span>
<span class="etc">
<span class="btn"><button value="procMenuAdminDelete" name="act" type="submit" onclick="return confirmDelete();">{$lang->cmd_delete}</button></span>
<span class="btn"><a href="#remakeCache" onclick="doReloadTreeMenu('{$menuSrl}');return false;">{$lang->cmd_remake_cache}</a></span>
</span>
</p>
</form>
</block>
<form action="./" method="post" class="form">
<input type="hidden" name="module" value="{$module}" />
<input type="hidden" name="act" value="procMenuAdminInsert" />
<input type="hidden" name="title" value="{$lang->untitle}" />
<input type="hidden" name="success_return_url" value="{getUrl('', 'module', 'admin', 'act', 'dispMenuAdminSiteMap')}" />
<div class="btnArea">
<span class="btn medium"><button type="submit">{$lang->add_new_sitemap}</button></span>
</div>
</form>
<div class="modal" id="editMenu">
<div class="fg">
<form ruleset="insertMenuItem" id="editForm" action="./" method="post" enctype="multipart/form-data" class="form">
<input type="hidden" name="module" value="menu" />
<input type="hidden" name="act" value="procMenuAdminInsertItem" />
<input type="hidden" name="menu_srl" value="" />
<input type="hidden" name="menu_item_srl" value="{$menu_info->menu_srl}" />
<input type="hidden" name="parent_srl" value="{$menu_info->menu_srl}" />
<input type="hidden" name="module_srl" value="" />
<input type="hidden" name="success_return_url" value="{getUrl('', 'module', 'admin', 'act', 'dispMenuAdminSiteMap')}#menuTop_" />
<h2 class="h2"><span>{$lang->add_menu}</span><span>{$lang->edit_menu}</span></h2>
<ul>
<li>
<p class="q"><label for="name">{$lang->menu_name}({$lang->browser_title}) <em>*</em></label></p>
<div class="a multiLangEdit">
<input type="hidden" class="vLang" name="menu_name_key" />
<input type="text" class="vLang" id="name" name="menu_name" />
<!-- Multilingual -->
<div id="langEdit" class="langEdit tgContent">
<ul class="langList"></ul>
<div class="langInput">
<h2>{$lang->multilingual} <strong>{$lang->cmd_modify}...</strong> | <a href="#langEdit">{$lang->cmd_insert}</a></h2>
<ul>
{@
/* move current language to the top */
$a = array($lang_type=>$lang_supported[$lang_type]);
unset($lang_supported[$lang_type]);
$lang_supported = array_merge($a, $lang_supported);
}
<li loop="$lang_supported=>$code,$name" class="{$code}"><label for="{$code}_var1">{$name}</label> <input type="text" value="" id="{$code}_var1" /></li>
</ul>
<div class="action">
<div class="btnArea">
<span class="btn small"><input type="submit" value="{$lang->use}|{$lang->use_after_save}" /></span>
</div>
<p><a href="{getUrl('act','dispModuleAdminLangcode')}">{$lang->multilingual_manager}</a></p>
</div>
</div>
</div>
<!-- /Multilingual -->
<span class="desc"><a href="#langEdit" class="editUserLang tgAnchor">{$lang->cmd_set_multilingual}</a></span>
</div>
</li>
<li>
<p class="q">{$lang->module_or_url} <em>*</em></p>
<p class="a">
<input type="radio" name="cType" id="cModule" class="_typeCheck" value="CREATE" /> <label for="cModule">{$lang->create_module_in_menu}</label>
<input type="radio" name="cType" id="sModule" class="_typeCheck" value="SELECT" /> <label for="sModule">{$lang->select_module_in_menu}</label>
<input type="radio" name="cType" id="url" class="_typeCheck" value="URL" /> <label for="url">{$lang->menu_url}</label>
</p>
</li>
<li id="kindModule">
<p class="q"><label for="kModule">{$lang->select_module_in_menu} <em>*</em></label></p>
<p class="a">
<select style="width:290px" id="kModule" name="module_type">
<block loop="$module_list=>$key,$value">
<optgroup label="{$lang->page}" cond="$key=='page'">
<option value="ARTICLE">{$lang->page_type_name['ARTICLE']}</option>
<option value="WIDGET">{$lang->page_type_name['WIDGET']}</option>
<option value="OUTSIDE">{$lang->page_type_name['OUTSIDE']}</option>
</optgroup>
<option value="{$key}" cond="$key!='page'">{$value->title}</option>
</block>
</select>
<select style="width:290px" id="sModule_id" name="select_menu_url">
</select>
</p>
</li>
<li id="createModule">
<p class="q"><label for="cModule_id">{$lang->create_mid_in_menu} <em>*</em></label></p>
<div class="a">
<input type="text" id="cModule_id" name="create_menu_url" />
</div>
</li>
<li id="insertUrl">
<p class="q"><label for="link_url">{$lang->menu_url} <em>*</em></label></p>
<div class="a">
<input type="text" id="link_url" name="menu_url" value="http://" />
</div>
</li>
<li id="selectLayout">
<p class="q"><label for="layoutSrl">{$lang->layout} <em>*</em></label></p>
<div class="a">
<select name="layout_srl" id="layoutSrl">
<option value="0">{$lang->notuse}</option>
<option loop="$layout_list => $key, $val" value="{$val->layout_srl}" <!--@if($val->layout_srl == $current_layout)-->selected="selected"<!--@end-->>{$val->title} ({$val->layout})</option>
</select>
</div>
</li>
<li>
<p class="q">{$lang->about_menu_open_window} <em>*</em></p>
<p class="a">
<input type="radio" name="menu_open_window" id="self" value="N" /> <label for="self">{$lang->menu_self_window}</label>
<input type="radio" name="menu_open_window" id="blank" value="Y" /> <label for="blank">{$lang->menu_open_window}</label>
</p>
</li>
<li>
<p class="q">{$lang->menu_img_btn}</p>
<p class="a">
<span id="normal_btn_preview"></span><br />
<input type="file" name="menu_normal_btn" id="menu_normal_btn" /> <label for="menu_normal_btn">{$lang->menu_normal_btn}</label><br />
<span id="hover_btn_preview"></span><br />
<input type="file" name="menu_hover_btn" id="menu_hover_btn" /> <label for="menu_hover_btn">{$lang->menu_hover_btn}</label><br />
<span id="active_btn_preview"></span><br />
<input type="file" name="menu_active_btn" id="menu_active_btn" /> <label for="menu_active_btn">{$lang->menu_active_btn}</label>
</p>
</li>
<li>
<p class="q">{$lang->exposure_limits}</p>
<p class="a" id="groupList">
<select name="menu_grant_default" class="grant_default">
<option value="0" selected="selected">{$lang->grant_to_all}</option>
<option value="-1">{$lang->grant_to_login_user}</option>
<option value="">{$lang->grant_to_group}</option>
</select>
<div id="zone_menu_grant" style="display:none">
<block loop="$group_list=>$key,$value"><input type="checkbox" name="group_srls[]" id="group_srls_{$value->group_srl}" value="{$value->group_srl}" /> <label for="group_srls_{$value->group_srl}">{$value->title}</label></block>
</div>
</p>
</li>
<li>
<p class="q">{$lang->expand}</p>
<p class="a" id="expand">
<input type="checkbox" name="menu_expand" value="Y" /> {$lang->about_expand}
</p>
</li>
</ul>
<div class="btnArea">
<span class="btn"><input type="submit" value="{$lang->cmd_save}" /></span>
</div>
</form>
</div>
</div>

View file

@ -1,183 +1,518 @@
<script>
xe.lang.confirm_delete = "{$lang->confirm_delete}";
xe.current_layout = {$current_layout};
jQuery( function() { jQuery('.grant_default').change( function(event) { doShowMenuGrantZone(); } ); doShowMenuGrantZone() } );
</script>
<load target="./js/menu_admin.js" usecdn="true" />
<load target="../../admin/tpl/js/sitemap.js" usecdn="true" />
<load target="./js/sitemap.js" usecdn="true" />
<div class="x_page-header">
<h1>{$lang->menu_gnb_sub['siteMap']}</h1>
</div>
<div cond="$XE_VALIDATOR_MESSAGE" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
<p>{$XE_VALIDATOR_MESSAGE}</p>
</div>
<h1 class="h1">{$lang->menu_gnb_sub['siteMap']}</h1>
<block loop="$menu_list=>$key,$value">
{@$menuSrl = $value->menuSrl}
<form class="portlet siteMap" id="menu_{$menuSrl}" method="post" action="#menu_{$menuSrl}">
<input type="hidden" name="module" value="{$module}" />
<input type="hidden" name="act" value="procMenuAdminArrangeItem" />
<input type="hidden" name="menu_srl" value="{$menuSrl}" />
<input type="hidden" name="menu_item_srl" value="" />
<input type="hidden" name="success_return_url" value="{getUrl('', 'module', 'admin', 'act', 'dispMenuAdminSiteMap')}#menuTop_{$menuSrl}" />
<h2 class="h2" id="menuTop_{$menuSrl}"><input name="title" value="{$value->title}" /></h2>
<a href="#nav_{$key}" class="tgMap">{$lang->collapsing}/{$lang->expanding}</a>
<ul class="lined" id="nav_{$key}" cond="count($value->menuItems->list > 0)" <!--@if($_COOKIE['sitemap_toggle_#nav_'.$key])-->style="display:none;"<!--@end-->>
<block loop="$value->menuItems->list=>$key2,$value2">
{@$item = $value2}
<include target="sitemap.item.html" />
</block>
</ul>
<p class="btnArea">
<span class="btn"><a href="#editMenu" class="modalAnchor _add">{$lang->add_menu}...</a></span>
<span class="btn"><button value="procMenuAdminArrangeItem" name="act" type="submit">{$lang->cmd_save}</button></span>
<span class="etc">
<span class="btn"><button value="procMenuAdminDelete" name="act" type="submit" onclick="return confirmDelete();">{$lang->cmd_delete}</button></span>
<span class="btn"><a href="#remakeCache" onclick="doReloadTreeMenu('{$menuSrl}');return false;">{$lang->cmd_remake_cache}</a></span>
</span>
</p>
</form>
</block>
<form action="./" method="post" class="form">
<input type="hidden" name="module" value="{$module}" />
<input type="hidden" name="act" value="procMenuAdminInsert" />
<input type="hidden" name="title" value="{$lang->untitle}" />
<input type="hidden" name="success_return_url" value="{getUrl('', 'module', 'admin', 'act', 'dispMenuAdminSiteMap')}" />
<div class="btnArea">
<span class="btn medium"><button type="submit">{$lang->add_new_sitemap}</button></span>
</div>
</form>
<div class="modal" id="editMenu">
<div class="fg">
<form ruleset="insertMenuItem" id="editForm" action="./" method="post" enctype="multipart/form-data" class="form">
<input type="hidden" name="module" value="menu" />
<input type="hidden" name="act" value="procMenuAdminInsertItem" />
<input type="hidden" name="menu_srl" value="" />
<input type="hidden" name="menu_item_srl" value="{$menu_info->menu_srl}" />
<input type="hidden" name="parent_srl" value="{$menu_info->menu_srl}" />
<input type="hidden" name="module_srl" value="" />
<input type="hidden" name="success_return_url" value="{getUrl('', 'module', 'admin', 'act', 'dispMenuAdminSiteMap')}#menuTop_" />
<h2 class="h2"><span>{$lang->add_menu}</span><span>{$lang->edit_menu}</span></h2>
<div id="site">
<div class="col map">
<section class="mapi">
<ul>
<li>
<p class="q"><label for="name">{$lang->menu_name}({$lang->browser_title}) <em>*</em></label></p>
<div class="a multiLangEdit">
<input type="hidden" class="vLang" name="menu_name_key" />
<input type="text" class="vLang" id="name" name="menu_name" />
<!-- Multilingual -->
<div id="langEdit" class="langEdit tgContent">
<ul class="langList"></ul>
<div class="langInput">
<h2>{$lang->multilingual} <strong>{$lang->cmd_modify}...</strong> | <a href="#langEdit">{$lang->cmd_insert}</a></h2>
<ul>
{@
/* move current language to the top */
$a = array($lang_type=>$lang_supported[$lang_type]);
unset($lang_supported[$lang_type]);
$lang_supported = array_merge($a, $lang_supported);
}
<li loop="$lang_supported=>$code,$name" class="{$code}"><label for="{$code}_var1">{$name}</label> <input type="text" value="" id="{$code}_var1" /></li>
</ul>
<div class="action">
<div class="btnArea">
<span class="btn small"><input type="submit" value="{$lang->use}|{$lang->use_after_save}" /></span>
</div>
<p><a href="{getUrl('act','dispModuleAdminLangcode')}">{$lang->multilingual_manager}</a></p>
</div>
<li class="root">
<div class="item">
<strong>기본 사이트맵</strong>
<span class="side">
<a href="#add" data-toggle="#add">메뉴추가</a>
<a href="#info" data-toggle="#info">속성편집</a>
</span>
</div>
<ul>
<li>
<i class="v"></i><i class="h"></i>
<div class="item">
<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴1</a>
<span class="side">
<a href="#add" data-toggle="#add">메뉴추가</a>
<a href="#info" data-toggle="#info">속성편집</a>
</span>
</div>
</div>
<!-- /Multilingual -->
<span class="desc"><a href="#langEdit" class="editUserLang tgAnchor">{$lang->cmd_set_multilingual}</a></span>
</div>
</li>
<li>
<p class="q">{$lang->module_or_url} <em>*</em></p>
<p class="a">
<input type="radio" name="cType" id="cModule" class="_typeCheck" value="CREATE" /> <label for="cModule">{$lang->create_module_in_menu}</label>
<input type="radio" name="cType" id="sModule" class="_typeCheck" value="SELECT" /> <label for="sModule">{$lang->select_module_in_menu}</label>
<input type="radio" name="cType" id="url" class="_typeCheck" value="URL" /> <label for="url">{$lang->menu_url}</label>
</p>
</li>
<li id="kindModule">
<p class="q"><label for="kModule">{$lang->select_module_in_menu} <em>*</em></label></p>
<p class="a">
<select style="width:290px" id="kModule" name="module_type">
<block loop="$module_list=>$key,$value">
<optgroup label="{$lang->page}" cond="$key=='page'">
<option value="ARTICLE">{$lang->page_type_name['ARTICLE']}</option>
<option value="WIDGET">{$lang->page_type_name['WIDGET']}</option>
<option value="OUTSIDE">{$lang->page_type_name['OUTSIDE']}</option>
</optgroup>
<option value="{$key}" cond="$key!='page'">{$value->title}</option>
</block>
</select>
<select style="width:290px" id="sModule_id" name="select_menu_url">
</select>
</p>
</li>
<li id="createModule">
<p class="q"><label for="cModule_id">{$lang->create_mid_in_menu} <em>*</em></label></p>
<div class="a">
<input type="text" id="cModule_id" name="create_menu_url" />
</div>
</li>
<li id="insertUrl">
<p class="q"><label for="link_url">{$lang->menu_url} <em>*</em></label></p>
<div class="a">
<input type="text" id="link_url" name="menu_url" value="http://" />
</div>
</li>
<li id="selectLayout">
<p class="q"><label for="layoutSrl">{$lang->layout} <em>*</em></label></p>
<div class="a">
<select name="layout_srl" id="layoutSrl">
<option value="0">{$lang->notuse}</option>
<option loop="$layout_list => $key, $val" value="{$val->layout_srl}" <!--@if($val->layout_srl == $current_layout)-->selected="selected"<!--@end-->>{$val->title} ({$val->layout})</option>
</select>
</div>
</li>
<li>
<p class="q">{$lang->about_menu_open_window} <em>*</em></p>
<p class="a">
<input type="radio" name="menu_open_window" id="self" value="N" /> <label for="self">{$lang->menu_self_window}</label>
<input type="radio" name="menu_open_window" id="blank" value="Y" /> <label for="blank">{$lang->menu_open_window}</label>
</p>
</li>
<li>
<p class="q">{$lang->menu_img_btn}</p>
<p class="a">
<span id="normal_btn_preview"></span><br />
<input type="file" name="menu_normal_btn" id="menu_normal_btn" /> <label for="menu_normal_btn">{$lang->menu_normal_btn}</label><br />
<span id="hover_btn_preview"></span><br />
<input type="file" name="menu_hover_btn" id="menu_hover_btn" /> <label for="menu_hover_btn">{$lang->menu_hover_btn}</label><br />
<span id="active_btn_preview"></span><br />
<input type="file" name="menu_active_btn" id="menu_active_btn" /> <label for="menu_active_btn">{$lang->menu_active_btn}</label>
</p>
</li>
<li>
<p class="q">{$lang->exposure_limits}</p>
<p class="a" id="groupList">
<select name="menu_grant_default" class="grant_default">
<option value="0" selected="selected">{$lang->grant_to_all}</option>
<option value="-1">{$lang->grant_to_login_user}</option>
<option value="">{$lang->grant_to_group}</option>
</select>
<div id="zone_menu_grant" style="display:none">
<block loop="$group_list=>$key,$value"><input type="checkbox" name="group_srls[]" id="group_srls_{$value->group_srl}" value="{$value->group_srl}" /> <label for="group_srls_{$value->group_srl}">{$value->title}</label></block>
</div>
</p>
</li>
<li>
<p class="q">{$lang->expand}</p>
<p class="a" id="expand">
<input type="checkbox" name="menu_expand" value="Y" /> {$lang->about_expand}
</p>
<ul>
<li>
<i class="v"></i><i class="h"></i>
<div class="item">
<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴1-1</a>
<span class="side">
<a href="#add" data-toggle="#add">메뉴추가</a>
<a href="#info" data-toggle="#info">속성편집</a>
</span>
</div>
<ul>
<li>
<i class="v"></i><i class="h"></i>
<div class="item">
<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴1-1-1</a>
<span class="side">
<a href="#add" data-toggle="#add">메뉴추가</a>
<a href="#info" data-toggle="#info">속성편집</a>
</span>
</div>
<ul>
<li>
<i class="v"></i><i class="h"></i>
<div class="item">
<a href="#" class="tx"><i class="x_icon-file"></i> 메뉴1-1-1-1</a>
<span class="side">
<a href="#add" data-toggle="#add">메뉴추가</a>
<a href="#info" data-toggle="#info">속성편집</a>
</span>
</div>
<ul>
<li>
<i class="v"></i><i class="h"></i>
<div class="item">
<a href="#" class="tx"><i class="x_icon-file"></i> 메뉴1-1-1-1-1</a>
<span class="side">
<a href="#add" data-toggle="#add">메뉴추가</a>
<a href="#info" data-toggle="#info">속성편집</a>
</span>
</div>
<ul>
<li>
<i class="v"></i><i class="h"></i>
<div class="item">
<a href="#" class="tx"><i class="x_icon-file"></i> 메뉴1-1-1-1-1-1</a>
<span class="side">
<a href="#add" data-toggle="#add">메뉴추가</a>
<a href="#info" data-toggle="#info">속성편집</a>
</span>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li>
<i class="v"></i><i class="h"></i>
<div class="item">
<a href="#" class="tx"><i class="x_icon-file"></i> 메뉴1-1-1-2</a>
<span class="side">
<a href="#add" data-toggle="#add">메뉴추가</a>
<a href="#info" data-toggle="#info">속성편집</a>
</span>
</div>
<ul>
<li>
<i class="v"></i><i class="h"></i>
<div class="item">
<a href="#" class="tx"><i class="x_icon-file"></i> 메뉴1-1-1-2-1</a>
<span class="side">
<a href="#add" data-toggle="#add">메뉴추가</a>
<a href="#info" data-toggle="#info">속성편집</a>
</span>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li>
<i class="v"></i><i class="h"></i>
<div class="item">
<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴1-1-2</a>
<span class="side">
<a href="#add" data-toggle="#add">메뉴추가</a>
<a href="#info" data-toggle="#info">속성편집</a>
</span>
</div>
</li>
</ul>
</li>
<li>
<i class="v"></i><i class="h"></i>
<div class="item">
<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴1-2</a>
<span class="side">
<a href="#add" data-toggle="#add">메뉴추가</a>
<a href="#info" data-toggle="#info">속성편집</a>
</span>
</div>
</li>
</ul>
</li>
<li>
<i class="v"></i><i class="h"></i>
<div class="item">
<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴2</a>
<span class="side">
<a href="#add" data-toggle="#add">메뉴추가</a>
<a href="#info" data-toggle="#info">속성편집</a>
</span>
</div>
<ul>
<li>
<i class="v"></i><i class="h"></i>
<div class="item">
<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴2-1</a>
<span class="side">
<a href="#add" data-toggle="#add">메뉴추가</a>
<a href="#info" data-toggle="#info">속성편집</a>
</span>
</div>
</li>
<li>
<i class="v"></i><i class="h"></i>
<div class="item">
<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴2-2</a>
<span class="side">
<a href="#add" data-toggle="#add">메뉴추가</a>
<a href="#info" data-toggle="#info">속성편집</a>
</span>
</div>
</li>
<li>
<i class="v"></i><i class="h"></i>
<div class="item">
<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴2-3</a>
<span class="side">
<a href="#add" data-toggle="#add">메뉴추가</a>
<a href="#info" data-toggle="#info">속성편집</a>
</span>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<div class="btnArea">
<span class="btn"><input type="submit" value="{$lang->cmd_save}" /></span>
</div>
</form>
</section>
<section class="mapi">
<ul>
<li class="root">
<div class="item">
<strong>기본 사이트맵</strong>
<span class="side">
<a href="#add" data-toggle="#add">메뉴추가</a>
<a href="#info" data-toggle="#info">속성편집</a>
</span>
</div>
<ul>
<li>
<i class="v"></i><i class="h"></i>
<div class="item">
<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴1</a>
<span class="side">
<a href="#add" data-toggle="#add">메뉴추가</a>
<a href="#info" data-toggle="#info">속성편집</a>
</span>
</div>
<ul>
<li>
<i class="v"></i><i class="h"></i>
<div class="item">
<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴1-1</a>
<span class="side">
<a href="#add" data-toggle="#add">메뉴추가</a>
<a href="#info" data-toggle="#info">속성편집</a>
</span>
</div>
<ul>
<li>
<i class="v"></i><i class="h"></i>
<div class="item">
<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴1-1-1</a>
<span class="side">
<a href="#add" data-toggle="#add">메뉴추가</a>
<a href="#info" data-toggle="#info">속성편집</a>
</span>
</div>
<ul>
<li>
<i class="v"></i><i class="h"></i>
<div class="item">
<a href="#" class="tx"><i class="x_icon-file"></i> 메뉴1-1-1-1</a>
<span class="side">
<a href="#add" data-toggle="#add">메뉴추가</a>
<a href="#info" data-toggle="#info">속성편집</a>
</span>
</div>
<ul>
<li>
<i class="v"></i><i class="h"></i>
<div class="item">
<a href="#" class="tx"><i class="x_icon-file"></i> 메뉴1-1-1-1-1</a>
<span class="side">
<a href="#add" data-toggle="#add">메뉴추가</a>
<a href="#info" data-toggle="#info">속성편집</a>
</span>
</div>
<ul>
<li>
<i class="v"></i><i class="h"></i>
<div class="item">
<a href="#" class="tx"><i class="x_icon-file"></i> 메뉴1-1-1-1-1-1</a>
<span class="side">
<a href="#add" data-toggle="#add">메뉴추가</a>
<a href="#info" data-toggle="#info">속성편집</a>
</span>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li>
<i class="v"></i><i class="h"></i>
<div class="item">
<a href="#" class="tx"><i class="x_icon-file"></i> 메뉴1-1-1-2</a>
<span class="side">
<a href="#add" data-toggle="#add">메뉴추가</a>
<a href="#info" data-toggle="#info">속성편집</a>
</span>
</div>
<ul>
<li>
<i class="v"></i><i class="h"></i>
<div class="item">
<a href="#" class="tx"><i class="x_icon-file"></i> 메뉴1-1-1-2-1</a>
<span class="side">
<a href="#add" data-toggle="#add">메뉴추가</a>
<a href="#info" data-toggle="#info">속성편집</a>
</span>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li>
<i class="v"></i><i class="h"></i>
<div class="item">
<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴1-1-2</a>
<span class="side">
<a href="#add" data-toggle="#add">메뉴추가</a>
<a href="#info" data-toggle="#info">속성편집</a>
</span>
</div>
</li>
</ul>
</li>
<li>
<i class="v"></i><i class="h"></i>
<div class="item">
<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴1-2</a>
<span class="side">
<a href="#add" data-toggle="#add">메뉴추가</a>
<a href="#info" data-toggle="#info">속성편집</a>
</span>
</div>
</li>
</ul>
</li>
<li>
<i class="v"></i><i class="h"></i>
<div class="item">
<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴2</a>
<span class="side">
<a href="#add" data-toggle="#add">메뉴추가</a>
<a href="#info" data-toggle="#info">속성편집</a>
</span>
</div>
<ul>
<li>
<i class="v"></i><i class="h"></i>
<div class="item">
<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴2-1</a>
<span class="side">
<a href="#add" data-toggle="#add">메뉴추가</a>
<a href="#info" data-toggle="#info">속성편집</a>
</span>
</div>
</li>
<li>
<i class="v"></i><i class="h"></i>
<div class="item">
<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴2-2</a>
<span class="side">
<a href="#add" data-toggle="#add">메뉴추가</a>
<a href="#info" data-toggle="#info">속성편집</a>
</span>
</div>
</li>
<li>
<i class="v"></i><i class="h"></i>
<div class="item">
<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴2-3</a>
<span class="side">
<a href="#add" data-toggle="#add">메뉴추가</a>
<a href="#info" data-toggle="#info">속성편집</a>
</span>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
<div class="x_btn-group" style="margin:15px 0;padding:10px;border-top:1px solid #ccc;text-align:right">
<button type="button" class="x_btn x_btn-small x_btn-inverse"><i class="x_icon-plus x_icon-white"></i> 사이트맵 추가</button>
</div>
</div>
<div class="col" id="@">
...
</div>
</div>
<style>
#site{position:relative;overflow-x:auto;overflow-y:hidden}
#site>.col{position:relative;float:left;height:100%;padding:0 10px;overflow-y:auto;overflow-x:hidden;border-left:1px solid #ddd}
#site>.col:first-child{border:0;padding-left:0}
/* .mapi * */
.mapi{margin:0 0 15px 0;min-width:200px}
.mapi ul{margin:0;padding:0;list-style:none}
.mapi li{padding:0 80px 0 0;white-space:nowrap;position:relative;line-height:30px;border-radius:3px;vertical-align:top}
.mapi li>ul{margin:0 -80px 0 0}
.mapi a{text-decoration:none}
.mapi>ul{padding:1px}
/* .root */
.mapi .root>ul{margin-top:10px}
.mapi .root>.item{position:relative;border-bottom:1px solid #ccc;margin:0 -80px 0 0;zoom:1}
.mapi .root>.item>strong{font-size:16px}
/* li>i.v || li>i.h */
.mapi .v,
.mapi .h{position:absolute;border:0;border-style:dotted;border-color:#ccc;overflow:hidden}
.mapi .v{width:0;top:30px;border-left-width:1px;display:none}
.mapi .h{width:14px;height:0;top:15px;border-top-width:1px}
.mapi .open>.v{display:block}
.mapi .hover .v,
.mapi .hover li>.h{border:1px solid #666}
.mapi .hover>.item,
.mapi .selected>.item{background:#666}
.mapi .root>ul>li>i.h{display:none}
/* li>.item */
.mapi .root li>.item{position:relative;z-index:2;border-radius:3px;margin:0 -80px 0 0;padding:0 80px 0 0;zoom:1}
.mapi .selected>.item{opacity:.75;filter:alpha(opacity=75)}
/* li>.item>.tx */
.mapi .tx{position:relative;z-index:2;display:block;line-height:30px;padding-right:30px;color:#000}
.mapi .hover>.item>.tx,
.mapi .selected>.item>.tx{color:#fff}
/* li>.item>a.tx */
.mapi .root>ul>li>.item>a{padding-left:24px}
.mapi .root>ul>li>ul>li>.item>a{padding-left:48px}
.mapi .root>ul>li>ul>li>ul>li>.item>a{padding-left:72px}
.mapi .root>ul>li>ul>li>ul>li>ul>li>.item>a{padding-left:96px}
.mapi .root>ul>li>ul>li>ul>li>ul>li>ul>li>.item>a{padding-left:120px}
.mapi .root>ul>li>ul>li>ul>li>ul>li>ul>li>ul>li>.item>a{padding-left:144px}
.mapi .root>ul>li>ul>li>ul>li>ul>li>ul>li>ul>li>ul>li>.item>a{padding-left:168px}
.mapi .root>ul>li>ul>li>ul>li>ul>li>ul>li>ul>li>ul>li>ul>li>.item>a{padding-left:192px}
.mapi .root>ul>li>ul>li>ul>li>ul>li>ul>li>ul>li>ul>li>ul>li>ul>li>.item>a{padding-left:216px}
/* li>.item>.tx>i */
.mapi .tx>i[class^="x_icon-"]{position:relative;left:-20px;margin:0 -20px 0 0;opacity:.5;filter:alpha(opacity=50)}
.mapi .hover>.item>.tx>i[class*="-white"],
.mapi .selected>.item>.tx>i[class*="-white"]{opacity:1;filter:alpha(opacity=100)}
/* li>.item>.side */
.mapi .side{position:absolute;z-index:2;top:3px;right:3px;line-height:0}
.mapi .side>a{display:inline-block;border-radius:3px;width:24px;height:24px;overflow:hidden;line-height:0;text-indent:24px;background:#94A55C url({getUrl('')}common/img/glyphicons-halflings-white.png) no-repeat}
.mapi .side>a[href="#add"]{background-position:5px -91px}
.mapi .side>a[href="#info"]{background-position:-427px 5px}
.mapi .side>a:hover,
.mapi .side>a:focus,
.mapi .side>a.active{background-color:#333}
/* li>.item>ul */
.mapi .root>ul ul{display:none}
.mapi .root>ul li.open>ul{display:block}
</style>
<!--[if IE 7]>
<script>
jQuery(function($){
// IE .col width bug fix
$('.col').each(function(){
var $this = $(this);
setTimeout(function(){
var childW = $this.children().width();
$this.width(childW);
},0);
});
});
</script>
<![endif]-->
<script>
//<![CDATA[
jQuery(function($){
// Set #site height fix
$(window).resize(function(){
var wHeigh = $(window).height();
var $site = $('#site');
$site.height(wHeigh - 270);
}).resize();
// Draw .h/.v line and display file/folder icon
var $mapi = $('.map .root li');
$mapi.addClass('open');
function drawMap(){
$mapi.each(function(){
var $this = $(this);
var verticalX = parseInt($this.find('>.item>.tx').css('paddingLeft'));
// Draw line
$this.find('>.h').css({ // Horizontal line position
left: verticalX -39
});
var submenu = $this.find('>ul').length;
var hasopen = $this.hasClass('open');
if(submenu){ // Vertical line position
var verticalH = parseInt($this.height())-15;
var removeH = parseInt($this.find('>ul>li:last-child').height());
$this.find('>.v').css({
left: verticalX -15,
height: verticalH - removeH
});
$this.find('>.item>.tx>i').removeClass('x_icon-file'); // Remove file icon
} else {
$this.find('>.v').remove();
}
// Display icon
var folderOpen = 'x_icon-folder-open';
var folderClose = 'x_icon-folder-close';
if(submenu && hasopen){
$this.find('>.item>.tx>i').removeClass(folderClose).addClass(folderOpen);
} else if(submenu && !hasopen) {
$this.find('>.item>.tx>i').removeClass(folderOpen).addClass(folderClose);
}
});
}
drawMap();
// li.hover class toggle
$mapi.bind({
mouseover: function(event){
$(this).addClass('hover');
$(this).not('.selected').find('>.item>.tx>i').addClass('x_icon-white');
event.stopPropagation();
},
mouseout: function(event){
$(this).removeClass('hover');
$(this).not('.selected').find('>.item>.tx>i').removeClass('x_icon-white');
event.stopPropagation();
}
});
// a.tx submenu toggle
$mapi.find('>.item>.tx').click(function(){
$(this).closest('li').toggleClass('open');
drawMap();
return false;
});
// li.selected and .side>a toggle
var $mapi = $('.map li');
$mapi.find('>.item>.side>a')
.click(function(){
var $this = $(this);
var iconWhite = 'x_icon-white';
$mapi.removeClass('selected').find('>.item>.side>a').not($this).removeClass('active');
$mapi.find('>.item').not($this.closest('.item')).find('>.tx>i').removeClass(iconWhite);
$this.toggleClass('active').siblings().removeClass('active');
if($this.parent('.side').children('a.active').length){
$this.closest('li:not(".root")').addClass('selected').find('>.item>.tx>i').addClass(iconWhite);
}
})
.hover(
function(){
var $this = $(this);
var title = $this.text();
$this.attr('title', title);
},
function(){
var $this = $(this);
$this.removeAttr('title');
}
);
});
//]]>
</script>