셀렉트 박스 내용을 레이어로 표현

건다루

· 17년 전 · 조회 2208 2208

<HTML>
<HEAD>
<TITLE>http://www.blueb.co.kr</TITLE>
<script>

//SELECT -> LAYER변환
function getSelectToLayer(obj,lwidth,href)
{
if(navigator.userAgent.indexOf('Opera') != -1 || navigator.userAgent.indexOf('MSIE') == -1) { return false; }

    obj.style.display = 'none';
    var newsb = obj.id + "_sbj";
    var newid = obj.id + "_tmp";
    var newim = obj.id + "_img";
    var LayerTag = "";

    LayerTag += "<TABLE WIDTH='"+lwidth+"' CELLSPACING=0 CELLPADDING=0 STYLE='position:absolute;cursor:default;'>";
    LayerTag += "<TR HEIGHT=1><TD></TD></TR><TR><TD>";
    LayerTag += "<TABLE BGCOLOR='#FFFFFF' HEIGHT=15 WIDTH=100% CELLSPACING=1 CELLPADDING=0 STYLE='border:1 solid #C0C0C0;line-height:117%;' onmouseover=\"getSelectLayerOver(this,document.getElementById('"+newim+"'),document.getElementById('"+newid+"'));\" onmouseout=\"getSelectLayerOut(this,document.getElementById('"+newim+"'),document.getElementById('"+newid+"'));\">";

    LayerTag += "<TR WIDTH=100% onclick=\"getSelectSubLayer(document.getElementById('"+newid+"'),document.getElementById('"+newsb+"'));\">";
    LayerTag += "<TD ID='"+newsb+"' WIDTH=95% onblur='getSelectLayerBlur(this);'> " + obj.options[obj.selectedIndex].text + "</TD>";
    LayerTag += "<TD ALIGN=RIGHT><IMG ID='"+newim+"' SRC='http://www.blueb.co.kr/image/ico/dot_select.gif' ALIGN=absmiddle STYLE='filter:gray();'></TD></TR>";

    LayerTag += "</TABLE>";

    LayerTag += "<TABLE onblur='getSubLayerClose(this);' ID='"+newid+"' WIDTH=100% CELLSPACING=0 CELLPADDING=0 STYLE='display:none;border:1 solid #C0C0C0;' BGCOLOR='#FFFFFF'>";
    for (var i = 0 ; i < obj.length; i++)
    {
        LayerTag += "<TR onmouseover='getSelectMoveLayer(this);' onmouseout='getSelectMoveLayer1(this);' onclick=\"getSelectChangeLayer(document.getElementById('"+obj.id+"'),document.getElementById('"+newid+"'),document.getElementById('"+newsb+"'),'"+obj.options[i].text+"','"+obj.options[i].value+"','"+href+"');\" ";

        if (obj.value == obj.options[i].value)
        {
            LayerTag += "STYLE='background:#225588;color:#FFFFFF;'><TD> ";
        }
        else {
            LayerTag += "STYLE='background:#FFFFFF;color:#000000;'><TD> ";
        }

        LayerTag += obj.options[i].text;
        LayerTag += "</TD></TR>";
    }
    LayerTag += "</TABLE>";
    LayerTag += "</TD></TR></TABLE><IMG SRC='' WIDTH='"+lwidth+"' HEIGHT=0>";

document.write(LayerTag);
}

//서브레이어보이기
function getSelectSubLayer(obj,sobj)
{
    if(obj.style.display == 'none')
    {
        sobj.style.background = '#FFFFFF';
        sobj.style.color = '#000000';
        obj.style.display = 'block';
        NowSelectedLayer = obj;
        obj.focus();
    }
    else {
        sobj.style.background = '#225588';
        sobj.style.color = '#FFFFFF';
        obj.style.display = 'none';
    }
}

//서브레이어체크
function getSelectSubLayer1(obj)
{
    if(obj.style.display != 'none')
    {
        obj.style.display = 'none';
    }
}

//타이틀레이어 MouseOver
function getSelectLayerOver(obj,img,nobj)
{
    if (nobj.style.display == 'none')
    {
        obj.style.border = '1 solid #225588';
        img.style.filter = '';
    }
}

//타이틀레이어 MouseOut
function getSelectLayerOut(obj,img)
{
obj.style.border = '1 solid #C0C0C0';
img.style.filter = 'gray()';
}

//서브레이어 MouseOver
function getSelectMoveLayer(obj)
{
    if (obj.style.color == '#000000')
    {
        obj.style.background = '#225588';
        obj.style.color = '#FFFFFF';
    }
}
//서브레이어 MouseOut
function getSelectMoveLayer1(obj)
{
    obj.style.background = '#FFFFFF';
    obj.style.color = '#000000';
}

//새레이어선택
function getSelectChangeLayer(obj,fobj,sobj,text,value,href)
{
    if (href)
    {
        eval("document.DataForm." + href).value = value;
        location.href = getThisUrl();
        return false;
    }
    else {
        fobj.style.display = 'none';
        sobj.innerHTML = ' ' + text;
        sobj.style.background = '#225588';
        sobj.style.color = '#FFFFFF';
        sobj.focus();
        obj.value = value;
    }
}

