<div class="container-fluid">
<div id="menuFile">
파일
<div>
<span class="glyphicon glyphicon-asterisk"></span>
<b>New</b>
<br>
<small><i>새 파일 생성</i></small></div>
<div>
<span class="glyphicon glyphicon-folder-open"></span>
<b>Open</b>
<br>
<small><i>존재하는 파일 또는 폴더 열기</i></small></div>
<div>
<span class="glyphicon glyphicon-floppy-disk"></span>
<b>Save</b>
<br>
<small><i>현재 파일 저장</i></small></div>
<div class="wj-separator"></div>
<div>
<span class="glyphicon glyphicon-remove"></span>
<b>나가기</b>
<br>
<small><i>애플리케이션 나가기</i></small></div>
</div>
<div id="menuEdit">
편집
<div>
<span class="glyphicon glyphicon-scissors"></span>
<b>Cut</b>
<br>
<small><i>현재 선택 영역을 클립보드로 이동합니다.</i></small>
</div>
<div>
<span class="glyphicon glyphicon-copy"></span>
<b>복사</b>
<br>
<small><i>현재 선택 영역을 클립보드에 복사합니다.</i></small>
</div>
<div>
<span class="glyphicon glyphicon-paste"></span>
<b>붙여넣기</b>
<br>
<small><i>커서 위치에 클립보드 내용 삽입합니다.</i></small>
</div>
</div>
</div>
.wj-dropdown {
margin-right: 5px;
}
@font-face {
font-family: 'S-CoreDream-3Light';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
margin: 20px;
font-family: 'S-CoreDream-3Light';
}
.container-fluid{
background-color:#ededed;
padding:10px;
border-radius:10px;
}
xxxxxxxxxx
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
// 파일 생성 및 메뉴 편집
let menuFile = createMenu('menuFile');
menuFile.itemClicked.addHandler(menuClick);
//
let menuEdit = createMenu('menuEdit');
menuEdit.itemClicked.addHandler(menuClick);
//
// 두 가지 모두에 동일한 이벤트 핸들러 사용
function menuClick(sender) {
alert(` **${sender.header}** 메뉴로 부터 **${sender.selectedIndex}** 옵션을 선택했습니다.`);
}
//
// 마크업으로 메뉴 만들기
function createMenu(elementId) {
//호스트 요소, 헤더, 항목 가져오기
let host = document.getElementById(elementId), header = host.firstChild.textContent.trim(), items = host.querySelectorAll('div'), menuItems = [];
//
for (let i = 0; i < items.length; i++) {
let item = items[i];
menuItems.push(item.outerHTML);
}
//
//호스트 지우기 및 인스턴스화 메뉴
host.innerHTML = '';
let menu = new wijmo.input.Menu(host, {
header: header,
itemsSource: menuItems
});
//
// 완료, 메뉴 반환
return menu;
}
}