태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

1. HTML/CSS 편집기 열기



2. 티스토리에서 생성해주는 카테고리구조를 bootstrap에 맞게 변환해주는 코드를 추가

- skin.html의 </body> 위에 아래의 코드를 추가한다.

<script>
/*
 * Sidemenu의 Category를 상단 메뉴로 옮기기
 */

function appendMenu(items, target){
	$(items).each(function(){
		var text = $(this).text();
		var myId = $(this).attr('id');
		var myChild = $("#"+myId+"_children");
		var href = $(this).find("tbody tr td:last-child table").attr("onclick");
		if(href)
			href=href.substring(href.indexOf("'")+1, href.lastIndexOf("'"));
		
		if(myChild.children() && myChild.children().length > 0){
			$(target).append('<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">'+ text +'<span class="caret"></span></a></li>');
			var li = $(target).children('li:last-child');
			li.append('<ul class="dropdown-menu" role="menu"></ul>');
			var ul = li.children('ul:last-child');
			
			appendMenu(myChild.children(), ul);
		} else {
			$(target).append('<li><a href="' + href + '">'+ text +'</a></li>');
		}
	});
}

var categoryTable = $("#treeComponent");
var category = categoryTable.find("tbody tr td>table:nth-child(n+2)");
var navItem = $("#nav-item");
var menu = [];

appendMenu(category, navItem);
categoryTable.remove();

</script>

3. 스타일링 되지 않은 카테고리가 보였다 사라지는 현상을 제거하기

- style.css에 아래의 코드를 추가한다.

#bs-example-navbar-collapse-1 #treeComponent {
	display : none;
}

*. 코드설명

- html 코드중 [##_category_##]가 실제 카테고리 DOM 형태로 치환이 되는데, 최상위 DOM의 id가 treeComponent이다.

- treeComponent 하위의 category(table으로 구성되어 있음)를 looping 하면서 하위 카테고리 여부를 판단.

- 하위 카테고리가 있으면 dropdown으로, 없으면 link로 DOM을 생성하여 추가.

- looping이 끝나면 [##_category_##]으로부터 치환된 category DOM을 삭제

- 위의 작업이 진행되는 동안 변환되지 않은 카테고리가 화면에 나타날 수 있으므로 해당 id에 대해 display:none을 통하여 숨김.

설정

트랙백

댓글