mirror of
https://github.com/Lastorder-DC/rhymix.git
synced 2026-01-14 00:39:57 +09:00
e4008fd564
git-svn-id: http://xe-core.googlecode.com/svn/branches/maserati@11238 201d5d3c-b55e-5fd7-737f-ddc643e51545
518 lines
18 KiB
HTML
518 lines
18 KiB
HTML
<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>
|
|
<div id="site">
|
|
<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</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>
|
|
<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>
|