rhymix/modules/menu/tpl/site_design.html

<load target="./css/sitemap.css" />
<div cond="$XE_VALIDATOR_MESSAGE" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
	<p>{$XE_VALIDATOR_MESSAGE}</p>
</div>
<div id="site">
	<div class="col" id="design">
		<fieldset>
			<h1>디자인</h1>
			<div class="cnt">
				<div class="x_tabbable">
					<ul class="x_nav x_nav-tabs">
						<li class="x_active"><a href="#pc">PC</a></li>
						<li><a href="#mobile">모바일</a></li>
					</ul>
					<div class="x_tabcontent">
						<div class="x_tab-pane x_active" id="pc">
							<img src="http://naradesign.net/photo/DSCN0687.JPG" alt="현재 설정된 PC 레이아웃">
							<a href="#" target="_blank" class="x_icon-zoom-in" title="새창">크게 보기</a>
						</div>
						<div class="x_tab-pane" id="mobile">
							<img src="http://naradesign.net/photo/DSCN0810.JPG" alt="현재 설정된 모바일 레이아웃">
							<a href="#" target="_blank" class="x_icon-zoom-in" title="새창">크게 보기</a>
						</div>
					</div>
				</div>
				<ul class="nav">
					<li><a href="#layout" data-show="#layout">레이아웃 <i class="x_icon-circle-arrow-right"></i></a></li>
					<li><a href="#skin" data-show="#skin">{게시판} <i class="x_icon-circle-arrow-right"></i></a></li>
				</ul>
				<div class="btnBoth">
					<button type="reset" class="x_btn x_pull-left">취소</button>
					<button type="button" class="x_btn x_btn-primary x_pull-right">저장</button>
				</div>
			</div>
		</fieldset>
		<button type="button" class="x_close" data-hide="#design">&times;</button>
	</div>
	<div class="col theme" id="layout">
		<form action="">
			<h1>레이아웃</h1>
			<div class="cnt">
				<div class="list">
					<h2>사용할 수 있는 레이아웃 목록</h2>
					<ul>
						<li>
							<button type="button" class="item" title="클릭하면 레이아웃이 적용됩니다." onClick="alert('\'XE 소개\' 메뉴에 \'엔터프라이즈\' 레이아웃이 적용 됐습니다.')">
								<img src="http://naradesign.net/photo/DSCN0687.JPG" alt="엔터프라이즈 레이아웃">
							</button>
							<ul>
								<li><a href="#layoutSetup">설정 <i class="x_icon-circle-arrow-right"></i></a></li>
								<li><a href="#layoutHTML">HTML/CSS <i class="x_icon-circle-arrow-right"></i></a></li>
								<li><button type="button" onClick="alert('\'엔터프라이즈[2]\' 레이아웃이 생성 됐습니다.')">복사본 생성</button></li>
								<li><button type="button" onClick="confirm('\'엔터프라이즈\' 레이아웃을 정말 삭제할까요? \'고급기능\'에서 다시 생성할 수 있습니다.')">삭제</button></li>
							</ul>
						</li>
						<li>
							<button type="button" class="item" title="클릭하면 레이아웃이 적용됩니다." onClick="alert('\'XE 소개\' 메뉴에 \'엔터프라이즈\' 레이아웃이 적용 됐습니다.')">
								<img src="http://naradesign.net/photo/DSCN0687.JPG" alt="엔터프라이즈 레이아웃">
							</button>
							<ul>
								<li><a href="#layoutSetup">설정 <i class="x_icon-circle-arrow-right"></i></a></li>
								<li><a href="#layoutHTML">HTML/CSS <i class="x_icon-circle-arrow-right"></i></a></li>
								<li><button type="button" onClick="alert('\'엔터프라이즈[2]\' 레이아웃이 생성 됐습니다.')">복사본 생성</button></li>
								<li><button type="button" onClick="confirm('\'엔터프라이즈\' 레이아웃을 정말 삭제할까요? \'고급기능\'에서 다시 생성할 수 있습니다.')">삭제</button></li>
							</ul>
						</li>
					</ul>
					<div class="x_btn-group">
						<a href="#downloadLayout" data-show="#downloadLayout" class="x_btn x_btn-inverse x_pull-right"><i class="x_icon-plus x_icon-white"></i> 다른 레이아웃 설치</a>
					</div>
				</div>
			</div>
		</form>
		<button type="button" class="x_close" data-hide="#layout">&times;</button>
	</div>
	<div class="col download" id="downloadLayout">
		<section>
			<h1>다른 레이아웃 설치</h1>
			<div class="cnt">
				<div class="list">
				<script id="tmpl_downloadableMenuTypeItem" type="text/x-jquery-tmpl">
					<div class="item">
						<img src="http://www.xpressengine.com/files/attach/images/18322904/188/195/021/de5626ccf0bb28ca223fbbeabd891462.jpg" alt="">
						<h2>${MenuType}</h2>
						<p>${MenuTypeDesc}</p>
						<p>별점 ${Score}/${TotalVotes} <i>|</i> 최근 업데이트 ${LastUpdated} <i>|</i> 전체 다운로드 : ${TotalDownloads}</p>
						<a href="#" class="x_icon-download-alt x_icon-white">설치</a>
					</div>
				</script>
			</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>
			</div>
		</section>
		<button type="button" class="x_close" data-hide="#downloadLayout">&times;</button>
	</div>
	<div class="col theme" id="skin">
		<form action="">
			<h1>스킨</h1>
			<div class="cnt">
				<div class="list">
				<h2>사용할 수 있는 스킨 목록</h2>
				<ul>
					<li>
						<button type="button" class="item" title="클릭하면 스킨이 적용됩니다." onClick="alert('\'XE 소개\' 메뉴에 \'엔터프라이즈\' 스킨이 적용 됐습니다.')">
							<img src="http://naradesign.net/photo/DSCN0687.JPG" alt="엔터프라이즈 스킨">
						</button>
						<ul>
							<li><a href="#skinSetup">설정 <i class="x_icon-circle-arrow-right"></i></a></li>
							<li><button type="button" onClick="confirm('\'엔터프라이즈\' 스킨을 정말 삭제할까요? \'고급기능\'에서 다시 생성할 수 있습니다.')">삭제</button></li>
						</ul>
					</li>
					<li>
						<button type="button" class="item" title="클릭하면 스킨이 적용됩니다." onClick="alert('\'XE 소개\' 메뉴에 \'엔터프라이즈\' 스킨이 적용 됐습니다.')">
							<img src="http://naradesign.net/photo/DSCN0687.JPG" alt="엔터프라이즈 스킨">
						</button>
						<ul>
							<li><a href="#skinSetup">설정 <i class="x_icon-circle-arrow-right"></i></a></li>
							<li><button type="button" onClick="confirm('\'엔터프라이즈\' 스킨을 정말 삭제할까요? \'고급기능\'에서 다시 생성할 수 있습니다.')">삭제</button></li>
						</ul>
					</li>
				</ul>
				<div class="x_btn-group">
					<a href="#downloadSkin" data-show="#downloadSkin" class="x_btn x_btn-inverse x_pull-right"><i class="x_icon-plus x_icon-white"></i> 다른 스킨 설치</a>
				</div>
			</div>
			</div>
		</form>
		<button type="button" class="x_close" data-hide="#skin">&times;</button>
	</div>
	<div class="col download" id="downloadSkin">
		<section>
			<h1>다른 스킨 설치</h1>
			<div class="cnt">
				<div class="list">
					<script id="tmpl_downloadableMenuTypeItem" type="text/x-jquery-tmpl">
						<div class="item">
							<img src="http://www.xpressengine.com/files/attach/images/18322904/188/195/021/de5626ccf0bb28ca223fbbeabd891462.jpg" alt="">
							<h2>${MenuType}</h2>
							<p>${MenuTypeDesc}</p>
							<p>별점 ${Score}/${TotalVotes} <i>|</i> 최근 업데이트 ${LastUpdated} <i>|</i> 전체 다운로드 : ${TotalDownloads}</p>
							<a href="#" class="x_icon-download-alt x_icon-white">설치</a>
						</div>
					</script>
				</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>
			</div>
		</section>
		<button type="button" class="x_close" data-hide="#downloadSkin">&times;</button>
	</div>
	<div class="col" id="details">
		{설정}
		<button type="button" class="x_close" data-hide="#details">&times;</button>
	</div>
	<div class="col" id="html">
		{HTML/CSS}
		<button type="button" class="x_close" data-hide="#html">&times;</button>
	</div>
