rhymix/modules/menu/tpl/sitemap.html
nagoon97 e9ce267c57 erased markup recovered
git-svn-id: http://xe-core.googlecode.com/svn/branches/maserati@11299 201d5d3c-b55e-5fd7-737f-ddc643e51545
2012-09-18 05:49:54 +00:00

842 lines
29 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<load target="./css/themes/classic/style.css" />
<load target="./js/_lib/jquery.cookie.js" />
<load target="./js/_lib/jquery.hotkeys.js" />
<load target="./js/jquery.jstree.js" />
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<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">
<div id="siteMapTree"></div>
<script id="tmpl_menuTree" type="text/x-jquery-tmpl">
<ul>
{{html Nodes}}
</ul>
</script>
<script id="tmpl_menuTreeNode" type="text/x-jquery-tmpl">
<li id="${MenuId}">
<i class="v"></i><i class="h"></i>
<a href="#" class="tx">${MenuTitle}</a>
<span class="side">
<button data-toggle="#add">메뉴추가</button>
<button data-toggle="#info">속성편집</button>
</span>
{{html SubTree}}
</li>
</script>
<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>
<ul>
<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="#add_page" data-show="#add_page" data-hide="#add_url,#download">위젯 페이지 <i class="x_icon-circle-arrow-right"></i></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="#add_url" data-show="#add_url" data-hide="#add_page,#download">URL 링크 <i class="x_icon-circle-arrow-right"></i></a></li>
</ul>
<div class="x_btn-group" style="margin:0;padding:10px 0;border-top:1px solid #ccc;text-align:right">
<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>
</section>
</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 class="col" >
<section>
<h1>메뉴 1</h1>
</section>
</div>
<div class="col" >
<section>
<h1>메뉴 2</h1>
</section>
</div>
<div class="col" >
<section>
<h1>메뉴 3</h1>
</section>
</div>
<div class="col" >
<section>
<h1>메뉴 4</h1>
</section>
</div>
</div>
<style>
/* Site */
#site{position:relative;overflow-x:auto;overflow-y:hidden}
.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:first-child{border:0;padding-left:0}
.col>section>h1{ line-height:30px;font-size:16px;border-bottom:2px solid #666;margin:0;color:#333}
.col>section>ul{ margin:0;padding:0;list-style:none}
/* .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{margin-topp: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>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}
/* Add */
#add.col>section>ul>li{ border-top:1px dotted #ccc;padding:7px 0}
#add.col>section>ul>li:first-child{ border-top:0}
</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[
function onSiteMapReceived(htData){
var $ = jQuery;
var aMenuList = htData.menuList;
//console.log(aMenuList, aMenuList.length);
//console.log(createTreeMarkup(aMenuList));
$("#siteMapTree").html(createTreeMarkup(aMenuList));
$("#siteMapTree")
// call `.jstree` with the options object
.jstree({
// the `plugins` array allows you to configure the active plugins on this instance
"plugins" : ["themes","html_data","ui","crrm","hotkeys","contextmenu", "dnd"],
//"themes","json_data","ui","crrm","cookies","dnd","search","types","hotkeys","contextmenu"
// each plugin you have included can have its own config object
"core" : { "initially_open" : [ "nhtml_1" ] }
// it makes sense to configure a plugin only if overriding the defaults
})
.bind("create_node.jstree", function (event, data) {
var v = $("<i>").addClass("v");
var h = $("<i>").addClass("h");
//'<i class="v"></i><i class="h"></i>'
var btns = $("<span>").addClass("side").html('<button data-toggle="#add">메뉴추가</button> <button data-toggle="#info">속성편집</button>');
//data.rslt.obj.prepend(h);
//data.rslt.obj.prepend(v);
h.insertBefore(data.rslt.obj.find("a"));
v.insertBefore(data.rslt.obj.find("a"));
data.rslt.obj.append(btns);
});
}
var htNodeInfo = {};
// return html
function createTreeMarkup(aNode){
var $ = jQuery;
if(aNode.length == 0){
return "";
}
var sActiveBtn, sNormalBtn, sHoverBtn, sExpand, sLink, aSubNodes, sNodeSrl, sOpenWindow, sParentSrl, nSelected, sText, sURL, sIsStartModule, aSubNode;
// 1: Sitemap node, 2: Menu node
var nNodeType;
var sResult = "";
for(var i=0, nLen=aNode.length; i<nLen; i++){
//console.log(aNode[i]);
// Only sitemap node has menuSrl
if(aNode[i].menuSrl){
nNodeType = 1;
}else{
nNodeType = 2;
}
switch(nNodeType){
/*
list: Array[1]
menuSrl: "59"
title: "welcome_menu"
*/
case 1:
sText = aNode[i].title;
sNodeSrl = aNode[i].menu_srl;
aSubNode = aNode[i].menuItems.list;
break;
/*
active_btn: ""
expand: "N"
hover_btn: ""
href: ""
link: "menu1"
list: Array[1]
node_srl: "60"
normal_btn: ""
open_window: "N"
parent_srl: "0"
selected: 0
text: "menu1"
url: ""
is_start_module: 1 or true
*/
case 2:
sText = aNode[i].text;
sLink = aNode[i].link;
sURL = aNode[i].url;
sNodeSrl = aNode[i].node_srl;
sParentSrl = aNode[i].parent_srl;
sExpand = aNode[i].expand;
sOpenWindow = aNode[i].open_window;
nSelected = aNode[i].selected;
sActiveBtn = aNode[i].active_btn;
sNormalBtn = aNode[i].normal_btn;
sHoverBtn = aNode[i].hover_btn;
sIsStartModule = aNode[i].is_start_module;
aSubNode = aNode[i].list;
break;
default:
}
htNodeInfo[sNodeSrl] = aNode[i];
htNodeInfo[sNodeSrl].nNodeType = nNodeType;
sSubTree = "";
if(aSubNode && aSubNode.length>0){
sSubTree = createTreeMarkup(aSubNode, aNode[i]);
}
/*
if(sMenuType === "shortcut"){
sText = sText + " ${s}";
}
*/
if(sIsStartModule){
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>");
}
return $.tmpl( "menuTree", {Nodes:sResult} ).get()[0].outerHTML;
}
jQuery(function($){
var _oldhide = $.fn.hide;
$.fn.hide = function(speed, callback) {
$(this).trigger('hide');
return _oldhide.apply(this,arguments);
}
//$( "#tmpl_siteMap" ).template( "siteMap" );
$( "#tmpl_menuTree" ).template( "menuTree" );
$( "#tmpl_menuTreeNode" ).template( "menuTreeNode" );
var params = {};
var response_tags = new Array('menuList');
params['menu_srl'] = 0;
$.exec_json("menu.getMenuAdminSiteMap", params, onSiteMapReceived);
//$.jstree._themes = "PATH/TO/FOLDER/";
//$.jstree._themes = "/maserati/modules/menu/tpl/css/themes/";
$.jstree._themes = '{getUrl("")}/modules/menu/tpl/css/themes/';
// 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:first-child').removeClass(folderClose).addClass(folderOpen);
} else if(submenu && !hasopen) {
$this.find('>.item>.tx>i:first-child').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>