mirror of
https://github.com/Lastorder-DC/rhymix.git
synced 2026-01-26 06:39:56 +09:00
Issue 2444. Tree component UI update.
git-svn-id: http://xe-core.googlecode.com/svn/branches/maserati@11310 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
ChanMyeong
parent
56571aa6ef
commit
66cdae394f
4 changed files with 73 additions and 439 deletions
|
|
@ -21,7 +21,7 @@
|
|||
</script>
|
||||
<script id="tmpl_menuTreeNode" type="text/x-jquery-tmpl">
|
||||
<li id="${MenuId}">
|
||||
<a href="#" class="tx">${MenuTitle}</a>
|
||||
<a href="#">${MenuTitle}</a>
|
||||
<span class="side">
|
||||
<button data-toggle="#add">메뉴추가</button>
|
||||
<button data-toggle="#info">속성편집</button>
|
||||
|
|
@ -34,346 +34,6 @@
|
|||
<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 map">
|
||||
<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 <i class="x_icon-home"></i></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>
|
||||
<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 0;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="add">
|
||||
<section>
|
||||
<h1>메뉴 추가</h1>
|
||||
|
|
@ -524,62 +184,31 @@
|
|||
.col>*>ul{margin:0;padding:0;list-style:none}
|
||||
.col>.x_close{position:absolute;top:0;right:0;width:24px;height:24px}
|
||||
/* .mapi * */
|
||||
.mapi{margin:0 0 15px 0;min-width:200px}
|
||||
.mapi{margin:0 0 15px 0;min-width:200px;background-color:transparent !important}
|
||||
.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 li>ul{margin:0}
|
||||
.mapi a{text-decoration:none}
|
||||
.mapi>ul{padding:1px}
|
||||
/* .root */
|
||||
.mapi .root{margin-top:15px;border:0 !important}
|
||||
.mapi .root:first-child{margin-top:0}
|
||||
.mapi .root>ul{margin-top:10px}
|
||||
.mapi .root>.item{position:relative;border-bottom:2px solid #666;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-"]:first-child{position:relative;left:-20px;margin:0 -20px 0 0;opacity:.5;filter:alpha(opacity=50)}
|
||||
.mapi .tx>i[class^="x_icon-home"]{opacity:.75;filter:alpha(opacity=75)}
|
||||
.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>button{border:0;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>button[data-toggle="#add"]{background-position:5px -91px}
|
||||
.mapi .side>button[data-toggle="#info"]{background-position:-427px 5px}
|
||||
.mapi>ul>li{margin-top:30px;position:relative}
|
||||
.mapi>ul>li:before{ content:"";display:block;border-top:1px dashed #ccc;position:relative;top:-15px}
|
||||
.mapi>ul>li:first-child{margin-top:0;border:0}
|
||||
.mapi>ul>li:first-child:before{ content:normal}
|
||||
.mapi>ul>li>a{ font-weight:bold}
|
||||
/* li>a */
|
||||
.mapi li>a{border:0 !important; padding:0 8px !important; margin:0 60px 0 0; border-radius:3px; position:relative;z-index:2;height:23px;line-height:23px;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s}
|
||||
.mapi .x_icon-home{opacity:.5;filter:alpha(opacity=50)}
|
||||
.mapi .jstree-hovered>.x_icon-home{background-image:url({getUrl('')}common/img/glyphicons-halflings-white.png);opacity:1;filter:alpha(opacity=100)}
|
||||
/* li>.side */
|
||||
.mapi .side{position:absolute;z-index:2;top:0;right:0;line-height:0}
|
||||
.mapi .side>button{border:0;border-radius:3px;width:23px;height:23px;overflow:hidden;line-height:0;text-indent:24px;background:url({getUrl('')}common/img/glyphicons-halflings.png) no-repeat;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s}
|
||||
.mapi .side>button[data-toggle="#add"]{background-position:4px -91px}
|
||||
.mapi .side>button[data-toggle="#info"]{background-position:-428px 5px}
|
||||
.mapi .side>button:hover,
|
||||
.mapi .side>button:focus,
|
||||
.mapi .side>button.active{background-color:#333}
|
||||
/* li>.item>ul */
|
||||
.mapi .root>ul ul{display:none}
|
||||
.mapi .root>ul li.open>ul{display:block}
|
||||
.mapi .side>button:focus{background-color:#333;background-image:url({getUrl('')}common/img/glyphicons-halflings-white.png)}
|
||||
/* Plugin style override */
|
||||
.mapi a>.jstree-icon{display:none}
|
||||
/* Add */
|
||||
#add li{border-top:1px solid #ddd;position:relative;white-space:nowrap}
|
||||
#add li:first-child{border-top:0}
|
||||
|
|
@ -745,7 +374,7 @@ function createTreeMarkup(aNode){
|
|||
sText = sText + " ${h}";
|
||||
}
|
||||
|
||||
sResult += $.tmpl( "menuTreeNode", {MenuTitle:sText,MenuId:sNodeSrl,SubTree:sSubTree} ).get()[0].outerHTML.replace("${s}", "<i class='icon-share-alt'></i>").replace("${h}", "<i class='x_icon-home'></i>");
|
||||
sResult += $.tmpl( "menuTreeNode", {MenuTitle:sText,MenuId:sNodeSrl,SubTree:sSubTree} ).get()[0].outerHTML.replace("${s}", "<i class='icon-share-alt'></i>").replace("${h}", "<i class='x_icon-home' title='Home Page'>HOME</i>");
|
||||
}
|
||||
|
||||
return $.tmpl( "menuTree", {Nodes:sResult} ).get()[0].outerHTML;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue