02 실전에서 쓰는 소스

프로그래밍/Web 2007. 11. 28. 09:07 Posted by galad

★ 특정 인덱스 선택 시 다음 것들이 차례로 바뀌는 것.

ex) 영화표 예매 등에 쓰이는 것


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
    <HEAD>
    <TITLE> 상품 선택 자바스크립트 </TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
        var product = new Array();
        product[0] = "fashion";
        product[1] = "문구";

        var category = new Array();

        category[0] = new Array("옷","시계","신발");
        category[1] = new Array("사무용품","학용품");

        var sub = new Array();
        sub[0] = new Array();
        sub[0][0] = new Array("속옷","겉옷","바지","치마");

        sub[0][1] = new Array("초침시계","전자시계","방수시계","패션시계");

        sub[0][2] = new Array("롱부츠","샌들","운동화","구두","키높이구두");

        sub[1] = new Array();
        sub[1][0] = new Array("책상","서류철","스템프");

        sub[1][1] = new Array("샤프","연필","필통","지우개");

        function init()
        {
            var nLen = product.length;

            for(var i=0;i<nLen;i++)
            {
                var idx = document.selPro.product.length;
                document.selPro.product.length += 1;  // select의 길이를 하나 늘려서 하나 추가할 수 있게
                document.selPro.product.options[idx].text = product[i];
                document.selPro.product.options[idx].value = i;
            }
        }

        function selProduct(idx)
        {
            document.selPro.category.length =0;
            document.selPro.category.length += 1;
            document.selPro.category.options[0].text = "세부상품을 선택하세요.";

            document.selPro.sub.length =0;
            document.selPro.sub.length += 1;
            document.selPro.sub.options[0].text = "상품상세를 선택하세요.";

            for(var i=0;i<category[idx].length;i++)
            {
                var nLen = document.selPro.category.length;
                document.selPro.category.length += 1;
                document.selPro.category.options[nLen].text = category[idx][i];
                document.selPro.category.options[nLen].vale = i;
            }    
        }

        function selCategory(idx)
        {
            var productIdx = document.selPro.product.selectedIndex-1;
            document.selPro.sub.length = 0;
            document.selPro.sub.length += 1;
            document.selPro.sub.options[0].text = "상품상세를 선택하세요.";

            for(var i=0;i<sub[productIdx][idx].length;i++)
            {
                var nLen = document.selPro.sub.length;
                document.selPro.sub.length += 1;
                document.selPro.sub.options[nLen].text = sub[productIdx][idx][i];
                document.selPro.sub.options[nLen].value = i;
            }
        }
    //-->
    </SCRIPT>
</HEAD>

<BODY onLoad="init();">  <!-- onLoad는 밑의 HTML이 전부 로드된 후에 실행된다. -->
<form name="selPro" method="post" action="">
    <table>
    <tr>
        <td>
            <select name="product" onChange="selProduct(this.form.product.selectedIndex-1);">
                <option>상품분류를 선택하세요.</option>
            </select>
        </td>
        <td>
            <select name="category" onChange="selCategory(this.form.category.selectedIndex-1);">
                <option>세부상품을 선택하세요.</option>
            </select>
        </td>
        <td>
            <select name="sub">
                <option>상품상세를 선택하세요.</option>
            </select>
        </td>
        </tr>
    </table>
</form>
</BODY>
</HTML>



★ 게시판에서 글 안보였다 보였다 하는 것과, 글 내용 미리 보여주기


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <script>
    function m_view()
    {   
        if (document.getElementById("m_list").style.display != "none" )
        {
            document.getElementById("m_list").style.display = "none";  
            document.getElementById("btn_show").src = "btn_03.gif";
        }
        else
        {
            document.getElementById("m_list").style.display = "block";
            document.getElementById("btn_show").src = "btn_op01.gif";
        }
    }

    function m_preview(view)
    {
        document.getElementById("test").style.display = (view)? "block":"none";
        document.getElementById("test").style.left = window.event.x;
        document.getElementById("test").style.top = window.event.y;
        document.getElementById("test").style.width = 300;
        document.getElementById("test").style.height = 200;

        this.T_PADDING=5;
        this.T_DELAY=0;
        this.T_BORDERWIDTH=1;
        this.T_FONTFACE='돋움';
        this.T_FONTSIZE='9pt';
        this.T_FONTCOLOR='#4C4C4C';
        this.T_BORDERCOLOR='#C1C1C1';
        return escape('얼굴은 옥동녀급인데 생긴거답게 놀아라. 하이킥 날아가기전에 아갈싸물길바래.')
    }
    </script>
</HEAD>

<BODY>

<a href="javascript:m_view();"><img id="btn_show" src="btn_03.gif" border="0"></a>

<div id="m_list" style="display:none">   

    <table width="100%" cellspacing="0" cellpadding="0" border="1">
        <tr align=center bgcolor=#ffffff>     
            <td align=left><img src='4690.gif' border=0 width='19' height='19'>&nbsp;<a href="" style="cursor:hand">nambifucker</a></td>
            <td align=left ><a href="" onMouseMove="m_preview(1);" onMouseout="m_preview(0);">게시판 보기 옵션 예제</a></td>
            <td>0</td>
            <td>0</td>
            <td>09/01 20:46</td>
        </tr>
        <tr align=center bgcolor=#ffffff>     
            <td align=left><img src='4690.gif' border=0 width='19' height='19'>&nbsp;<a href="" style="cursor:hand">nambifucker</a></td>
            <td align=left >
            <a href="" onmouseover="this.T_BGCOLOR='#FEFCE1';this.T_PADDING=5;this.T_DELAY=0;this.T_BORDERWIDTH=1;this.T_FONTFACE='돋움';this.T_FONTSIZE='9pt';this.T_FONTCOLOR='#4C4C4C';this.T_BORDERCOLOR='#C1C1C1';return escape('연습용 레이어입니다.')">testssss</a></td>
            <td>0</td>
            <td>0</td>
            <td>09/01 20:46</td>
        </tr>
    </table>

</div>

<div id="test" style="position:absolute;display:none;background-color:#FEFCE1">
    <table border="0" width="100%" height="100%">
        <tr>
            <td><font color="red">연습용 레이어입니다.</font></td>
        </tr>
    </table>
</div>

<script src="wz_tooltip.js"></script>
</BODY>
</HTML>

'프로그래밍 > Web' 카테고리의 다른 글

[펌] 자바스크립트로 한글 처리  (0) 2007.11.28
[펌] 자바스크립트 정규식 알기쉽게 설명한글  (0) 2007.11.28
01 로그인....  (0) 2007.11.28
[펌] Filter 를 이용한 한글 인코딩 적용  (0) 2007.11.27
context-param  (0) 2007.11.27
 

티스토리툴바