Hello, World!
이전
목록
다음
트렌드나인

셀렉트 박스 이뿌게 꾸미기

R524
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 18년 전 · 3384
<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";
  }
}
[이 게시물은 관리자님에 의해 2011-10-31 16:57:14 JavaScript에서 이동 됨]
#개발자팁 #개발자 #팁자료실 #javascript
|
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
18년 전 조회 2,507
18년 전 조회 5,716
18년 전 조회 5,039
18년 전 조회 4,054
18년 전 조회 3,732
18년 전 조회 2,410
18년 전 조회 2,420
18년 전 조회 3,927
18년 전 조회 2,545
18년 전 조회 2,778
18년 전 조회 2,038
18년 전 조회 4,743
18년 전 조회 2,441
18년 전 조회 2,579
18년 전 조회 4,305
18년 전 조회 4,184
18년 전 조회 2,412
18년 전 조회 3,058
18년 전 조회 5,444
18년 전 조회 2,695
18년 전 조회 3,232
18년 전 조회 8,798
18년 전 조회 2,280
18년 전 조회 3,212
18년 전 조회 2,892
18년 전 조회 3,210
18년 전 조회 2,643
18년 전 조회 2,729
18년 전 조회 3,007
18년 전 조회 4,259
18년 전 조회 2,920
18년 전 조회 3,013
18년 전 조회 3,488
18년 전 조회 3,202
18년 전 조회 2,394
18년 전 조회 2,827
18년 전 조회 2,828
18년 전 조회 4,315
18년 전 조회 5,052
18년 전 조회 2,607
18년 전 조회 2,783
18년 전 조회 2,706
18년 전 조회 4,030
18년 전 조회 2,680
18년 전 조회 2,668
18년 전 조회 2,000
18년 전 조회 2,287
18년 전 조회 2,988
18년 전 조회 3,878
18년 전 조회 3,385
19년 전 조회 3,266
19년 전 조회 2,307
19년 전 조회 4,402
19년 전 조회 2,440
19년 전 조회 4,470
19년 전 조회 2,800
19년 전 조회 2,655
19년 전 조회 3,749
19년 전 조회 2,518
19년 전 조회 2,450
19년 전 조회 3,560
19년 전 조회 4,235
19년 전 조회 2,479
19년 전 조회 2,618
19년 전 조회 4,112
19년 전 조회 3,011
19년 전 조회 3,634
19년 전 조회 3,065
19년 전 조회 1,957
19년 전 조회 2,416
19년 전 조회 3,969
19년 전 조회 3,211
19년 전 조회 3,271
19년 전 조회 3,890
19년 전 조회 2,440
19년 전 조회 2,556
19년 전 조회 3,473
19년 전 조회 2,140
19년 전 조회 2,519
19년 전 조회 2,813
19년 전 조회 2,059
19년 전 조회 2,391
19년 전 조회 2,276
19년 전 조회 2,797
19년 전 조회 2,221
19년 전 조회 2,017
19년 전 조회 2,048
19년 전 조회 2,024
19년 전 조회 3,045
19년 전 조회 1,834
19년 전 조회 5,947
19년 전 조회 2,698
19년 전 조회 1,950
19년 전 조회 5,001
19년 전 조회 2,341
19년 전 조회 5,136
19년 전 조회 3,506
19년 전 조회 2,428
19년 전 조회 2,100
19년 전 조회 2,411
이전 첫 페이지 다음
글쓰기