You cannot see this page without javascript.

달력 메뉴

Java Script 조회 수 360 추천 수 0 2014.06.02 14:06:33

웹으로 프로그램을 구현하다 보면 날짜를 입력해야 하는 부분이 존재합니다.

보통 텍스트 박스를 입력 박스로 쓰고 닷넷 프레임 워크에서 제공하는 달력 컨트롤을 쓰거나 별도로 만든 달력 컨트롤을 써서 구현하곤 합니다. 또는 팝업 창을 이용하거나 레이어를 이용한 달력을 만들거나 구해서 쓰죠.

 

가장 보기에 좋은 것은 DIV 태그를 이용한 레이어 달력입니다.

다 좋은데, 이 달력은 심각한 문제가 있습니다. 바로 드롭다운리스트가 가려지지 않는다는 겁니다. 드롭다운 리스트 자체가 Z-Index 가 높기 때문에 무조건 위로 나타나는데, 이걸 가리려면 팝업 창을 써야 하는데, 사실 불편하고 보기도 좋지 않습니다. 그나마 모달 윈도우가 해결책이 되기도 합니다.

 

이 문제를 해결하기 위해 자료를 찾던 중, 팝업이라는 것을 알게 되었습니다. 팝업은 윈도우에 하나만 띄울 수 있는 툴팁과 비슷한 형식을 띄는 것으로, 완전히 별도의 HTML 코드를 가지지만 부모에게 종속되는 다소 특이한 것입니다. 이 팝업에 내용을 쓰려면 자바 스크립트 코드를 이용해서 InnerHTML 에 써 줘야 합니다. 팝업에서 부모를 제어하려면 팝업창처럼 parent 를 이용해야 합니다.

 

다음은 이 팝업을 이용한 달력의 캡쳐 화면입니다.

 

 


001.gif


 

 

팝업은 좀 특이한 부분이 있는데, 부모 창의 영역에 구애를 받지 않고 부모에 단 하나만 존재할 수 있다는 점입니다. 따라서 메뉴를 만들때도 사용할 수 있으며, 다른 팝업이 뜰 때 떠 있는 팝업을 지우는 코드를 만들지 않아도 된다는 겁니다. 제한은 역시 한 번에 하나의 팝업만 띄울 수 있다는 것이지요.

 

코드는 첨부된 js 파일을 이용하면 됩니다. 즉, 쓰고 싶은 페이지에 다음 코드를 추가합니다. 경로는 저장된 위치에 맞게 해 주세요.

 

<script language="javascript" src="/js/PopupCalendar.js"></script>

그리고 쓰고자 하는 부분은 다음 코드를 이용합니다.

 

popUpCalendar(this, txtDate, 'yyyy-mm-dd')

 

대개 날짜 텍스트 박스 옆에 달력 아이콘을 이미지로 만들어서 쓸 테니까, 위의 txtDate 는 날짜를 전달 받을 텍스트 박스의 이름이며, 이 코드는 이미지 태그의 onClick 에 쓰면 됩니다. 필요에 따라 약간 바꾸어 anchor 에도 써도 됩니다.

첨부
엮인글 :
List of Articles
번호 제목 글쓴이 날짜 조회 수
369 APM mariadb download origin address LynX 2019-06-19 1991
368 APM What one can and should optimize LynX 2019-06-03 1418
367 CentOS mariadb install LynX 2019-05-31 1182
366 CentOS init mode change LynX 2019-05-30 1290
365 APM ext zip install LynX 2019-02-19 1614
364 APM ext ImageMagick install LynX 2019-02-19 513
363 3D Printer Pronterface(PrintRun) install file LynX 2018-09-13 753
362 CentOS Grub UUID change LynX 2018-08-08 869
361 Linux letsencrypt wildcard LynX 2018-07-26 798
360 Printer cura usb connection LynX 2018-07-06 666
359 CentOS cli 무선랜 LynX 2018-06-07 448
358 APM 윈도우에 APM 페키지 설치 file LynX 2018-05-04 590
357 APM MySQLTuner 설치 LynX 2018-04-27 545
356 CentOS CentOS7 커널 업데이트 LynX 2018-04-23 702
355 HTML Tag CSS 여러가지 모양 만들기 LynX 2018-02-08 772
354 Linux wkhtmltopdf wkhtmltoimage install LynX 2018-01-31 602
353 APM LZ4_LIBS Not Found (CentOS7, MariaDB 10.1.29) LynX 2018-01-03 485
352 APM mysql ./configure LynX 2017-12-15 805
351 APM PHP-7.2.0 LynX 2017-12-12 3157
350 Linux libiconv LynX 2017-12-08 558

XE Login