2025-08-29 15:46:08 +09:00
|
|
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
|
|
|
|
<%@ page import="com.pms.common.utils.*"%>
|
|
|
|
|
<%@ page import="java.util.*" %>
|
|
|
|
|
<%@include file= "/init.jsp" %>
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
|
|
|
<title><%=Constants.SYSTEM_NAME%></title>
|
|
|
|
|
<script>
|
|
|
|
|
function fntg_changeSize(){
|
2025-10-15 14:43:56 +09:00
|
|
|
var frameset = parent.document.getElementById('parentsObj');
|
|
|
|
|
var frameVal = frameset.cols;
|
|
|
|
|
var animating = false;
|
2025-08-29 15:46:08 +09:00
|
|
|
|
2025-10-15 14:43:56 +09:00
|
|
|
if (animating) return;
|
|
|
|
|
animating = true;
|
2025-08-29 15:46:08 +09:00
|
|
|
|
2025-10-15 14:43:56 +09:00
|
|
|
var startWidth, endWidth;
|
|
|
|
|
if("0px,14px,*" == frameVal || "0px,8px,*" == frameVal){
|
|
|
|
|
startWidth = 0;
|
|
|
|
|
endWidth = 197;
|
|
|
|
|
} else {
|
|
|
|
|
startWidth = 197;
|
|
|
|
|
endWidth = 0;
|
2025-08-29 15:46:08 +09:00
|
|
|
}
|
|
|
|
|
|
2025-10-15 14:43:56 +09:00
|
|
|
var duration = 300;
|
|
|
|
|
var startTime = Date.now();
|
|
|
|
|
|
|
|
|
|
function animate() {
|
|
|
|
|
var elapsed = Date.now() - startTime;
|
|
|
|
|
var progress = Math.min(elapsed / duration, 1);
|
|
|
|
|
|
|
|
|
|
// easeInOut 이징
|
|
|
|
|
progress = progress < 0.5 ? 2 * progress * progress : 1 - Math.pow(-2 * progress + 2, 2) / 2;
|
|
|
|
|
|
|
|
|
|
var currentWidth = Math.round(startWidth + (endWidth - startWidth) * progress);
|
|
|
|
|
var cols = currentWidth === 0 ? '0px,14px,*' : currentWidth + 'px,14px,*';
|
|
|
|
|
|
|
|
|
|
frameset.cols = cols;
|
|
|
|
|
|
|
|
|
|
if (progress < 1) {
|
|
|
|
|
requestAnimationFrame(animate);
|
|
|
|
|
} else {
|
|
|
|
|
animating = false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
animate();
|
2025-08-29 15:46:08 +09:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function fntg_changeSizeS(){
|
|
|
|
|
parent.document.getElementById('parentsObj').cols = "0px,1px,*";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function fntg_changeSizeM(){
|
|
|
|
|
parent.document.getElementById('parentsObj').cols = "197px,1px,*";
|
|
|
|
|
}
|
|
|
|
|
|
2025-10-15 14:43:56 +09:00
|
|
|
// 애니메이션과 함께 메뉴 숨기기
|
|
|
|
|
function fntg_changeSizeWithAnimation(){
|
|
|
|
|
var frameset = parent.document.getElementById('parentsObj');
|
|
|
|
|
var frameVal = frameset.cols;
|
|
|
|
|
var animating = false;
|
|
|
|
|
|
|
|
|
|
if (animating) return;
|
|
|
|
|
animating = true;
|
|
|
|
|
|
|
|
|
|
// 현재 메뉴가 보이는 상태라면 숨김
|
|
|
|
|
if(frameVal !== "0px,14px,*" && frameVal !== "0px,1px,*") {
|
|
|
|
|
var startWidth = 197;
|
|
|
|
|
var endWidth = 0;
|
|
|
|
|
|
|
|
|
|
var duration = 400;
|
|
|
|
|
var startTime = Date.now();
|
|
|
|
|
|
|
|
|
|
function animate() {
|
|
|
|
|
var elapsed = Date.now() - startTime;
|
|
|
|
|
var progress = Math.min(elapsed / duration, 1);
|
|
|
|
|
|
|
|
|
|
// easeInOut 이징
|
|
|
|
|
progress = progress < 0.5 ? 2 * progress * progress : 1 - Math.pow(-2 * progress + 2, 2) / 2;
|
|
|
|
|
|
|
|
|
|
var currentWidth = Math.round(startWidth + (endWidth - startWidth) * progress);
|
|
|
|
|
var cols = currentWidth === 0 ? '0px,14px,*' : currentWidth + 'px,14px,*';
|
|
|
|
|
|
|
|
|
|
frameset.cols = cols;
|
|
|
|
|
|
|
|
|
|
if (progress < 1) {
|
|
|
|
|
requestAnimationFrame(animate);
|
|
|
|
|
} else {
|
|
|
|
|
animating = false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
animate();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 애니메이션과 함께 메뉴 보이기
|
|
|
|
|
function fntg_showMenuWithAnimation(){
|
|
|
|
|
var frameset = parent.document.getElementById('parentsObj');
|
|
|
|
|
var frameVal = frameset.cols;
|
|
|
|
|
var animating = false;
|
|
|
|
|
|
|
|
|
|
if (animating) return;
|
|
|
|
|
animating = true;
|
|
|
|
|
|
|
|
|
|
// 현재 메뉴가 숨겨진 상태라면 보임
|
|
|
|
|
if(frameVal === "0px,14px,*" || frameVal === "0px,1px,*") {
|
|
|
|
|
var startWidth = 0;
|
|
|
|
|
var endWidth = 197;
|
|
|
|
|
|
|
|
|
|
var duration = 400;
|
|
|
|
|
var startTime = Date.now();
|
|
|
|
|
|
|
|
|
|
function animate() {
|
|
|
|
|
var elapsed = Date.now() - startTime;
|
|
|
|
|
var progress = Math.min(elapsed / duration, 1);
|
|
|
|
|
|
|
|
|
|
// easeInOut 이징
|
|
|
|
|
progress = progress < 0.5 ? 2 * progress * progress : 1 - Math.pow(-2 * progress + 2, 2) / 2;
|
|
|
|
|
|
|
|
|
|
var currentWidth = Math.round(startWidth + (endWidth - startWidth) * progress);
|
|
|
|
|
var cols = currentWidth === 0 ? '0px,14px,*' : currentWidth + 'px,14px,*';
|
|
|
|
|
|
|
|
|
|
frameset.cols = cols;
|
|
|
|
|
|
|
|
|
|
if (progress < 1) {
|
|
|
|
|
requestAnimationFrame(animate);
|
|
|
|
|
} else {
|
|
|
|
|
animating = false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
animate();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2025-08-29 15:46:08 +09:00
|
|
|
$(document).ready(function(){
|
|
|
|
|
|
|
|
|
|
$("#side1 img").hover(function() {
|
|
|
|
|
$(this).css("opacity","0").stop().attr("src", "/images/toggle_hover.png").animate({opacity:1},800);
|
|
|
|
|
}, function(){
|
|
|
|
|
$(this).css("opacity","1").stop().attr("src", "/images/toggle.png");
|
|
|
|
|
});
|
|
|
|
|
|
2025-10-15 14:43:56 +09:00
|
|
|
// 토글 영역에 마우스 오버 시 메뉴 표시 (애니메이션 적용)
|
|
|
|
|
$("#side1").mouseenter(function() {
|
|
|
|
|
fntg_showMenuWithAnimation();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 메뉴 영역에서 마우스가 벗어났을 때 다시 숨김 (선택적)
|
|
|
|
|
// 필요에 따라 주석 해제하여 사용
|
|
|
|
|
/*
|
|
|
|
|
$(document).mouseleave(function(e) {
|
|
|
|
|
// 마우스가 메뉴 영역을 완전히 벗어났을 때 숨김
|
|
|
|
|
if(e.pageX < 220) return; // 메뉴 영역 너비 고려
|
|
|
|
|
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
fntg_changeSizeS();
|
|
|
|
|
}, 1000); // 1초 후 자동 숨김
|
|
|
|
|
});
|
|
|
|
|
*/
|
|
|
|
|
|
2025-08-29 15:46:08 +09:00
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<form name="form1" action="" method="post">
|
|
|
|
|
<!-- 토글 기능 주석처리 230522
|
|
|
|
|
-->
|
|
|
|
|
<body id="side1" style="height:100%; background-color:#e7eaee;overflow: none;">
|
|
|
|
|
<img src="/images/toggle.png" alt="" style="cursor: pointer;" onclick="fntg_changeSize()">
|
|
|
|
|
</body>
|
|
|
|
|
</form>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
