웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->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
제목 | 글쓴이 | 날짜 |
---|---|---|
PHP_4_변수 | OGIT | 2008.03.25 |
PHP_5_IF 문과 기본 연산자 [1] | 아무흐 | 2008.03.26 |
PHP_6_간단한 폼 구구단을 만들어 보자 [2] | 아무흐 | 2008.03.26 |
GD를 이용해 즉석에서 룰오버 링크버튼 만들기 | 김현석181 | 2008.03.29 |
PHP_7_간단한 폼메일 만들기 [1] | 아무흐 | 2008.04.03 |
PHP에 입문하시는 분들을 위해 적어봅니다. [5] | 특급잠수부 | 2008.04.26 |
PHP 가변변수와 이항연산자에 대해 | 특급잠수부 | 2008.05.03 |
PHP_9_My-sql함수를 이용한 프로그램_1 | 아무흐 | 2008.07.15 |
기초설명_알고리즘(algorithm) [2] | ifnelse | 2008.07.28 |
기초설명_자바스크립트와 PHP와의 가장 큰 차이점 [4] | ifnelse | 2008.07.28 |
기초설명_변수를 알기전에.. [2] | ifnelse | 2008.07.28 |
간단한 ajax 채팅소스입니다. [12] | 제로저아 | 2008.10.23 |
?=down [4] | L-Goon | 2009.01.19 |
회원가입할때 중복막기 [4] | 김도훈449 | 2009.01.25 |
MySQL DB(디비)와 Table(테이블) Delete(삭제/초기화)하는 방법 [16] | 차카게살자 | 2002.01.01 |
리눅스 스왑 파티션 만들기 | skywalkers | 2001.01.03 |
윈도우에 설치된 MySQL의 root 패스워드 분실시 대처방법 [7] | Mintzz | 2001.04.29 |
[팁] mysql root password 분실했을 때 [5] | 최상훈 | 2001.09.27 |
네트워크 보안 - 스팸메일 추적 방법 [10] | 정후니 | 2001.09.29 |
linuxerv무료계정 백업받기^^ [2] | ^^shaki | 2001.02.05 |