백만년전(2004년)에 만들었던 것들...
예전에 만든거지만 기억/기록보존 차원에서 올린다. (앞으로도 계속 올릴꺼다)
자바스크립트로 만든 UI 컨트롤들...
당시 어떤 기능을 구현한 자바스크립트를 퍼와서 쓰면 사용하기가 너무 복잡해서
짜증났던 기억.
처음에는 롤오버 이미지를 만들때 onmouseover, onmouerout 등의 인라인 이벤트를 지정해주지 않고 간단하게 oversrc 라는 속성을 IMG 태그에 추가해서 하면 편하지 않을까 하는 생각에서 만들기 시작했다가 이것저것 그동안 만들고 싶었던 것들을 배설하듯이 만들어 댔던 거다.
IMG, INPUT type=image, INPUT type=button 태그에 oversrc(마우스 올렸을때 그림), pushsrc(눌렀을때 그림), fadedelay(바뀔때 서서히 변하는 속도) 등의 사용자 속성을 추가해서 사용하는 식이다.
그리고 INPUT type=checkbox, INPUT type=radio 태그에 buttonSkin 이라는 속성으로 스킨파일에 해당하는 xml 파일을 지정해 주면 체크박스/라디오버튼의 모양을 바꾸거나 약간의 이펙트를 줄수 있다.
INPUT 태그의 type 을 calendar 로 해놓고 calendarSkin 속성으로 달력디자인 스킨파일을 지정하고 format 속성으로 결과를 얻어올 형태를 지정하면 날짜 입력을 달력을 통해 할 수 있도록 해주는 스크립트다.
calendar.js 와 마찬가지로 INPUT 태그의 type 을 color 로 지정하면 색상을 선택할 수 있는 팝업창이 나오는 스크립트다.
contextmenu 속성과 contextmenuSkin 속성을 지정하면 우클릭 했을때 컨텍스트 메뉴가 나오게 하는 스크립트다. 컨텍스트 메뉴 항목의 내용은 xml 파일로 받아오기 땜에 동적으로 하위메뉴 항목 구성이 가능하다.
셀렉트박스의 디자인을 바꾼다던가 OPTION 내용에 태그를 적용한다던가 할 수 있다.
아니면 콤보박스를 구현한다던가...
처음 만들때는 selectbox 를 다른 레이어가 가질 수가 없어서 그걸 어떻게 해결할 수 없을까 해서 만들었다.
spinbox.js
스핀박스 컨트롤... 일반 INPUT type=text 에 spinboxSkin 속성을 지정해 주면 바뀐다.
탭판넬.. DIV 태그에 이것저것 속성을 넣어주면 탭판넬로 바꿔주는 스크립트
트리컨트롤... INPUT type=text 나 INPUT type=hidden 태그에 트리컨트롤 데이터의 경로(XML)를 지정해주는 등의 작업을 해주면 트리컨트롤이 된다. 왼쪽 캡처처럼 동적인 하위 트리의 로딩이 가능하다.
일반적으로 INPUT type=file 하면 파일 찾는 버튼이 항상 "찾아보기.." 또는 "Browse.." 인데 이걸 바꿀수 있게 해주는 스크립트다.
이건 내가 군대가기 전에 만들었지 아마-_-; 각각의 INPUT 폼에 notnull 이라든지 여러가지 속성을 추가해서 폼체크를 편하게 할 수 있게 하는 스크립트다.
이거 써서 몇번 (군대에서) 실무에 적용을 해봤는데... 쓰기는 매우 편리하다...
하지만! IE5.5+ 전용이라는 거!~~
내가 개념이 없을때 만든거라서 당시만 해도 '뭐 IE 에서만 지원하면 되는거지~' 하고 다른 브라우저를 전혀 염두에 두지 않았다. 지금 몇몇 내용(달력, 스핀박스)의 브라우저 호환성을 높히는 작업을 하고 있지만 나머지들은 딱히 당장 내가 쓸일이 없어서 동기부여가 되지 않고 있다-_-;