건

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

· 2008-04-17 (목) 01:25:57 · 3462

<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에서 이동 됨]
|
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
+
제목 글쓴이 날짜 조회
08-04-17 조회 4,360
08-03-14 조회 3,229
08-03-08 조회 3,044
08-03-06 조회 3,026
08-03-03 조회 4,318
08-02-20 조회 2,998
08-02-15 조회 3,916
08-02-11 조회 5,073
08-02-09 조회 5,807
08-02-05 조회 3,849
08-01-14 조회 6,652
08-01-11 조회 7,088
08-01-04 조회 1.1만
07-12-10 조회 4,991
07-12-10 조회 3,860
07-12-04 조회 3,402
07-11-29 조회 3,577
07-11-27 조회 3,929
07-11-23 조회 4,524
07-11-23 조회 4,254
07-11-13 조회 4,387
07-10-19 조회 4,854
07-10-17 조회 5,905
07-10-03 조회 5,068
07-10-02 조회 8,824
07-10-02 조회 4,481
07-09-09 조회 3,463
07-07-29 조회 4,344
07-07-28 조회 4,563
07-07-26 조회 4,468
07-06-19 조회 1.1만
07-06-17 조회 3,632
07-06-15 조회 4,125
07-05-31 조회 3,194
07-05-09 조회 5,346
07-05-04 조회 3,196
07-05-04 조회 3,542
07-04-28 조회 6,442
07-04-26 조회 4,687
07-04-14 조회 5,328
07-04-13 조회 3,748
07-04-12 조회 5,931
07-03-27 조회 3,875
07-03-19 조회 3,573
07-03-13 조회 4,648
07-03-07 조회 4,794
07-03-07 조회 3,308
07-02-25 조회 3,665
07-02-21 조회 4,561
07-02-18 조회 5,078
07-02-12 조회 3,423
07-02-02 조회 4,556
07-01-28 조회 6,165
07-01-27 조회 5,666
07-01-25 조회 4,036
07-01-21 조회 4,667
07-01-19 조회 6,597
07-01-19 조회 8,061
07-01-13 조회 3,528
07-01-09 조회 5,179
06-12-27 조회 3,564
06-11-24 조회 3,678
06-11-18 조회 4,194
06-10-17 조회 5,514
06-10-01 조회 4,433
06-09-26 조회 4,326
06-09-25 조회 4,646
06-09-25 조회 4,355
06-09-22 조회 4,879
06-09-22 조회 3,660
06-09-22 조회 4,505
06-09-13 조회 5,314
06-08-27 조회 4,917
06-08-26 조회 6,291
06-08-26 조회 5,595
06-08-23 조회 5,092
06-07-28 조회 7,195
06-07-24 조회 4,647
06-07-23 조회 5,435
06-07-21 조회 5,193
06-07-19 조회 3,080
06-07-19 조회 3,000
06-07-11 조회 3,645
06-07-11 조회 3,941
06-07-11 조회 4,529
06-07-11 조회 4,979
06-07-11 조회 3,595
06-07-11 조회 9,219
06-07-11 조회 4,074
06-07-11 조회 3,310
06-07-11 조회 3,359
06-07-11 조회 3,297
06-07-11 조회 3,091
06-07-07 조회 4,133
06-06-25 조회 4,481
06-06-15 조회 4,480
06-06-14 조회 4,966
06-06-11 조회 3,559
06-06-10 조회 3,940
06-06-09 조회 3,522