■ 주제: zim.js List를 활용한 내비게이션 메뉴 생성
■ 기능:
1] 메뉴 토글
2] 메뉴 자동닫힘
(뷰포트, 다른메뉴 클릭시)
■코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://zimjs.org/cdn/1.3.2/createjs.js"></script>
<script src="https://zimjs.org/cdn/cat/04/zim.js"></script>
</head>
<body>
<div id="upperDiv" style="margin: 0 auto; margin-top: 100px; width: 700px; height: 100px; border: 1px solid blue;"></div>
<div id="mainDiv" style="margin: 0 auto; width: 700px; height: 400px; border: 1px solid red;"></div>
<div id="footerDiv" style="margin: 0 auto; width: 700px; height: 100px; border: 1px solid grey;"></div>
<script>
window.addEventListener('DOMContentLoaded',(e)=>{
//zim 상단메뉴 Frame코드 입력
let upperDiv = document.getElementById('upperDiv');
let mainDiv = document.getElementById('mainDiv');
mainDiv.style.backgroundColor = "#777";
let upperMenuUI = new Frame({
scaling:"upperDiv",
width:700,
height:100
});
//메뉴닫기열기 설정
let selectedMenu = null;
let currentMenu = null;
let headerMenuLists = [];
let slcMenu = null;
let nowMenu = null;
//상단메뉴 zim Frame 설정
upperMenuUI.on("ready",()=>{
let stage = upperMenuUI.stage;
let stageW = upperMenuUI.width;
let stageH = upperMenuUI.height;
stage.update();
});
//메인 콘텐츠Div
let mainDivUI = new Frame({
scaling:"mainDiv",
width:700,
height:400
});
let headerMenu = [];
//메뉴데이터
let fileMenuList = {
menu:{
"File":{
"New File":[],
"Save":[],
"Save As..":[],
"Exit":[]
}
},
shift:false,
expander:'none'
}
let modelMenuList = {
menu:{
"Model":{
"Library":[],
"Import":[],
"Export":[],
"Texture":[]
}
},
shade:false,
expander:'none',
}
let renderMenuList = {
menu:{
"Render":{
"Record":[],
"Toon":[],
"Render":[]
}
},
shade:false,
expander:'none'
}
headerMenu = [...headerMenu,fileMenuList,modelMenuList,renderMenuList];
mainDivUI.on("ready",()=>{
let mainStage = mainDivUI.stage;
let mainStageW = mainDivUI.width;
let mainStageH = mainDivUI.height;
let headerBar = new Container({
width:200,
height:50
}).addTo(mainStage);
let hList = [];
let logo = new Rectangle(500,35,'#777')
.pos(0,0,RIGHT,TOP)
.addTo(headerBar);
//해더메뉴 생성
let slcMenu;
let fileMenu = createMenu(fileMenuList,headerBar);
let modelMenu = createMenu(modelMenuList,headerBar,50);
let renderMenu = createMenu(renderMenuList,headerBar,120);
let viewPort = createViewPort(mainStage);
hList = [...hList,fileMenu, modelMenu, renderMenu]
//뷰포트 클릭시 닫힘
viewPort.tap(e=>{
console.log('뷰포트 클릭');
for(let list of hList){
if(list.items[0].toggled){
list.toggle();
list.items[0].toggled = false;
}
}
})
//탭 클릭시 탭 닫힘
for(let menu of hList){
menu.tap(e=>{
//열려있는 탭 모두 닫기
if(slcMenu !== menu){
for(let tapmenu of hList){
if(tapmenu.items[0].toggled){
tapmenu.toggle();
tapmenu.items[0].toggled = false;
}
}
//토글 오픈유부 결정하기
(!menu.items[0].toggled) ? menu.items[0].toggled = true : menu.items[0].toggled = false;
slcMenu = menu
}else{
console.log('같은 메뉴 클릭');
menu.items[0].toggled = false;
slcMenu = null;
}
})
}
//해더메뉴 끝
function createMenu(data,pos,x){
let menuList = new List({
list:data,
width:200,
viewNum:5,
shadowBlur:-1,
height:150,
pulldown:true
}).addTo(pos)
.mov(x);
return menuList;
}
function createViewPort(stage){
let viewPort = new Window({
width:500,
height:368,
backgroundColor:light,
shadowBlur:-1
}).addTo(stage)
.mov(0,35);
return viewPort;
}
console.log(renderMenu.level);
console.log(logo.level);
logo.level = 5;
viewPort.level = -1;
mainStage.update();
});
let footerDiv = new Frame({
scaling:"footerDiv",
width:700,
height:100
});
footerDiv.on("ready",()=>{
let stage = footerDiv.stage;
let stageW = footerDiv.width;
let stageH = footerDiv.height;
let blob = new Blob()
blob.addTo(stage)
.sca(.4)
.drag();
stage.update();
})
});
</script>
</body>
</html>
'웹개발 자료실 > 프론트GUI 개발Code' 카테고리의 다른 글
| 「zim.js」모션패스 애니메이션 (0) | 2021.07.19 |
|---|---|
| 『zim.js』팝업창 형식의 웹앱 제작 (0) | 2021.04.16 |
| 『zim』멀티 GUI 제작하기 (0) | 2021.04.06 |
| zim.js 레퍼런스 (0) | 2021.02.20 |
| zim.js 레이아웃 설정하기 (0) | 2021.02.09 |
댓글