셀렉트박스 -> 레이어로 자동변환 스크립트 (파이어폭스)
이 소스를 참고로 수정하셔서 사용 하시면 됩니다. (소스는 보일 페이지에 추가.)
▷ 저번에 올린건 익스플러로만 됐는데 이번건 파이어폭스에서도 되더라구요 ^^;)
<script>
//셀렉트박스 꾸미기
//================================================ JS
var zindex = 10000;
select_count = new Array();
ev_click = new Array();
function insert_select ( sn,w,f,b,g,c,img,event) {
ev_click[sn] = event;
select_count[sn] = 0;
zindex--;
document.write("<input type=hidden name="+sn+" id="+sn+" value=''>");
document.write(" <table border='0' cellspacing='1' cellpadding='1' width='"+w+"' style='table-layout:fixed;width:"+w+";' bgcolor='"+b+"' onclick='select_click(\""+sn+"\");' >");
document.write(" <tr>");
document.write(" <td bgcolor='"+g+"'>");
document.write(" <input type='text' id='"+sn+"_select_name' name='"+sn+"_select_name' style='border:none;cursor:hand;width:100%;font-size:"+f+"pt;' onselectstart=\"return false\" readonly> ");
document.write(" </td>");
if(img != "") {
document.write(" <td width=18 bgcolor='"+g+"' align=center valign=bottom style='cursor:hand'><img src='"+img+"' align='absmiddle'></td>");
} else {
document.write(" <td width=18 bgcolor='"+g+"' align=center valign=bottom style='cursor:hand'>v</td>");
}
document.write(" </tr>");
document.write(" </table>");
document.write("<div id='"+sn+"_select_div' name='"+sn+"_select_div' style='display:none;z-index:"+zindex+";position:absolute;cursor:hand' onmouseover='"+sn+"_select_div.style.display=\"\";' onmouseout='"+sn+"_select_div.style.display=\"none\";'>");
document.write(" <table border='0' cellspacing='1' cellpadding='1' bgcolor='"+b+"' width="+w+" onmouseover='"+sn+"_select_div.style.display=\"\";'>");
document.write(" <tr><td bgcolor='"+g+"' style='line-height:1.3em;' id='"+sn+"_select_span'></td></tr>");
document.write(" </table>");
document.write(" </div>");
}
function insert_select_option(sn,f,b,g,c,v,vv,chk) {
select_count[sn] ++;
option_html = "<span style='width:100%;font-size:"+f+"pt' onclick='"+sn+"_select_name.value=\""+vv+"\";"+sn+".value=\""+v+"\";"+sn+"_select_div.style.display=\"none\";"+ev_click[sn]+";' onmouseover='this.style.background=\""+c+"\"' onmouseout='this.style.background=\""+g+"\"'>"+vv+"</span><br>";
if(select_count[sn] == 1 || chk == "Y" ) {
document.getElementById( sn+"_select_name" ).value = vv
document.getElementById( sn).value = v
}
document.getElementById( sn+"_select_span").innerHTML += option_html;
}
function select_click(sn) {
if ( document.getElementById( sn+"_select_div").style.display == "none") {
document.getElementById( sn+"_select_div").style.display = "";
} else {
document.getElementById( sn+"_select_div").style.display = "none";
}
}
////================================================ JS
</script>
<script>
////================================================ 사용
//insert_select(저장변수명,가로,폰트크기,보드색,배경색,선택색,화살표이미지);
insert_select("test3","50","8","F6D8B0","FFFFFF","F6D8B0","");
//insert_select_option(저장변수명,폰트크기,보드색,배경색,선택색,value,view_value,초기선택여부:(Y선택);
insert_select_option("test3","8","F6D8B0","FFFFFF","F6D8B0","11","11번");
insert_select_option("test3","8","F6D8B0","FFFFFF","F6D8B0","12","12번","Y");
insert_select_option("test3","8","F6D8B0","FFFFFF","F6D8B0","13","13번");
////================================================ 사용
</script>
<input type="button" onclick="alert(document.all.test3.value);" value="테스트">
게시판 목록
그누4 팁자료실
나누면 즐거움이 커집니다.
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 3309 | 3년 전 | 1807 | ||
| 3308 | 11년 전 | 2093 | ||
| 3307 |
uPAmJ903
|
6년 전 | 4753 | |
| 3306 |
바른사나이
|
6년 전 | 3274 | |
| 3305 | 6년 전 | 12312 | ||
| 3304 | 7년 전 | 3705 | ||
| 3303 | 7년 전 | 3745 | ||
| 3302 |
지리산초보
|
7년 전 | 13597 | |
| 3301 |
sozet
|
8년 전 | 4905 | |
| 3300 |
sozet
|
8년 전 | 5974 | |
| 3299 |
sozet
|
8년 전 | 10863 | |
| 3298 | 8년 전 | 4017 | ||
| 3297 |
또치하우스
|
8년 전 | 4444 | |
| 3296 | 8년 전 | 11972 | ||
| 3295 |
또치하우스
|
8년 전 | 14988 | |
| 3294 | 8년 전 | 6028 | ||
| 3293 | 8년 전 | 5593 | ||
| 3292 |
|
9년 전 | 5320 | |
| 3291 | 9년 전 | 13683 | ||
| 3290 | 9년 전 | 5055 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기