From 7df8cf2b7ab42feb93d23f9f3bfdafa9dd159c92 Mon Sep 17 00:00:00 2001 From: subsub Date: Tue, 17 Oct 2023 12:45:10 +0900 Subject: [PATCH] =?UTF-8?q?2023/10/17=20=EA=B8=B0=EC=86=8C=EC=9C=A0?= =?UTF-8?q?=EC=98=88,=20=EA=B5=90=EC=9C=A1=EA=B8=B0=EB=B0=98=EA=B0=95?= =?UTF-8?q?=ED=99=94=EC=97=B0=EC=88=98=20=ED=83=AD=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ve/aplct/fndtnEnhanceTrn/eduAplctList.jsp | 387 +++++++++++++----- .../web/ve/aplct/sspnIdtmt/eduAplctList.jsp | 349 +++++++++++----- .../visitEdu/usr/publish/css/common.css | 2 +- .../visitEdu/usr/publish/css/content.css | 15 + .../visitEdu/usr/publish/script/content.js | 7 + .../usr/publish/script/duetdatepicker.js | 226 ++++++++++ 6 files changed, 779 insertions(+), 207 deletions(-) diff --git a/src/main/webapp/WEB-INF/jsp/web/ve/aplct/fndtnEnhanceTrn/eduAplctList.jsp b/src/main/webapp/WEB-INF/jsp/web/ve/aplct/fndtnEnhanceTrn/eduAplctList.jsp index 262bd066..8bbe3b9e 100644 --- a/src/main/webapp/WEB-INF/jsp/web/ve/aplct/fndtnEnhanceTrn/eduAplctList.jsp +++ b/src/main/webapp/WEB-INF/jsp/web/ve/aplct/fndtnEnhanceTrn/eduAplctList.jsp @@ -157,116 +157,301 @@ $(document).ready(function(){ -
-
- - + +
+
+
베스트
-
-
- <%-- --%> - -
- ~ -
- <%-- --%> - -
- - - +
+
+
+
+
핵심인재 역량강화
+
    +
  • 핵심인재 역량강화 핵심인재 역량강화
    • +
  • 2023-09-24 ~ 2023-09-30
    • +
    • +
+
+
+
핵심인재 역량강화
+
    +
  • 핵심인재 역량강화
    • +
  • 2023-09-24 ~ 2023-09-30
    • +
    • +
+
+
+
핵심인재 역량강화
+
    +
  • 핵심인재 역량강화
    • +
  • 2023-09-24 ~ 2023-09-30
    • +
    • +
+
+
+
핵심인재 역량강화
+
    +
  • 핵심인재 역량강화
    • +
  • 2023-09-24 ~ 2023-09-30
    • +
    • +
+
+
+ + +
    +
    • +
    • +
- -
- - -<%-- --%> - - - - - - - - - - - - - - - - - - - - - - - -<%-- - - - - - - +
+
+
+ + +
+
+
+ +
+ ~ +
+ +
+ + +
+
+ +
+
총 6개의 검색결과가 있습니다.
+
    +
  • 지난교육일정
    • +
  • 당월교육일정
    • +
  • 교육예정일정
    • +
+
+ +
+
교육구분과정명신청기간교육기간신청자/정원상태교육신청
');" style="cursor:pointer;"> --%> -<%-- --%> - - - - ');" style="cursor:pointer;"> - () - - ~ - - ~ - - / - - - - - - - - - - - -
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
교육일정표
교육과정명
(상세 내용을 보시려면 과정을 클릭하세요)		일수시간교육일정(교육 시작일)
123456789101112
[경영기획] 경영기획기본21415,222242281427
[경영기획] 경영기획기본21415,222242281427
[경영기획] 경영기획기본21415,222242281427
+
+
+ +
+
+
+ + +
+
+
+ <%-- --%> + +
+ ~ +
+ <%-- --%> + +
+ + + +
+
+ + + +
+ + + <%-- --%> + + + + + + + + + + + + + + + + + + - - - - - -
교육구분과정명신청기간교육기간신청자/정원상태교육신청
-
- -
-
+ + + + + <%-- ');" style="cursor:pointer;"> --%> + <%-- --%> + + + + + ');" style="cursor:pointer;"> + () + + + ~ + + + ~ + + + / + + + + + + + + + + + + + + + + + + + + +
-
+ +
+
+
+
+
+
+ +
-
- + + +
+
- - -
- -
\ No newline at end of file diff --git a/src/main/webapp/WEB-INF/jsp/web/ve/aplct/sspnIdtmt/eduAplctList.jsp b/src/main/webapp/WEB-INF/jsp/web/ve/aplct/sspnIdtmt/eduAplctList.jsp index c0bd0488..9f9b3d2d 100644 --- a/src/main/webapp/WEB-INF/jsp/web/ve/aplct/sspnIdtmt/eduAplctList.jsp +++ b/src/main/webapp/WEB-INF/jsp/web/ve/aplct/sspnIdtmt/eduAplctList.jsp @@ -216,124 +216,263 @@ $(document).ready(function(){
-

교육신청목록

+

교육신청목록1

-
-
- - -
-
-
- <%-- --%> - + + +
    +
    • +
    • +
+ +
+
+
+ +
- ~ -
- <%-- --%> - -
- - - -
+
+
+ +
+ ~ +
+ +
+ +
+
+ +
+
총 6개의 검색결과가 있습니다.
+
    +
  • 지난교육일정
    • +
  • 당월교육일정
    • +
  • 교육예정일정
    • +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
교육일정표
교육과정명
(상세 내용을 보시려면 과정을 클릭하세요)		일수시간교육일정(교육 시작일)
123456789101112
[경영기획] 경영기획기본21415,222242281427
[경영기획] 경영기획기본21415,222242281427
[경영기획] 경영기획기본21415,222242281427
+
- - -
- - -<%-- --%> - - - - - - - - - - - - - - - - - - - - - - - -<%-- - - - - - - +
+
+
+ + +
+
+
+ <%-- --%> + +
+ ~ +
+ <%-- --%> + +
+ + + +
+
+ + +
+
교육구분과정명신청기간교육기간신청자/정원상태교육신청
');" style="cursor:pointer;"> --%> -<%-- --%> - - - - ');" style="cursor:pointer;"> - () - - ~ - - ~ - - / - - - - - - - - - - -<%-- --%> - -
+ + <%-- --%> + + + + + + + + + + + + + + + + + + - - - - - -
교육구분과정명신청기간교육기간신청자/정원상태교육신청
-
- -
-
+ + + + + <%-- ');" style="cursor:pointer;"> --%> + <%-- --%> + + + + + ');" style="cursor:pointer;"> + () + + + ~ + + + ~ + + + / + + + + + + + + + + + + + <%-- --%> + + + + + + + + +
-
+ +
+
+
+
+
+
+ +
-
- + + +
+
- - -
- -
diff --git a/src/main/webapp/visitEdu/usr/publish/css/common.css b/src/main/webapp/visitEdu/usr/publish/css/common.css index 8b2ff2a8..331f2dca 100644 --- a/src/main/webapp/visitEdu/usr/publish/css/common.css +++ b/src/main/webapp/visitEdu/usr/publish/css/common.css @@ -60,7 +60,7 @@ header.scroll{box-shadow: 0 5px 8px rgba(0,0,0,0.15);} .header_inner .dep_li_02 .depth01_li{width: calc((100% - 20px)/2);} .header_inner .dep_li_03 .depth01_li{width: calc((100% - 30px)/3);max-width:270px;} .header_inner .dep_li_05 .depth01_li{width: calc(100%/5);} -.header_inner .dep_li_06 .depth01_li{width: calc((100% - 60px)/6);} +.header_inner .dep_li_06 .depth01_li{width: calc(100%/6);} .header_inner .dep_li_07 .depth01_li:nth-child(n+2):nth-child(-n+4){width: 16%;} .header_inner .dep_li_07 .depth01_li:nth-child(n+5){width: 12%; min-width: 85px;} .header_inner .dep_li_07 .depth01_li:nth-child(1),.header_inner .dep_li_07 .depth01_li:nth-child(2){width:170px;} diff --git a/src/main/webapp/visitEdu/usr/publish/css/content.css b/src/main/webapp/visitEdu/usr/publish/css/content.css index fcbc9ff8..d7efe8c4 100644 --- a/src/main/webapp/visitEdu/usr/publish/css/content.css +++ b/src/main/webapp/visitEdu/usr/publish/css/content.css @@ -215,6 +215,21 @@ select.selType1 {height: 40px; border: 1px solid #d5d5d5; border-radius: 5px; pa .calendar_wrap input[type="text"] {width: 150px; height: 40px; font-weight: 300;} .calendar_wrap input[type="text"]:read-only {background-color: #fff;} +/* tab */ +.tab{display:flex;width:100%;border:1px solid #e9e9e9;border-bottom:1px solid #f37632;border-radius:10px 10px 0 0;margin:0 0 30px 0;} +.tab .tab_li{position:relative;border-right:1px solid #e9e9e9;} +.tab .tab_li.on::after{position:absolute;content:"";width:100%;height:calc(100% + 10px);background:#f37632;left:0;top:-10px;border-radius:10px 10px 0 0;box-shadow:0 0 5px rgba(0,0,0,0.25);} +.tab .tab_li:last-child{border-right:0;} +.tab.tab_02 .tab_li{width:calc(100%/2);} +.tab.tab_03 .tab_li{width:calc(100%/3);} +.tab.tab_04 .tab_li{width:calc(100%/4);} +.tab.tab_05 .tab_li{width:calc(100%/5);} +.tab .tab_li .tab_button{width:100%;height:50px;font-size:20px;font-weight:400;color:#666;} +.tab .tab_li.on .tab_button{position:relative;z-index:20;margin:-5px 0 0 0;font-weight:500;color:#fff;} + +.tab_content{display:none;} +.tab_content.on{display:block;} + /* table title */ .tb_tit01 {display: flex; width: 100%; justify-content: space-between; align-items: flex-end; margin-bottom: 15px;} .tb_tit01>p {font-size: 18px;} diff --git a/src/main/webapp/visitEdu/usr/publish/script/content.js b/src/main/webapp/visitEdu/usr/publish/script/content.js index 0b17e28d..3957a672 100644 --- a/src/main/webapp/visitEdu/usr/publish/script/content.js +++ b/src/main/webapp/visitEdu/usr/publish/script/content.js @@ -71,6 +71,13 @@ $(document).ready(function () { event.preventDefault(); } }); + + // tab 클릭시 + $('.tab_button').on('click',function(){ + var tabNum = $(this).closest(".tab_li").index(); + $(this).closest(".tab_li").addClass("on").siblings(".tab_li").removeClass("on"); + $('.tab_content').eq(tabNum).addClass("on").siblings('.tab_content').removeClass('on'); + }); }) function birthSelectBoxDraw(){ diff --git a/src/main/webapp/visitEdu/usr/publish/script/duetdatepicker.js b/src/main/webapp/visitEdu/usr/publish/script/duetdatepicker.js index 8cfa2d0f..227ddc49 100644 --- a/src/main/webapp/visitEdu/usr/publish/script/duetdatepicker.js +++ b/src/main/webapp/visitEdu/usr/publish/script/duetdatepicker.js @@ -1,5 +1,18 @@ $(window).on('load',function(){ + $(".startDate").each(function(idx,itm){ + if(idx != "0"){ + idx+=1; + $(itm).removeClass("startDate").addClass("startDate"+idx); + } + }); + $(".endDate").each(function(idx,itm){ + if(idx != "0"){ + idx+=1; + $(itm).removeClass("endDate").addClass("endDate"+idx); + } + }); + // input value 값 추가, 검색 시 input value 값 안없어지게. var start_duetValue = $("duet-date-picker.startDate").val(); var end_duetValue = $("duet-date-picker.endDate").val(); @@ -422,6 +435,219 @@ endDate.addEventListener("duetChange", function (e) { } }*/ + +var duetdateleng = $("duet-date-picker").length+1; +var startDateNum = []; + +setTimeout(function(){ + for (var i = 2; i 0 && arguments[0] !== undefined ? arguments[0] : "" + var createDate = arguments.length > 1 ? arguments[1] : undefined + var matches = value.match(DATE_FORMAT) + + if (matches) { + return createDate(matches[3], matches[2], matches[1]) + } + }, + format: function format(date) { + if (date.getMonth() < 9) { + if (date.getDate() < 10) { + return "" + .concat(date.getFullYear(), ".") + .concat('0', date.getMonth() + 1, ".") + .concat('0', date.getDate()) + } else { + return "" + .concat(date.getFullYear(), ".") + .concat('0', date.getMonth() + 1, ".") + .concat(date.getDate()) + } + } else { + if (date.getDate() < 10) { + return "" + .concat(date.getFullYear(), ".") + .concat(date.getMonth() + 1, ".") + .concat('0', date.getDate()) + } else { + return "" + .concat(date.getFullYear(), ".") + .concat(date.getMonth() + 1, ".") + .concat(date.getDate()) + } + } + }, + } + + // 달력 플러그인 실행 + startDateNum[i].localization = { + placeholder: '시작날짜를 입력하세요', + selectedDateMessage: 'Selected date is', + prevMonthLabel: '이전 달 보기', + nextMonthLabel: '다음 달 보기', + monthSelectLabel: '달 선택', + yearSelectLabel: '년도 선택', + closeLabel: '달력 닫기', + dayNames: ['일', '월', '화', '수', '목', '금', '토'], + monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'], + monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'], + identifier: "searchStartDt", + name: "searchStartDt" + } + + // 달력 닫았을 때 input, input[type=hidden]에 value 값 넣어주기 + startDateNum[i].addEventListener("duetClose", function (e) { + startDt = e.target; + startDtVal = e.target.value; + startSub = startDtVal.replace(/\-/g, ''); + var inputName = $(this).attr("name"); + $(".startDate").each(function(idx,itm){ + $(this).find(".duet-date__input").attr("id", inputName+idx); + $(this).find(".duet-date__input").attr("name", inputName); + $(this).find(".duet-date__input").attr("value", startSub); + $(this).find(".duet-date__input").next().attr("name", inputName+i+"_submit"); + $(this).find(".duet-date__input").next().attr("value", startSub); + }); + }); + + //날짜 값 바꼈을 때 시작일, 종료일 찾아 alert 띄우기 + startDateNum[i].addEventListener("duetChange", function (e) { + startDt = e.target; + startDtVal = e.target.value; + var n = i-1; + var endDtVal = $(".endDate"+n).find(".duet-date__input").val(); + endDtVal = endDtVal.replace(/[.]/gi, ''); + startDtVal = startDtVal.replace(/[.]/gi, ''); + if(startDtVal > endDtVal && endDtVal != ""){ + e.target.value = ""; + alert("시작일이 종료일보다 클 수 없습니다."); + }else{} + }); + + setTimeout(function(){ + //$("duet-date-picker .duet-date__input").attr("title","교육희망일을 YYYY.MM.DD 형식으로 입력해주세요11111"); + $("duet-date-picker .duet-date__input").each(function(idx,itm){ + idx+=1; + $(itm).attr("name","searchStartDt"+idx); + $(itm).attr("id","searchStartDt"+idx); + }); + $("duet-date-picker .duet-date__input").attr('onkeydown','this.value=dateSetting(this.value);'); + },100) + + startDateNum[i].addEventListener("duetFocus", function (e) { + calendarSetting(); + }); + } +},1000) + +var endDateNum = []; + +setTimeout(function(){ + for (var i = 2; i 0 && arguments[0] !== undefined ? arguments[0] : "" + var createDate = arguments.length > 1 ? arguments[1] : undefined + var matches = value.match(DATE_FORMAT) + + if (matches) { + return createDate(matches[3], matches[2], matches[1]) + } + }, + format: function format(date) { + if (date.getMonth() < 9) { + if (date.getDate() < 10) { + return "" + .concat(date.getFullYear(), ".") + .concat('0', date.getMonth() + 1, ".") + .concat('0', date.getDate()) + } else { + return "" + .concat(date.getFullYear(), ".") + .concat('0', date.getMonth() + 1, ".") + .concat(date.getDate()) + } + } else { + if (date.getDate() < 10) { + return "" + .concat(date.getFullYear(), ".") + .concat(date.getMonth() + 1, ".") + .concat('0', date.getDate()) + } else { + return "" + .concat(date.getFullYear(), ".") + .concat(date.getMonth() + 1, ".") + .concat(date.getDate()) + } + } + }, + } + + // 달력 플러그인 실행 + endDateNum[i].localization = { + placeholder: '종료날짜를 입력하세요', + selectedDateMessage: 'Selected date is', + prevMonthLabel: '이전 달 보기', + nextMonthLabel: '다음 달 보기', + monthSelectLabel: '달 선택', + yearSelectLabel: '년도 선택', + closeLabel: '달력 닫기', + dayNames: ['일', '월', '화', '수', '목', '금', '토'], + monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'], + monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'], + identifier: "searchEndDt", + name: "searchEndDt" + } + + // 달력 닫았을 때 input, input[type=hidden]에 value 값 넣어주기 + endDateNum[i].addEventListener("duetClose", function (e) { + endDt = e.target; + endDtVal = e.target.value; + endSub = endDtVal.replace(/\-/g, ''); + var inputName = $(this).attr("name"); + $(".endDate").each(function(idx,itm){ + $(this).find(".duet-date__input").attr("id", inputName+idx); + $(this).find(".duet-date__input").attr("name", inputName); + $(this).find(".duet-date__input").attr("value", endSub); + $(this).find(".duet-date__input").next().attr("name", inputName+i+"_submit"); + $(this).find(".duet-date__input").next().attr("value", endSub); + }); + }); + + //날짜 값 바꼈을 때 시작일, 종료일 찾아 alert 띄우기 + endDateNum[i].addEventListener("duetChange", function (e) { + endDt = e.target; + endDtVal = e.target.value; + var n = i-1 + var startDtVal = $(".startDate"+n).find(".duet-date__input").val(); + startDtVal = startDtVal.replace(/[.]/gi, ''); + endDtVal = endDtVal.replace(/[.]/gi, ''); + //console.log("2",startDtVal,endDtVal); + if(endDtVal < startDtVal){ + e.target.value = ""; + alert("종료일이 시작일보다 작을 수 없습니다."); + }else{} + }); + + setTimeout(function(){ + $("duet-date-picker .duet-date__input").each(function(idx,itm){ + idx+=1; + $(itm).attr("name","searchEndDt"+idx); + $(itm).attr("id","searchEndDt"+idx); + }); + $("duet-date-picker .duet-date__input").attr('onkeydown','this.value=dateSetting(this.value);'); + },100) + + endDateNum[i].addEventListener("duetFocus", function (e) { + calendarSetting(); + }); + } +},1000) + + function calendarMsgKey(ipt,startVal,endVal,startName,endName){ startVal = startVal.replace(/[.]/gi, ''); endVal = endVal.replace(/[.]/gi, '');