웹마스터 팁
page_full_width">
[자작] select 폼 태그 html로 허접하게나마 꾸며보기
2002.11.05 05:37
으음;; http://sayclub.com 에 보면 <select 태그가 무척 이쁘게 나오는 것을 볼 수 있습니다
전에 보니 세이클럽의 js 파일을 가져다가 쓰는 방법도 공개되었던데;; 왠지 남의 것 쓰기가 뭣 해서 한번 만들어 봤습니다.
지금 로그인해 계신분은 위에 NZEO 북마크 보시면 이해가 빠를지도;;
직접 예를 들어서 출력해보면 다음과 같이 출력됩니다
위의 소스를 직접 보면 다음과 같습니다.
<script src="http://source.phper.org/selectBox/zSelectBox.js"></script>
<script>
var testSelectBox = new Array();
var testOption = new Array();
testSelectBox["id"] = "test";
testSelectBox["bordercolor"] = "#555555";
testSelectBox["bgcolor"] = "#ffffff";
testSelectBox["fontsize"] = "9";
testSelectBox["focusbgcolor"] = "#eeeeee";
testSelectBox["bullet"] = "<img src='http://source.phper.org/selectBox/select_bul.gif' border=0>";
testOption[0] = "테스트1,1";
testOption[1] = "테스트2,2";
testOption[2] = "테스트3,3";
testOption["select"] = 0;
printZSelectBox(testSelectBox,testOption);
</script>
우선 zSelectBox.js 라는 자바스크립트 파일을 불러옵니다.
소스는 그 파일안을 보면 알 수 있기에 설명은 생략합니다
원체 허접한 소스라서 설명하기도 부끄럽네요.
사용법은 두개의 array 변수에 기본 값과 option값을 넣어 주고 printZSelectBox() 함수를 호출하면 됩니다
위에서는 testSelectBox와 testOption 이라는 array 변수를 사용하였는데,
원하시는 이름으로 바꾸시면 됩니다
testSelectBox에는 몇가지 지정할 수 있는 항목이 있습니다
id 키는 가장 중요한 것인데, 이 부분은 <input type=hidden name=id값>폼을 몰래 만들어서 form에서 값을 넘길때
사용할 수 있습니다
- 위에 testSelectBox에서 사용되는 설정값을 정리해 보면 아래와 같습니다
id : selectBox의 id를 지정 (id이름으로 hidden 폼을 생성하여 선택되는 값을 입력한다)
width : selectBox의 가로크기를 지정 (절대값이나 %를 붙인 상대값 사용가능;;)
height : 높이 지정 (역시 절대/상대값 사용하면 됨)
bordercolor : 테두리 색깔을 지정
bgcolor : 배경 색깔 지정
fontcolor : 글자 색깔 지정
focusbgcolor : 선택되었을때 배경 색깔
fontsize : 글자의 크기 (숫자만 넣어야 함. 예를 들어 8을 넣으면 8pt가 됨;)
padding : cellpadding의 값을 정함
bullet : 오른쪽 화살표, <img src=...>등의 이미지도 되고, - 같은 텍스트 넣어도 됨
onChange : selectBox에서 많이 쓰는 onChange 이벤트가 일어날때 페이지 이동을 해야 할 경우 [onChange]=true를 입력하면 됨;
(이 경우에는 option의 value값에 url을 입력하면 됨)
- 그리고 testOption에서는 0 부터 원하는 option값을 추가하면 됩니다
name과 value를 , 로 연결해서 지정하면 됩니다.
예를 들어
이름
은
testOption[0] = "이름,값";
으로 하면 되죠;
(참 허접한 지정입니다만;; 간편한 사용을 위해서 그런 것이니 이해를;;)
만약 option의 초기값을 사용하고 싶은 경우에는;; testOption["select"]=0; 처럼 select 키에 인덱스값을 지정하면 됩니다
새벽에 갑자기 생각이 나서 바로 코딩한거라서 참 허접한 소스지만 혹시 필요하신 분이 계실까 해서 올립니다
악플은 사양하며; 저작권이고 뭐고 없으니 필요하시면 가져다가 이쁘게 사용해 주세요
기능 개선해서 공개해주시는 것 역시 환영합니다
* js 파일은 http://source.phper.org/selectBox/zSelectBox.js 에서 받아가세요;
전에 보니 세이클럽의 js 파일을 가져다가 쓰는 방법도 공개되었던데;; 왠지 남의 것 쓰기가 뭣 해서 한번 만들어 봤습니다.
지금 로그인해 계신분은 위에 NZEO 북마크 보시면 이해가 빠를지도;;
직접 예를 들어서 출력해보면 다음과 같이 출력됩니다
위의 소스를 직접 보면 다음과 같습니다.
<script src="http://source.phper.org/selectBox/zSelectBox.js"></script>
<script>
var testSelectBox = new Array();
var testOption = new Array();
testSelectBox["id"] = "test";
testSelectBox["bordercolor"] = "#555555";
testSelectBox["bgcolor"] = "#ffffff";
testSelectBox["fontsize"] = "9";
testSelectBox["focusbgcolor"] = "#eeeeee";
testSelectBox["bullet"] = "<img src='http://source.phper.org/selectBox/select_bul.gif' border=0>";
testOption[0] = "테스트1,1";
testOption[1] = "테스트2,2";
testOption[2] = "테스트3,3";
testOption["select"] = 0;
printZSelectBox(testSelectBox,testOption);
</script>
우선 zSelectBox.js 라는 자바스크립트 파일을 불러옵니다.
소스는 그 파일안을 보면 알 수 있기에 설명은 생략합니다
원체 허접한 소스라서 설명하기도 부끄럽네요.
사용법은 두개의 array 변수에 기본 값과 option값을 넣어 주고 printZSelectBox() 함수를 호출하면 됩니다
위에서는 testSelectBox와 testOption 이라는 array 변수를 사용하였는데,
원하시는 이름으로 바꾸시면 됩니다
testSelectBox에는 몇가지 지정할 수 있는 항목이 있습니다
id 키는 가장 중요한 것인데, 이 부분은 <input type=hidden name=id값>폼을 몰래 만들어서 form에서 값을 넘길때
사용할 수 있습니다
- 위에 testSelectBox에서 사용되는 설정값을 정리해 보면 아래와 같습니다
id : selectBox의 id를 지정 (id이름으로 hidden 폼을 생성하여 선택되는 값을 입력한다)
width : selectBox의 가로크기를 지정 (절대값이나 %를 붙인 상대값 사용가능;;)
height : 높이 지정 (역시 절대/상대값 사용하면 됨)
bordercolor : 테두리 색깔을 지정
bgcolor : 배경 색깔 지정
fontcolor : 글자 색깔 지정
focusbgcolor : 선택되었을때 배경 색깔
fontsize : 글자의 크기 (숫자만 넣어야 함. 예를 들어 8을 넣으면 8pt가 됨;)
padding : cellpadding의 값을 정함
bullet : 오른쪽 화살표, <img src=...>등의 이미지도 되고, - 같은 텍스트 넣어도 됨
onChange : selectBox에서 많이 쓰는 onChange 이벤트가 일어날때 페이지 이동을 해야 할 경우 [onChange]=true를 입력하면 됨;
(이 경우에는 option의 value값에 url을 입력하면 됨)
- 그리고 testOption에서는 0 부터 원하는 option값을 추가하면 됩니다
name과 value를 , 로 연결해서 지정하면 됩니다.
예를 들어
은
testOption[0] = "이름,값";
으로 하면 되죠;
(참 허접한 지정입니다만;; 간편한 사용을 위해서 그런 것이니 이해를;;)
만약 option의 초기값을 사용하고 싶은 경우에는;; testOption["select"]=0; 처럼 select 키에 인덱스값을 지정하면 됩니다
새벽에 갑자기 생각이 나서 바로 코딩한거라서 참 허접한 소스지만 혹시 필요하신 분이 계실까 해서 올립니다
악플은 사양하며; 저작권이고 뭐고 없으니 필요하시면 가져다가 이쁘게 사용해 주세요
기능 개선해서 공개해주시는 것 역시 환영합니다
* js 파일은 http://source.phper.org/selectBox/zSelectBox.js 에서 받아가세요;
댓글 18
-
파파스
2002.11.21 11:29
-
손종호
2002.11.16 23:49
위에 소스 도대체 링크걸면 외 에러날까요...ㅠ,ㅠ
분명 벨류값에넣었는데 -
Nas
2002.11.05 10:45
찾던겁니다.. 감사.. __)/ -
ez
2002.11.05 18:31
헉..-_- 하루만 기다렸더라면.....-_-;;전 그 하루를 못기다려서..세이에서 따서 했습니다.. ㅠ.ㅠ;;
더 복잡아요..수정할 엄두도 안남..-_-; -
Bitz
2002.11.06 03:17
이 스크립트의 장점이라하면....태그를 사용할 수 있다는 점...^^;; -
GIDJ
2002.11.08 18:39
잘쓰겠습니다... -
케이K
2002.11.08 21:38
으아아 ! ! ! 세이들어갈때마다 궁금했던 점인데 .. 제로님 감사합니다. -
GIDJ
2002.11.09 10:41
한번 누르면 열리자나요 셀렉트가
열린 상태에서 다른곳 찍으면 다시 자동으로 닫히게 아될까요? ^^;; -
행복한고니
2002.11.09 17:06
GIDJ//
그건... 이벤트로 처리하면 될 것 같은데요?
마우스 클릭 이벤트를 도큐먼트 전체에 뿌려두는거죠~ ^^
방법은 공부하시면서... 흐흐~~ -
이수매니아
2002.11.12 18:05
오~* 굿!~~ -
연청우
2002.11.12 19:51
근데 이거 새창으로 띄우려면 어떻게 하는것인지요?
아시는분 좀 가르쳐주시면 감사하겠습니다. -
이수매니아
2002.11.25 17:13
전 이거 제로님이 알려주신 셀렉트폼 제 홈에 적용시킬려고 했는데...
도저히 머리를 싸메도 제머리로는 못해서...
결국은 포기하고 일반 셀렉트를 적용시켰답니다....... T^T 주르륵 -
Cin
2002.12.06 11:34
이것 타겟지정을 어케 해야 하나요 -
토시야의그녀
2002.12.21 03:11
악 바로 제가 찾던 거에요 >ㅅ< 세이에서 가져다가 하려고 했는데
너무 복잡해서 포기했었던;; -
Piao
2003.03.17 09:29
js 파일이 없네요 ㅜ.ㅜ
있으신분 다시 올려주시길.. -
조아라
2003.03.21 09:20
세이클럽에서 돌아다니신 후에 인터넷 임시파일에 보면 js파일 있습니다. 이름도 동일...
저는 거기서 주워왔습니다. select_bul.gif 파일도... 찾아보세요. -
김관석
2003.10.04 11:31
SaySelect.js 정말 명작입니다. 아트입니다 아트. 자바 스크립트의 명작이지요. -
아드레날린
2008.12.18 19:02
제목 | 글쓴이 | 날짜 |
---|---|---|
Message 탭 (servu4.0) | 이성헌 | 2005.12.15 |
IP access (servu4.0) | 이성헌 | 2005.12.15 |
링크설정 - mapping과 유사 (for anonymous) | 이성헌 | 2005.12.15 |
client anonymous 접속시 비번 물어볼때 (servu4.0) | 이성헌 | 2005.12.15 |
가상 디렉토리 맵핑 (servu4.0) | 이성헌 | 2005.12.15 |
새로운 도메인 설정 (servu4.0) [1] | 이성헌 | 2005.12.15 |
Activity -> user - 접속차단 위주로 설명 (servu4.0) | 이성헌 | 2005.12.15 |
FTP 서버셋팅 (servu4.0) | 이성헌 | 2005.12.15 |
Stop server (servu4.0) | 이성헌 | 2005.12.15 |
FTP 서버 등록정보 | 이성헌 | 2005.12.15 |
Setup Wizard 를 이용한 FTP 서버 설정 (servu4.0) [1] | 이성헌 | 2005.12.15 |
ftp 4.0 Mapping 설정 - 요약 | 이성헌 | 2005.12.15 |
원격 서버 관리 (servu4.0) | 이성헌 | 2005.12.15 |
기존 사용자를 Group 으로 설정하기 (servu4.0) | 이성헌 | 2005.12.15 |
디렉토리 잠금시 group 현상 (servu4.0) | 이성헌 | 2005.12.15 |
사용자 Group 만들기 (servu4.0) | 이성헌 | 2005.12.15 |
그룹설정의 기본 (servu4.0) | 이성헌 | 2005.12.15 |
기존 사용자의 계정 사본 만들기 (servu4.0) | 이성헌 | 2005.12.15 |
Quota (servu4.0) | 이성헌 | 2005.12.15 |
사용자 계정 자동 삭제 (servu4.0) | 이성헌 | 2005.12.15 |
근데 그디어 해결책 발견했습니다. 스타일시트 사용하니 되네요.
아래 스타일시트 'style_select.css'로 저장하셔서 해보세요.(안되는분 있으시면..)
[링크거는 방법] head 사이에: <link rel='stylesheet' type='text/css' href='style_select.css'>
[소스]
BODY
{
FONT-SIZE: 9pt;
COLOR: #000000;
LINE-HEIGHT: 11pt;
FONT-FAMILY: "굴림";
TEXT-DECORATION: none
}
TD
{
FONT-SIZE: 9pt;
COLOR: #000000;
LINE-HEIGHT: 11pt;
FONT-FAMILY: "굴림";
TEXT-DECORATION: none
}