셀렉트박스 -> 레이어로 자동변환 스크립트 (파이어폭스) 정보
셀렉트박스 -> 레이어로 자동변환 스크립트 (파이어폭스)본문
이 소스를 참고로 수정하셔서 사용 하시면 됩니다. (소스는 보일 페이지에 추가.)
▷ 저번에 올린건 익스플러로만 됐는데 이번건 파이어폭스에서도 되더라구요 ^^;)
<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="테스트">
0
댓글 0개