</div>
<!--[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($){
// TARGET toggle
	$(document.body).on("click", ".x [data-toggle]", function(ev){
		$($(ev.srcElement).attr('data-toggle')).toggle();
		return false;
	});
// TARGET show
	$(document.body).on("click", ".x [data-show]", function(ev){
		var $target = $($(ev.srcElement).attr('data-show'));
	
		if($target.hasClass("col")){
			$target.nextAll().hide();
		}

		$target.show();
	});
// TARGET hide
	$(document.body).on("click", ".x [data-hide]", function(ev){
		var $target = $($(ev.srcElement).attr('data-hide'));

		if($target.hasClass("col")){
			$target.nextAll().hide();
//			$target.prevUntilAnd(".shown").find('li.active').removeClass('active');
		}
		$target.hide();
	});
// Set #site height fix
	$(window).resize(function(){
		var wHeigh = $(window).height();
		$('#site').height(wHeigh - 180).children('.col').height(wHeigh - 210).find('.cnt').height(wHeigh - 242);
	}).resize();
// Navigation a active/inactive
	var $navAnchor = $('a>i.x_icon-circle-arrow-right').parent('a');
	$navAnchor.click(function(){
		$(this).parent('li').addClass('active').siblings('li').removeClass('active');
	});

	$('.x_close[data-hide]').click(function(){
		var inactiveTarget = $(this).attr('data-hide');
		$navAnchor.each(function(){
			var href = $(this).attr('href');
			if(href == inactiveTarget){
				$(this).parent('li').removeClass('active');
			}
		});
	});
});
//]]>
</script>