//타이틀레이어 blur
function getSelectLayerBlur(obj)
{
obj.style.background = '#FFFFFF';
obj.style.color = '#000000';
}

//서브레이어 닫기
function getSubLayerClose(obj)
{
    if (obj.style.display != 'none')
    {
        setTimeout("document.getElementById('" + obj.id + "').style.display = 'none';" , 150);
    }
}

</script>
</HEAD>

<BODY>
<SELECT ID='search_where'>
<OPTION VALUE="ALL">전체에서</OPTION>
<OPTION VALUE="BB_SUBJECT">제목</OPTION>
<OPTION VALUE="BB_Source">Source</OPTION>
<OPTION VALUE="BB_CONTENT">본문</OPTION>
<script language=javascript>getSelectToLayer(document.getElementById('search_where'),80,''); //검색영역select->layer변환</script>

</SELECT>
</BODY>
</HTML>

[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시판 목록

팁게시판

디자인과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

글쓰기

번호	제목	글쓴이	날짜	조회
5727	리눅스백그라운드실행 #개발자 #웹서버	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	490
5726	로컬에서 자바스크립트 HTML 소스 가져오기 [1] #개발자 #php	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	1076
5725	한글날, 부산바다체, 이순신체, 야체, 스포츠카한산스 무료배포 [2] #디자이너	neue 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	1252
5724	JQuery 이미지 lazyload 플러그인입니다. [2] #개발자 #jquery	DMAN 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	964
5723	printf함수를 이용하여 문자 출력 #개발자 #기타	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	457
5722	printf함수를 이용하여 실수형 데이터 출력하기 #개발자 #기타	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	431
5721	printf함수를 이용하여 정수값 출력하기 #개발자 #기타	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	413
5720	정수값으로문자출력 putchar #개발자 #기타	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	406
5719	c언어 기초강의 - 한문자 출력 명령어 putchar #개발자 #기타	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	484
5718	C언어기초강의 - puts로 문자열 출력 #개발자 #기타	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	600
5717	[MySQL] csv 파일을 직접 MySQL 테이블로 Import 하는 방법 (대용량 파일 import 팁) #개발자 #mysql	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	862
5716	mysql에서 boolean 타입 사용하기 #개발자 #mysql	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	396
5715	jquery 플러그인: rolVideo.min.js 공개하였습니다. #개발자 #jquery	starbros 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	812
5714	[리눅스] 사양 알아보기 (메모리, CPU, HDD, 비트, 네트워크) #개발자 #웹서버	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	586
5713	mysqladmin 상태 모니터링 #개발자 #mysql	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	473
5712	리눅스 아파치 서버에 그누컨텐츠 설치하기 #개발자 #기타	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	440
5711	리눅스 프로세스 중단, 제거, 중지 - Kill #개발자 #웹서버	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	489
5710	리눅스 프로세스 검사, 조회 #개발자 #웹서버	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	450
5709	리눅스에서 네트워크 상태 보기 #개발자 #웹서버	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	473
5708	리눅스 80 포트 방화벽 열기 #개발자 #웹서버	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	815
5707	mysql 사용시 콘솔내에서 유용하게 사용할 수 있는 방법 몇가지 #개발자 #mysql	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	392
5706	Mysql Table 일괄 삭제 방법. #개발자 #mysql	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	513
5705	Mysql 특정값 제외하고 Select 하기. Not IN #개발자 #mysql	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	625
5704	mysql . update replace(치환) 방법 (mysql 팁) #개발자 #mysql	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	537
5703	mysql 상태를 확인 하는 방법 #개발자 #mysql	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	531

리눅스백그라운드실행

#개발자 #웹서버

잘살아보자

셀렉트 박스 내용을 레이어로 표현

댓글 작성

게시판 목록

팁게시판

리눅스백그라운드실행

로컬에서 자바스크립트 HTML 소스 가져오기 [1]

한글날, 부산바다체, 이순신체, 야체, 스포츠카한산스 무료배포 [2]

JQuery 이미지 lazyload 플러그인입니다. [2]

printf함수를 이용하여 문자 출력

printf함수를 이용하여 실수형 데이터 출력하기

printf함수를 이용하여 정수값 출력하기​

정수값으로문자출력 putchar

c언어 기초강의 - 한문자 출력 명령어 putchar

C언어기초강의 - puts로 문자열 출력

[MySQL] csv 파일을 직접 MySQL 테이블로 Import 하는 방법 (대용량 파일 import 팁)

mysql에서 boolean 타입 사용하기

jquery 플러그인: rolVideo.min.js 공개하였습니다.

[리눅스] 사양 알아보기 (메모리, CPU, HDD, 비트, 네트워크)

mysqladmin 상태 모니터링

리눅스 아파치 서버에 그누컨텐츠 설치하기

리눅스 프로세스 중단, 제거, 중지 - Kill

리눅스 프로세스 검사, 조회

리눅스에서 네트워크 상태 보기

리눅스 80 포트 방화벽 열기

mysql 사용시 콘솔내에서 유용하게 사용할 수 있는 방법 몇가지

Mysql Table 일괄 삭제 방법.

Mysql 특정값 제외하고 Select 하기. Not IN

mysql . update replace(치환) 방법 (mysql 팁)

mysql 상태를 확인 하는 방법

printf함수를 이용하여 정수값 출력하기