이전
목록
다음
트렌드나인

셀렉트 박스 이뿌게 꾸미기

R524
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2007-03-17 (토) 20:22:00 · 4201
<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
|
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
07-04-22 조회 2,922
07-04-22 조회 2,545
07-04-22 조회 2,372
07-04-22 조회 2,292
07-04-21 조회 2,362
07-04-21 조회 2,688
07-04-21 조회 2,037
07-04-21 조회 2,458
07-04-21 조회 2,300
07-04-21 조회 2,373
07-04-20 조회 4,173
07-04-20 조회 2,093
07-04-20 조회 2,311
07-04-20 조회 3,350
07-04-20 조회 3,445
07-04-20 조회 2,469
07-04-20 조회 3,073
07-04-20 조회 2,318
07-04-19 조회 3,658
07-04-18 조회 7,735
07-04-18 조회 4,948
07-04-18 조회 3,358
07-04-17 조회 7,515
07-04-17 조회 3,779
07-04-17 조회 3,826
07-04-17 조회 3,256
07-04-16 조회 3,264
07-04-16 조회 3,247
07-04-16 조회 5,118
07-04-15 조회 5,171
07-04-15 조회 6,233
07-04-14 조회 5,335
07-04-13 조회 3,756
07-04-13 조회 3,069
07-04-13 조회 4,017
07-04-13 조회 3,881
07-04-13 조회 3,384
07-04-12 조회 6,589
07-04-12 조회 5,939
07-04-12 조회 4,998
07-04-12 조회 4,597
07-04-12 조회 3,278
07-04-12 조회 3,301
07-04-12 조회 4,813
07-04-11 조회 3,425
07-04-11 조회 3,647
07-04-11 조회 2,900
07-04-11 조회 5,676
07-04-11 조회 3,309
07-04-11 조회 3,432
07-04-11 조회 5,190
07-04-08 조회 5,165
07-04-07 조회 3,266
07-04-05 조회 3,949
07-04-05 조회 6,326
07-04-04 조회 3,563
07-04-04 조회 4,133
07-04-02 조회 9,786
07-03-31 조회 3,167
07-03-31 조회 4,144
07-03-30 조회 3,756
07-03-30 조회 4,138
07-03-29 조회 3,589
07-03-29 조회 3,650
07-03-27 조회 3,880
07-03-27 조회 5,099
07-03-27 조회 3,793
07-03-26 조회 3,864
07-03-24 조회 4,378
07-03-24 조회 4,016
07-03-23 조회 3,259
07-03-22 조회 3,675
07-03-21 조회 3,696
07-03-21 조회 5,191
07-03-21 조회 5,926
07-03-20 조회 3,519
07-03-20 조회 3,696
07-03-20 조회 3,592
07-03-20 조회 4,958
07-03-19 조회 3,580
07-03-19 조회 3,510
07-03-18 조회 2,844
07-03-18 조회 3,139
07-03-18 조회 3,963
07-03-18 조회 4,713
07-03-17 조회 4,202
07-03-16 조회 4,106
07-03-16 조회 3,139
07-03-15 조회 5,249
07-03-15 조회 3,318
07-03-13 조회 5,349
07-03-13 조회 3,663
07-03-13 조회 3,547
07-03-13 조회 4,654
07-03-13 조회 3,386
07-03-13 조회 3,289
07-03-12 조회 4,424
07-03-11 조회 5,104
07-03-11 조회 3,330
07-03-11 조회 3,512
글쓰기