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 2012-09-18 09:09:59 +00:00
parent 56571aa6ef
commit 66cdae394f
4 changed files with 73 additions and 439 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 4.7 KiB

Before After
Before After

View file

@ -5,70 +5,75 @@
*/
.jstree-default li,
.jstree-default ins { background-image:url("d.png"); background-repeat:no-repeat; background-color:transparent; }
.jstree-default li { background-position:-90px 0; background-repeat:repeat-y; }
.jstree-default li.jstree-last { background:transparent; }
.jstree-default .jstree-open > ins { background-position:-72px 0; }
.jstree-default .jstree-closed > ins { background-position:-54px 0; }
.jstree-default .jstree-leaf > ins { background-position:-36px 0; }
.jstree-default ins{background-image:url("d.png"); background-repeat:no-repeat; background-color:transparent}
.jstree-default li{background-position:-90px 10px; background-repeat:repeat-y}
.jstree-default .jstree-open> ins,
.jstree-default .jstree-closed> ins{cursor:pointer}
.jstree-default .jstree-open>ins{background-position:-72px 0}
.jstree-default .jstree-closed>ins{background-position:-54px 0}
.jstree-default .jstree-leaf>ins{background-position:-36px 0; vertical-align:top}
.jstree-default .jstree-hovered { background:#e7f4f9; border:1px solid #d8f0fa; padding:0 2px 0 1px; }
.jstree-default .jstree-clicked { background:#beebff; border:1px solid #99defd; padding:0 2px 0 1px; }
.jstree-default a .jstree-icon { background-position:-56px -19px; }
.jstree-default a.jstree-loading .jstree-icon { background:url("throbber.gif") center center no-repeat !important; }
.jstree-default>ul>li,
.jstree-default li.jstree-last{background:transparent}
.jstree-default>ul>li>ins{background-position:-54px -36px !important;vertical-align:baseline !important}
.jstree-default.jstree-focused { background:#ffffee; }
.jstree-default .jstree-hovered{background:#666;color:#fff;}
.jstree-default .jstree-clicked{background:#444;color:#fff}
.jstree-default a .jstree-icon{background-position:-56px -19px}
.jstree-default a.jstree-loading .jstree-icon{background:url("throbber.gif") center center no-repeat !important}
.jstree-default.jstree-focused{background:#ffffee}
.jstree-default .jstree-no-dots li,
.jstree-default .jstree-no-dots .jstree-leaf > ins { background:transparent; }
.jstree-default .jstree-no-dots .jstree-open > ins { background-position:-18px 0; }
.jstree-default .jstree-no-dots .jstree-closed > ins { background-position:0 0; }
.jstree-default .jstree-no-dots .jstree-leaf>ins{background:transparent}
.jstree-default .jstree-no-dots .jstree-open>ins{background-position:-18px 0}
.jstree-default .jstree-no-dots .jstree-closed>ins{background-position:0 0}
.jstree-default .jstree-no-icons a .jstree-icon { display:none; }
.jstree-default .jstree-no-icons a .jstree-icon{display:none}
.jstree-default .jstree-search { font-style:italic; }
.jstree-default .jstree-search{font-style:italic}
.jstree-default .jstree-no-icons .jstree-checkbox { display:inline-block; }
.jstree-default .jstree-no-checkboxes .jstree-checkbox { display:none !important; }
.jstree-default .jstree-checked > a > .jstree-checkbox { background-position:-38px -19px; }
.jstree-default .jstree-unchecked > a > .jstree-checkbox { background-position:-2px -19px; }
.jstree-default .jstree-undetermined > a > .jstree-checkbox { background-position:-20px -19px; }
.jstree-default .jstree-checked > a > .jstree-checkbox:hover { background-position:-38px -37px; }
.jstree-default .jstree-unchecked > a > .jstree-checkbox:hover { background-position:-2px -37px; }
.jstree-default .jstree-undetermined > a > .jstree-checkbox:hover { background-position:-20px -37px; }
.jstree-default .jstree-no-icons .jstree-checkbox{display:inline-block}
.jstree-default .jstree-no-checkboxes .jstree-checkbox{display:none !important}
.jstree-default .jstree-checked>a>.jstree-checkbox{background-position:-38px -19px}
.jstree-default .jstree-unchecked>a>.jstree-checkbox{background-position:-2px -19px}
.jstree-default .jstree-undetermined>a>.jstree-checkbox{background-position:-20px -19px}
.jstree-default .jstree-checked>a>.jstree-checkbox:hover{background-position:-38px -37px}
.jstree-default .jstree-unchecked>a>.jstree-checkbox:hover{background-position:-2px -37px}
.jstree-default .jstree-undetermined>a>.jstree-checkbox:hover{background-position:-20px -37px}
#vakata-dragged.jstree-default ins { background:transparent !important; }
#vakata-dragged.jstree-default .jstree-ok { background:url("d.png") -2px -53px no-repeat !important; }
#vakata-dragged.jstree-default .jstree-invalid { background:url("d.png") -18px -53px no-repeat !important; }
#jstree-marker.jstree-default { background:url("d.png") -41px -57px no-repeat !important; text-indent:-100px; }
#vakata-dragged.jstree-default ins{background:transparent !important}
#vakata-dragged.jstree-default .jstree-ok{background:url("d.png") -2px -53px no-repeat !important}
#vakata-dragged.jstree-default .jstree-invalid{background:url("d.png") -18px -53px no-repeat !important}
#jstree-marker.jstree-default{background:url("d.png") -41px -57px no-repeat !important; text-indent:-100px}
.jstree-default a.jstree-search { color:aqua; }
.jstree-default .jstree-locked a { color:silver; cursor:default; }
.jstree-default a.jstree-search{color:aqua}
.jstree-default .jstree-locked a{color:silver; cursor:default}
#vakata-contextmenu.jstree-default-context,
#vakata-contextmenu.jstree-default-context li ul { background:#f0f0f0; border:1px solid #979797; -moz-box-shadow: 1px 1px 2px #999; -webkit-box-shadow: 1px 1px 2px #999; box-shadow: 1px 1px 2px #999; }
#vakata-contextmenu.jstree-default-context li ul{background:#f0f0f0; border:1px solid #979797; -moz-box-shadow: 1px 1px 2px #999; -webkit-box-shadow: 1px 1px 2px #999; box-shadow: 1px 1px 2px #999}
#vakata-contextmenu.jstree-default-context li{}
#vakata-contextmenu.jstree-default-context a { color:black; }
#vakata-contextmenu.jstree-default-context a{color:black}
#vakata-contextmenu.jstree-default-context a:hover,
#vakata-contextmenu.jstree-default-context .vakata-hover > a { padding:0 5px; background:#e8eff7; border:1px solid #aecff7; color:black; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; }
#vakata-contextmenu.jstree-default-context .vakata-hover>a{padding:0 5px; background:#e8eff7; border:1px solid #aecff7; color:black; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px}
#vakata-contextmenu.jstree-default-context li.jstree-contextmenu-disabled a,
#vakata-contextmenu.jstree-default-context li.jstree-contextmenu-disabled a:hover { color:silver; background:transparent; border:0; padding:1px 4px; }
#vakata-contextmenu.jstree-default-context li.vakata-separator { background:white; border-top:1px solid #e0e0e0; margin:0; }
#vakata-contextmenu.jstree-default-context li ul { margin-left:-4px; }
#vakata-contextmenu.jstree-default-context li.jstree-contextmenu-disabled a:hover{color:silver; background:transparent; border:0; padding:1px 4px}
#vakata-contextmenu.jstree-default-context li.vakata-separator{background:white; border-top:1px solid #e0e0e0; margin:0}
#vakata-contextmenu.jstree-default-context li ul{margin-left:-4px}
/* IE6 BEGIN */
.jstree-default li,
.jstree-default ins,
#vakata-dragged.jstree-default .jstree-invalid,
#vakata-dragged.jstree-default .jstree-ok,
#jstree-marker.jstree-default { _background-image:url("d.gif"); }
.jstree-default .jstree-open ins { _background-position:-72px 0; }
.jstree-default .jstree-closed ins { _background-position:-54px 0; }
.jstree-default .jstree-leaf ins { _background-position:-36px 0; }
.jstree-default a ins.jstree-icon { _background-position:-56px -19px; }
#vakata-contextmenu.jstree-default-context ins { _display:none; }
#vakata-contextmenu.jstree-default-context li { _zoom:1; }
.jstree-default .jstree-undetermined a .jstree-checkbox { _background-position:-20px -19px; }
.jstree-default .jstree-checked a .jstree-checkbox { _background-position:-38px -19px; }
.jstree-default .jstree-unchecked a .jstree-checkbox { _background-position:-2px -19px; }
#jstree-marker.jstree-default{_background-image:url("d.gif")}
.jstree-default .jstree-open ins{_background-position:-72px 0}
.jstree-default .jstree-closed ins{_background-position:-54px 0}
.jstree-default .jstree-leaf ins{_background-position:-36px 0}
.jstree-default a ins.jstree-icon{_background-position:-56px -19px}
#vakata-contextmenu.jstree-default-context ins{_display:none}
#vakata-contextmenu.jstree-default-context li{_zoom:1}
.jstree-default .jstree-undetermined a .jstree-checkbox{_background-position:-20px -19px}
.jstree-default .jstree-checked a .jstree-checkbox{_background-position:-38px -19px}
.jstree-default .jstree-unchecked a .jstree-checkbox{_background-position:-2px -19px}
/* IE6 END */

View file

@ -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;