- optGroup : 

* <select> 의 <option> 요소들을 그룹으로 묶어 주는 역할

* <optgroup> 으로 만든 그룹은 중첩하여 사용할 수 없다.

* <optgroup>는 반드시 <select> 내부에서 사용되어야 한다.

* IE6 에서는 label 속성을 지원하지 않으므로 주의해야 한다.


- optgroup 태그 속성

* class : 문서의 요소를 식별합니다.

* dir : HTML의 일세 속성은 HTML 문서의 요소 안에 있는 텍스트의 방향을 설정합니다.

* disabled : 요소를 사용하지 않도록 하는 것 입니다.

* id :문서의 요소를 식별합니다.

* label : 풀다운 메뉴에서 옵션이나, 옵션 그룹에 대한 레이블을 지정합니다.

* lang : 요소내용의 언어를 지정합니다.

* style : 요소에 대한 인라인 스타일을 지정합니다.

* title : 문서에 대한 제안제목을 열 수 있습니다.


- optgroup 태그 이벤트

* onclick : 마우스 클릭

* ondblclick : 마우스 두번 클릭

* onmousedown : 마우스 버튼을 누를 때

* onmouseup : 마우스 번은을 누른 후

* onmouseover : 마우스 포인터가 요소 위에 이동할 때

* onmousemove : 마우스 포인터가 이동할 때

* onmouseout : 마우스 포인터가 요소에서 이동할 때

* onkeypress : 키를 누르면

* onkeydown : 키를 눌렀을 때

* onkeyup : 키가 누른 후에


'공부 > HTML' 카테고리의 다른 글

HTML_ [ 링크 <A> 태그 Target 속성 ]  (1) 2013.03.26
HTML_[속성 id 와 name 차이]  (0) 2013.01.18

◈ CONNECT BY의 실행순서

    (1) START WITH 절

    (2) CONNECT BY 절

    (3) WHERE 절


 


◈ 

    START WITH : 시작위치 설정 (서브쿼리를 사용가능)

    CONNECT BY : 순환고리의 조건 (서브쿼리를 사용불가)

    ORDER SIBLINGS BY : 같은 레벨중 순환고리 순서를 정할때 사용


 


◈ PRIOR 의 위치 

    (1) CONNECT BY PRIOR 자식컬럼 =       부모컬럼  ==> 부모에서 자식으로 트리 구성

    (2) CONNECT BY       자식컬럼 = PRIOR 부모컬럼  ==> 자식에서 부모으로 트리 구성



◈ 데이터가 많아질 경우....


    - START WITH MENU_ID = 'TOP' 

          MENU_ID 컬럼에 index가 생성되어 있지 않는다면 속도를 보장할 수 없습니다.


    - CONNECT BY PRIOR MENU_ID = UP_MENU_ID 

          역시 PRIOR 쪽의 컬럼값이 상수가 되기 때문에 UP_MENU_ID컬럼에 index를 생성하여야 CONNECT BY의 속도를 보장할 수 있습니다.


    - 계층구조를 CONNECT BY, START WITH로 풀면 부분범위 처리가 불가능하고 Desc으로 표현하기가 어렵 습니다.

  


◈  

    (1) '상품' 메뉴는 모두 출력 안함.

    SELECT

            LEVEL AS LEV

          , MENU.*

    FROM    

            TBL_MENU  MENU

    WHERE               MENU.MENU_NAME  <> '상품'

    START WITH          MENU.MENU_ID = 'TOP'

    CONNECT BY PRIOR    MENU.MENU_ID = MENU.UP_MENU_ID

    ORDER SIBLINGS BY   MENU_SEQ 

    

    (2) '상품'메뉴 밑으로 모든 메뉴는 출력안함.

    SELECT

            LEVEL AS LEV

          , MENU.*

    FROM    

            TBL_MENU  MENU

    START WITH          MENU.MENU_ID    = 'TOP'

    CONNECT BY PRIOR    MENU.MENU_ID    = MENU.UP_MENU_ID

    AND                 MENU.MENU_NAME  <> '상품'

    ORDER SIBLINGS BY   MENU_SEQ 

    

    ** 참고) 메뉴중 2LEVEL까지만 결과 출력

    (WHERE조건으로도 LEVEL <= 2가능함. 그러나 권하지는 않는다. 

     왜? WHERE 조건은 모든 나온결과에 대해서 FILTER하지만 CONNECT BY절의 조건으로 넣으면 순환자체를 안한다. 즉 성능에 좋다)

    SELECT

            LEVEL AS LEV

          , MENU.*

    FROM    

            TBL_MENU  MENU

    START WITH          MENU.MENU_ID    = 'TOP'

    CONNECT BY PRIOR    MENU.MENU_ID    = MENU.UP_MENU_ID

    AND                 LEVEL  <= 2

    ORDER SIBLINGS BY   MENU_SEQ     

   

    

