#add, #add_page, #add_url, #download pannel. complete.

git-svn-id: http://xe-core.googlecode.com/svn/branches/maserati@11264 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
ChanMyeong 2012-09-16 10:23:39 +00:00
parent e0cdd61400
commit 785298d99d
5 changed files with 209 additions and 46 deletions

View file

@ -17,7 +17,13 @@ body>.x,.x table,.x input,.x textarea,.x select,.x button{font-size:13px}
.x h4{font-size:14px} .x h4{font-size:14px}
.x h5{font-size:12px} .x h5{font-size:12px}
.x h6{font-size:12px} .x h6{font-size:12px}
.x_btn-link{padding:0;margin:0;overflow:visible} .x .x_btn-link{padding:0;margin:0;overflow:visible}
.x [class^="x_icon-"],
.x [class*=" x_icon-"]{text-decoration:none;border:0;padding:0;background-color:transparent;overflow:hidden;font-size:0}
.x .x_close{width:24px;height:24px}
.x .x_alert .x_close{top:-3px;right:-30px}
.x .x_pagination ul>.x_active>a,
.x .x_pagination ul>.x_active>span{ background-color:#767676;color:#fff;font-weight:bold;font-size:18px;font-family:Arial, Helvetica, sans-serif}
/* Image Sprite */ /* Image Sprite */
.x>.body>.gnb>ul>li>a:before, .x>.body>.gnb>ul>li>a:before,
.x .dashboard>section>h2:before{background-image:url(../../../../common/img/glyphicons-halflings.png);background-repeat:no-repeat} .x .dashboard>section>h2:before{background-image:url(../../../../common/img/glyphicons-halflings.png);background-repeat:no-repeat}

View file

@ -17,7 +17,13 @@ body>.x,.x table,.x input,.x textarea,.x select,.x button{font-size:13px}
.x h4{font-size:14px} .x h4{font-size:14px}
.x h5{font-size:12px} .x h5{font-size:12px}
.x h6{font-size:12px} .x h6{font-size:12px}
.x_btn-link{padding:0;margin:0;overflow:visible} .x .x_btn-link{padding:0;margin:0;overflow:visible}
.x [class^="x_icon-"],
.x [class*=" x_icon-"]{text-decoration:none;border:0;padding:0;background-color:transparent;overflow:hidden;font-size:0}
.x .x_close{width:24px;height:24px}
.x .x_alert .x_close{top:-3px;right:-30px}
.x .x_pagination ul>.x_active>a,
.x .x_pagination ul>.x_active>span{ background-color:#767676;color:#fff;font-weight:bold;font-size:18px;font-family:Arial, Helvetica, sans-serif}
/* Image Sprite */ /* Image Sprite */
.x>.body>.gnb>ul>li>a:before, .x>.body>.gnb>ul>li>a:before,
.x .dashboard>section>h2:before{background-image:url(../../../../common/img/glyphicons-halflings.png);background-repeat:no-repeat} .x .dashboard>section>h2:before{background-image:url(../../../../common/img/glyphicons-halflings.png);background-repeat:no-repeat}

View file

@ -6,19 +6,28 @@ jQuery(function($){
$('.x .skipNav>a').click(function(){ $('.x .skipNav>a').click(function(){
$($(this).attr('href')).attr('tabindex','0').css('outline','0').focus(); $($(this).attr('href')).attr('tabindex','0').css('outline','0').focus();
}); });
// Content Toggle // TARGET toggle
$('.x [data-toggle^="#"]').click(function(){ $('.x [data-toggle]').click(function(){
$($(this).attr('data-toggle')).toggle(); $($(this).attr('data-toggle')).toggle();
return false; return false;
}); });
// Content Open // TARGET show
$('.x [data-open^="#"]').click(function(){ $('.x [data-show]').click(function(){
$($(this).attr('data-open')).show(); $($(this).attr('data-show')).show();
return false; return false;
}); });
// Content Close // TARGET hide
$('.x [data-close^="#"]').click(function(){ $('.x [data-hide]').click(function(){
$($(this).attr('data-close')).hide(); $($(this).attr('data-hide')).hide();
return false;
});
// Tab Navigation
var $tabbable = $('.x .x_tabbable');
$tabbable.find('.x_tab-pane:not(".x_active")').hide();
$tabbable.find('.x_nav-tabs>li>a').click(function(){
var $this = $(this);
$this.parent('li').addClass('x_active').siblings().removeClass('x_active');
$tabbable.find($this.attr('href')).addClass('x_active').show().siblings().removeClass('x_active').hide();
return false; return false;
}); });
// GNB Height 100% // GNB Height 100%

View file

@ -6,19 +6,28 @@ jQuery(function($){
$('.x .skipNav>a').click(function(){ $('.x .skipNav>a').click(function(){
$($(this).attr('href')).attr('tabindex','0').css('outline','0').focus(); $($(this).attr('href')).attr('tabindex','0').css('outline','0').focus();
}); });
// Content Toggle // TARGET toggle
$('.x [data-toggle^="#"]').click(function(){ $('.x [data-toggle]').click(function(){
$($(this).attr('data-toggle')).toggle(); $($(this).attr('data-toggle')).toggle();
return false; return false;
}); });
// Content Open // TARGET show
$('.x [data-open^="#"]').click(function(){ $('.x [data-show]').click(function(){
$($(this).attr('data-open')).show(); $($(this).attr('data-show')).show();
return false; return false;
}); });
// Content Close // TARGET hide
$('.x [data-close^="#"]').click(function(){ $('.x [data-hide]').click(function(){
$($(this).attr('data-close')).hide(); $($(this).attr('data-hide')).hide();
return false;
});
// Tab Navigation
var $tabbable = $('.x .x_tabbable');
$tabbable.find('.x_tab-pane:not(".x_active")').hide();
$tabbable.find('.x_nav-tabs>li>a').click(function(){
var $this = $(this);
$this.parent('li').addClass('x_active').siblings().removeClass('x_active');
$tabbable.find($this.attr('href')).addClass('x_active').show().siblings().removeClass('x_active').hide();
return false; return false;
}); });
// GNB Height 100% // GNB Height 100%

View file

@ -427,24 +427,127 @@
<section> <section>
<h1>메뉴 추가</h1> <h1>메뉴 추가</h1>
<ul> <ul>
<li><a href="#pageDoc">문서 페이지</a></li> <li><a href="#add_page" data-show="#add_page" data-hide="#add_url,#download">문서 페이지 <i class="x_icon-circle-arrow-right"></i></a></li>
<li><a href="#pageWidget">위젯 페이지</a></li> <li><a href="#add_page" data-show="#add_page" data-hide="#add_url,#download">위젯 페이지 <i class="x_icon-circle-arrow-right"></i></a></li>
<li><a href="#board">게시판</a></li> <li><a href="#add_page" data-show="#add_page" data-hide="#add_url,#download">게시판 <i class="x_icon-circle-arrow-right"></i></a></li>
<li><a href="#url">URL 링크</a></li> <li><a href="#add_url" data-show="#add_url" data-hide="#add_page,#download">URL 링크 <i class="x_icon-circle-arrow-right"></i></a></li>
</ul> </ul>
<div class="x_btn-group" style="margin:0;padding:10px 0;border-top:1px solid #ccc;text-align:right"> <div class="x_btn-group" style="margin:0;padding:10px 0;border-top:1px solid #ccc;text-align:right">
<a type="button" class="x_btn x_btn-small x_btn-inverse"><i class="x_icon-plus x_icon-white"></i> 다른 메뉴유형 설치</a> <a href="#download" class="x_btn x_btn-small x_btn-inverse" data-show="#download" data-hide="#add_page,#add_url"><i class="x_icon-plus x_icon-white"></i> 다른 메뉴타입설치</a>
</div> </div>
</section> </section>
</div> </div>
<div class="col" id="add_page">
<fieldset>
<h1>문서 페이지</h1>
<ul>
<li>
<label for="menuName1">메뉴이름(브라우저 제목)</label>
<input id="menuName1" type="text" required />
</li>
<li>
<label for="menuId">메뉴 아이디 <a href="#help_menuId" class="x_icon-question-sign" data-toggle="#help_menuId">?</a></label>
<div id="help_menuId" class="x_alert x_alert-info" style="display:none;width:169px">
<button type="button" class="x_close" data-hide="#help_menuId">×</button>
<p>페이지 URL로 사용. URL을 사용할 필요가 없다면 생략 가능. 메뉴 생성 후 [속성&gt;일반]에서 수정 가능.</p>
</div>
<input id="menuId" type="text" required placeholder="생략시 임의값 사용" />
</li>
</ul>
<div class="x_btn-group" style="margin:0;padding:10px 0;border-top:1px solid #ccc;text-align:right">
<button type="button" class="x_btn x_btn-small x_btn-primary">확인</button>
</div>
</fieldset>
<button type="button" class="x_close" data-hide="#add_page">&times;</button>
</div>
<div class="col" id="add_url">
<fieldset>
<h1>URL 링크</h1>
<ul>
<li>
<label for="menuName2">메뉴이름(브라우저 제목)</label>
<input id="menuName2" type="text" required />
</li>
<li>
<div class="x_tabbable">
<ul class="x_nav x_nav-tabs">
<li class="x_active"><a href="#linkUrl">URL 링크</a></li>
<li><a href="#linkMenu">메뉴 링크</a></li>
</ul>
<div class="x_tabcontent">
<div class="x_tab-pane x_active" id="linkUrl">
<input type="text" required title="URL 링크" />
</div>
<div class="x_tab-pane" id="linkMenu">
<input type="text" required title="메뉴 링크" disabled placeholder="메뉴를 선택하면 자동 입력됨" />
</div>
</div>
</div>
</li>
</ul>
<div class="x_btn-group" style="margin:0;padding:10px 0;border-top:1px solid #ccc;text-align:right">
<button type="button" class="x_btn x_btn-small x_btn-primary">확인</button>
</div>
</fieldset>
<button type="button" class="x_close" data-hide="#add_url">&times;</button>
</div>
<div class="col" id="download">
<section>
<h1>다른 메뉴타입설치</h1>
<div class="list">
<div class="item">
<h2>모듈 이름</h2>
<p>많은 기능과 쉬운 사용법으로 사용자를 도와줄 게시판 모듈입니다. 주요기능 : 목록, 갤러리, 웹진, 블로그, 방명록, 한줄메모, 포인트경매등...</p>
<p>별점 9.7/58 <i>|</i> 최근 업데이트 2012-08-03 14:40 <i>|</i> 전체 다운로드 : 46,184</p>
<a href="#" class="x_icon-download-alt x_icon-white">설치</a>
</div>
<div class="item">
<h2>모듈 이름</h2>
<p>많은 기능과 쉬운 사용법으로 사용자를 도와줄 게시판 모듈입니다. 주요기능 : 목록, 갤러리, 웹진, 블로그, 방명록, 한줄메모, 포인트경매등...</p>
<p>별점 9.7/58 <i>|</i> 최근 업데이트 2012-08-03 14:40 <i>|</i> 전체 다운로드 : 46,184</p>
<a href="#" class="x_icon-download-alt x_icon-white">설치</a>
</div>
<div class="item">
<h2>모듈 이름</h2>
<p>많은 기능과 쉬운 사용법으로 사용자를 도와줄 게시판 모듈입니다. 주요기능 : 목록, 갤러리, 웹진, 블로그, 방명록, 한줄메모, 포인트경매등...</p>
<p>별점 9.7/58 <i>|</i> 최근 업데이트 2012-08-03 14:40 <i>|</i> 전체 다운로드 : 46,184</p>
<a href="#" class="x_icon-download-alt x_icon-white">설치</a>
</div>
<div class="item">
<h2>모듈 이름</h2>
<p>많은 기능과 쉬운 사용법으로 사용자를 도와줄 게시판 모듈입니다. 주요기능 : 목록, 갤러리, 웹진, 블로그, 방명록, 한줄메모, 포인트경매등...</p>
<p>별점 9.7/58 <i>|</i> 최근 업데이트 2012-08-03 14:40 <i>|</i> 전체 다운로드 : 46,184</p>
<a href="#" class="x_icon-download-alt x_icon-white">설치</a>
</div>
<div class="item">
<h2>모듈 이름</h2>
<p>많은 기능과 쉬운 사용법으로 사용자를 도와줄 게시판 모듈입니다. 주요기능 : 목록, 갤러리, 웹진, 블로그, 방명록, 한줄메모, 포인트경매등...</p>
<p>별점 9.7/58 <i>|</i> 최근 업데이트 2012-08-03 14:40 <i>|</i> 전체 다운로드 : 46,184</p>
<a href="#" class="x_icon-download-alt x_icon-white">설치</a>
</div>
</div>
<div class="x_pagination x_pagination-centered">
<ul>
<li class="x_disabled"><a href="#">&laquo;</a></li>
<li class="x_active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li>
</ul>
</div>
</section>
<button type="button" class="x_close" data-hide="#download">&times;</button>
</div>
</div> </div>
<style> <style>
/* Site */ /* Site */
#site{position:relative;overflow-x:auto;overflow-y:hidden} #site{position:relative;overflow-x:auto;overflow-y:hidden;white-space:nowrap}
.col{position:relative;float:left;height:100%;min-width:200px;padding:0 10px;overflow-y:auto;overflow-x:hidden;border-left:1px solid #ddd} .col{display:inline-block;vertical-align:top;position:relative;white-space:normal;height:100%;min-width:220px;padding:10px 25px 10px 10px;margin:0 4px 0 0;overflow-y:auto;overflow-x:hidden;border:1px solid #ddd}
.col:first-child{border:0;padding-left:0} .col>*>h1{line-height:30px;font-size:16px;border-bottom:2px solid #666;margin:0;color:#333}
.col>section>h1{ line-height:30px;font-size:16px;border-bottom:2px solid #666;margin:0;color:#333} .col>*>ul{margin:0;padding:0;list-style:none}
.col>section>ul{ margin:0;padding:0;list-style:none} .col>.x_close{position:absolute;top:0;right:0;width:24px;height:24px}
/* .mapi * */ /* .mapi * */
.mapi{margin:0 0 15px 0;min-width:200px} .mapi{margin:0 0 15px 0;min-width:200px}
.mapi ul{margin:0;padding:0;list-style:none} .mapi ul{margin:0;padding:0;list-style:none}
@ -453,8 +556,8 @@
.mapi a{text-decoration:none} .mapi a{text-decoration:none}
.mapi>ul{padding:1px} .mapi>ul{padding:1px}
/* .root */ /* .root */
.mapi .root{margin-topp:15px;border:0 !important} .mapi .root{margin-top:15px;border:0 !important}
.mapi .root:first-child{ margin-top:0} .mapi .root:first-child{margin-top:0}
.mapi .root>ul{margin-top:10px} .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{position:relative;border-bottom:2px solid #666;margin:0 -80px 0 0;zoom:1}
.mapi .root>.item>strong{font-size:16px} .mapi .root>.item>strong{font-size:16px}
@ -502,9 +605,35 @@
/* li>.item>ul */ /* li>.item>ul */
.mapi .root>ul ul{display:none} .mapi .root>ul ul{display:none}
.mapi .root>ul li.open>ul{display:block} .mapi .root>ul li.open>ul{display:block}
/* Add */ /* Add */
#add.col>section>ul>li{ border-top:1px dotted #ccc;padding:7px 0} #add li{border-top:1px solid #ddd;position:relative;white-space:nowrap}
#add.col>section>ul>li:first-child{ border-top:0} #add li:first-child{border-top:0}
#add li>a{display:block;padding:6px 15px 6px 8px;color:#333;text-decoration:none;background:#fff;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s}
#add li>a:hover,
#add li>a:focus,
#add li.active>a{background:#666;color:#fff}
#add li>a>i{position:absolute;top:7px;right:5px;opacity:.5;filter:alpha(opacity=50)}
#add li>a:hover>i,
#add li>a:focus>i,
#add li.active>a>i{background-image:url({getUrl('')}common/img/glyphicons-halflings-white.png);background-repeat:no-repeat;opacity:1;filter:alpha(opacity=100)}
/* Add Page */
#add_page ul{margin:15px 0}
/* Add URL */
#add_url ul{margin:15px 0}
#add_url .clone ul{margin:0}
#add_url .clone li{list-style:none}
#add_url .clone ul ul{padding-left:15px}
#add_url .clone .root{margin-top:15px}
/* Download */
#download.col{max-width:500px}
#download .list{padding:1px 0;border-bottom:1px solid #ccc;}
#download .item{border-top:1px solid #ddd;padding:1px 0;position:relative}
#download .item:first-child{border:0}
#download h2{font-size:14px}
#download a.x_icon-download-alt{width:24px;height:24px;background-color:#94A55C;position:absolute;top:7px;right:0;border-radius:3px;background-position:-90px -19px}
#download a.x_icon-download-alt:hover,
#download a.x_icon-download-alt:focus{background-color:#333}
#download p>i{font-style:normal;color:#ccc}
</style> </style>
<!--[if IE 7]> <!--[if IE 7]>
@ -557,11 +686,14 @@ jQuery(function($){
data.rslt.obj.append(btns); data.rslt.obj.append(btns);
}); });
// Column display
$('#site>.col:not(":first-child")').hide();
// Set #site height fix // Set #site height fix
$(window).resize(function(){ $(window).resize(function(){
var wHeigh = $(window).height(); var wHeigh = $(window).height();
var $site = $('#site'); var $site = $('#site');
$site.height(wHeigh - 270); $site.height(wHeigh - 265);
$site.find('>.col').height(wHeigh - 310);
}).resize(); }).resize();
// Draw .h/.v line and display file/folder icon // Draw .h/.v line and display file/folder icon
var $mapi = $('.map .root li'); var $mapi = $('.map .root li');
@ -630,18 +762,19 @@ jQuery(function($){
if($this.parent('.side').children('a.active').length){ if($this.parent('.side').children('a.active').length){
$this.closest('li:not(".root")').addClass('selected').find('>.item>.tx>i').addClass(iconWhite); $this.closest('li:not(".root")').addClass('selected').find('>.item>.tx>i').addClass(iconWhite);
} }
}) });
.hover( // #add active and creat title
function(){ $('#add li>a').click(function(){
var $this = $(this); var $this = $(this);
var title = $this.text(); $this.parent('li').toggleClass('active').siblings().removeClass('active');
$this.attr('title', title); var title = $this.text();
}, $($(this).attr('href')).find('>*>h1').text(title);
function(){ });
var $this = $(this); // Menu Link Clone
$this.removeAttr('title'); $('.mapi>ul').clone().appendTo('#add_url #linkMenu').addClass('clone').find('i, .side').remove();
} $('#add_url .clone a').click(function(){
); $('#linkMenu>input').val($(this).text());
});
}); });
//]]> //]]>
</script> </script>