셀렉트 박스 이뿌게 꾸미기
<script>
//insert_select(저장변수명,가로,폰트크기,보드색,배경색,선택색,화살표이미지);
//insert_select_option(저장변수명,폰트크기,보드색,배경색,선택색,value,view_value);
//기본셀릭트만들기
insert_select("test","100","8","F6D8B0","FFFFFF","F6D8B0","./images/menu_02/btn_select.gif");
//셀렉트 옵션추가
insert_select_option("test","8","F6D8B0","FFFFFF","F6D8B0","1","1");
insert_select_option("test","8","F6D8B0","FFFFFF","F6D8B0","2","2");
insert_select_option("test","8","F6D8B0","FFFFFF","F6D8B0","3","3","Y");
</script>
================================= js부분
//처리부분 js로 저장해서 사용하세요..^^
var zindex = 10000;
function insert_select ( sn,w,f,b,g,c,img) {
select_count = new Array();
select_count[sn] = 0;
zindex--;
document.write(" <div >");
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+"' name='"+sn+"' 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+"'></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>");
document.write("<div id='"+sn+"_select_div' name='"+sn+"_select_div' style='display:none;z-index:"+zindex+";position:absolute;' 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+".value=\""+v+"\";"+sn+"_select_div.style.display=\"none\";' onmouseover='this.style.background=\""+c+"\"' onmouseout='this.style.background=\""+g+"\"'>"+vv+"/"+select_count[sn] +"</span><br>";
if(select_count[sn] == 1 || chk == "Y" ) {
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";
}
}
//insert_select(저장변수명,가로,폰트크기,보드색,배경색,선택색,화살표이미지);
//insert_select_option(저장변수명,폰트크기,보드색,배경색,선택색,value,view_value);
//기본셀릭트만들기
insert_select("test","100","8","F6D8B0","FFFFFF","F6D8B0","./images/menu_02/btn_select.gif");
//셀렉트 옵션추가
insert_select_option("test","8","F6D8B0","FFFFFF","F6D8B0","1","1");
insert_select_option("test","8","F6D8B0","FFFFFF","F6D8B0","2","2");
insert_select_option("test","8","F6D8B0","FFFFFF","F6D8B0","3","3","Y");
</script>
================================= js부분
//처리부분 js로 저장해서 사용하세요..^^
var zindex = 10000;
function insert_select ( sn,w,f,b,g,c,img) {
select_count = new Array();
select_count[sn] = 0;
zindex--;
document.write(" <div >");
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+"' name='"+sn+"' 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+"'></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>");
document.write("<div id='"+sn+"_select_div' name='"+sn+"_select_div' style='display:none;z-index:"+zindex+";position:absolute;' 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+".value=\""+v+"\";"+sn+"_select_div.style.display=\"none\";' onmouseover='this.style.background=\""+c+"\"' onmouseout='this.style.background=\""+g+"\"'>"+vv+"/"+select_count[sn] +"</span><br>";
if(select_count[sn] == 1 || chk == "Y" ) {
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";
}
}
[이 게시물은 관리자님에 의해 2011-10-31 16:57:14 JavaScript에서 이동 됨]
|
댓글을 작성하시려면 로그인이 필요합니다.
로그인