◈ 

    (1) 들여쓰기로 결과출력

    SELECT

            LPAD(’ ’, 4*(LEVEL-1)) || MENU.MENU_NAME

          , MENU.*

    FROM

            TBL_MENU  MENU

    WHERE               MENU_TYPE_CD = '1'

    START WITH          MENU.MENU_ID = 'TOP'

    CONNECT BY PRIOR    MENU.MENU_ID = MENU.UP_MENU_ID

    ORDER SIBLINGS BY   MENU_SEQ

    

    (2) 엑셀과 같이 셀 단위로 들여쓰기

    SELECT 

             DECODE(LEV, '1', MENU_NAME, '') AS LEV1

           , DECODE(LEV, '2', MENU_NAME, '') AS LEV2

           , DECODE(LEV, '3', MENU_NAME, '') AS LEV3

           , DECODE(LEV, '4', MENU_NAME, '') AS LEV4

           , DECODE(LEV, '5', MENU_NAME, '') AS LEV5

    FROM

           (

             SELECT

                     LEVEL AS LEV

                   , MENU.*

             FROM    TBL_MENU  MENU

             WHERE               MENU_TYPE_CD = '1'

             START WITH          MENU.MENU_ID = 'TOP'

             CONNECT BY PRIOR    MENU.MENU_ID = MENU.UP_MENU_ID         

             ORDER SIBLINGS BY   MENU_SEQ 

           ) 


    <div id="bbsTotalDiv">

        <ul id="divList">

            <li id="shareFileList">

                <a href="<c:url value="/bo/bbs/main/tab/AR_searchList.do"/>?bbsCd=${Bbs.BBS_SHARE_FILE}">                     <span onclick="jsMove('shareFileList');">공유 파일</span></a>

            </li>

            <li id="mediaList">

                <a href="<c:url value="/bo/bbs/main/tab/AR_searchList.do"/>?bbsCd=${Bbs.BBS_MEDIA}">

                <span onclick="jsMove('mediaList');">언론보도</span></a>

            </li>

            <li id="photoList">

                <a href="<c:url value="/bo/bbs/main/tab/AR_searchList.do"/>?bbsCd=${Bbs.BBS_EVENT_PHOTO}">                   <span onclick="jsMove('photoList');">행사사진</span></a>

            </li>

            <li id="movieList">

                <a href="<c:url value="/bo/bbs/main/tab/AR_searchList.do"/>?bbsCd=${Bbs.BBS_MOVIE}">

                <span onclick="jsMove('movieList');">동영상</span></a>

            </li>

            <li id="shareImgList">

                <a href="<c:url value="/bo/bbs/main/tab/AR_searchList.do"/>?bbsCd=${Bbs.BBS_SHARE_IMG}">                       <span onclick="jsMove('shareImgList');">공유 이미지</span></a>

            </li>

            <li id="prList">

                <a href="<c:url value="/bo/bbs/main/tab/AR_searchList.do"/>?bbsCd=${Bbs.BBS_PR}">

                <span onclick="jsMove('prList');">광고/홍보물</span></a>

            </li>

        </ul>

    </div>


- li  리스트가 이렇게 있으면.. 선택시 이벤트를 주고 (jsMove) Jquery 에서 순서변경

- Jquery 함수

var jsMove = function(id) {

    $("#" + id).prependTo("#divList");

};


+ Recent posts