| 사항 | 설명 | 비고 | |
|---|---|---|---|
| HTML 태그 형태 | <sbux-sidemenu></sbux-sidemenu> |
||
| 필수 속성 | id, name, uitype | 고정형 | |
| 변동형 | jsondata-ref | ||
| * 2.6.962 버전이후 변경사항 : - id 속성 미사용시 name 값으로 자동 매핑 - uitype 속성 미사용시 SBUxDefault.js 에 설정된 값으로 자동 매핑 |
|||
| uitype 속성 값 | tag, image | ||
| 자식 Dom 구조 | 고정형 | <menu-item> |
menu 를 구성하는 구조 |
| 예시) HTML 형태의 개발 - 고정형 |
|---|
|
<sbux-sidemenu id="idxSide_norm6" name="side_norm6" uitype="normal" is-expand="true" expand-open-level="1"> <menu-item id="1" text="이미지"></menu-item> <menu-item id="2" text="상담" ></menu-item> <menu-item id="3" text="조사"> <menu-item id="3_1" text="조사하위1"> <menu-item id="3_1_1" text="조사하위1_1"></menu-item> </menu-item> <menu-item id="3_2" text="조사하위2"></menu-item> </menu-item> <menu-item id="4" text="인사"> <menu-item id="4_1" text="인사하위1"></menu-item> <menu-item id="4_2" text="인사하위2"> <menu-item id="4_2_1" text="인사하위2_1"> <menu-item id="4_2_1_1" text="인사하위2_1_1"></menu-item> <menu-item id="4_2_1_2" text="인사하위2_1_2"> <menu-item id="4_2_1_2_1" text="인사하위2_1_2_1"></menu-item> </menu-item> </menu-item> </menu-item> <menu-item id="4_3" text="인사하위3"></menu-item> </menu-item> <menu-item id="5" text="기술평가"></menu-item> </sbux-sidemenu> |
| 예시) HTML 형태의 개발 - 변동형 |
|---|
|
<script> var sideJsonData = [ {"id": "1", "pid":"0", "order":"1", "text":"상담"}, {"id": "2", "pid":"0", "order":"2", "text":"조사(타켓)", "target": "_window", "link" : "samplepage/1page"}, {"id": "2_1", "pid":"2", "order":"1", "text":"조사하위"}, {"id": "3", "pid":"0", "order":"3", "text":"인사(하위에링크)"}, {"id": "3_1", "pid":"3", "order":"1", "text":"인사기록(링크)" , "link" : "samplepage/3page"}, {"id": "3_2", "pid":"3", "order":"2", "text":"기초(링크 in Json)" , "targetname": "ifmInJson", "link" : "samplepage/2page"}, {"id": "3_2_1", "pid":"3_2", "order":"1", "text":"기초1"}, {"id": "3_2_2", "pid":"3_2", "order":"2", "text":"기초2"}, {"id": "3_2_2_1", "pid":"3_2_2", "order":"1", "value": "3_2_1", "text":"기초2_1"}, {"id": "3_2_2_1_1", "pid":"3_2_2_1", "order":"1", "text":"기초2_1_1"}, {"id": "3_2_2_1_2", "pid":"3_2_2_1", "order":"2", "text":"기초2_1_2"}, {"id": "3_2_2_2", "pid":"3_2_2", "order":"2", "code" : "A001","code2" : "A001", "text":"기초2_2(사용자코드)"}, {"id": "3_2_2_2_1", "pid":"3_2_2_2", "order":"1", "text":"기초2_2_1"}, {"id": "3_2_2_3", "pid":"3_2_2", "order":"3", "text":"기초2_3"}, {"id": "4", "pid":"0", "order":"4", "text":"기술평가"}, {"id": "4_1", "pid":"4", "order":"1", "text":"기술평가_하위" }, {"id": "4_1_1", "pid":"4_1", "order":"1", "text":"기술평가_하위2" }, {"id": "5", "pid":"0", "order":"11", "text":"통계(비활성화)" , "disabled" : "disabled"}, {"id": "5_1", "pid":"5", "order":"1", "text":"통계하위" }, {"id": "6", "pid":"0", "order":"12", "text":"기타" , "disabled" : "disabled"} ]; </script> <sbux-sidemenu id="idxSide_norm" name="side_norm" uitype="normal" jsondata-ref="sideJsonData"></sbux-sidemenu> |
| 예시) jQuery Plugin 형태의 개발 |
|---|
|
<div id="sbArea"></div> <script> var sideJsonData = [ {"id": "1", "pid":"0", "order":"1", "text":"1"}, {"id": "2", "pid":"0", "order":"2", "text":"2"}, {"id": "1_1", "pid":"1", "order":"1", "text":"1_1"}, {"id": "1_2", "pid":"1", "order":"2", "text":"1_2"}, {"id": "1_1_1", "pid":"1_1", "order":"1", "text":"1_1_1"}, {"id": "1_1_2", "pid":"1_1", "order":"2", "text":"1_1_2"}, {"id": "2_1", "pid":"2", "order":"1", "text":"2_1"} ]; $(document).ready(function(){ $('#sbArea').sbSidemenu({ name : 'sbScriptNm', uitype : 'normal', jsondataRef : 'sideJsonData' }); }); </script> |
| 속성명 | 설명 / 유형(n:normal) | 비고 | |
|---|---|---|---|
| submenu-type | 메뉴를 나타내는 방식
(* submenu-type="dropdown" 시에는 show-filter-box="true" 사용할 수 없습니다.) |
n | (accordion | dropdown) |
| expand-type | 하위 구조를 확장/축소를 발생시키는 형태 all : 아이템 전체 영역(text + icon) 클릭시 확장/축소 icon : icon 클릭시에만 확장/축소 |
n | (all | icon) |
| is-expand | 로딩 시의 초기 형태를 확장된 형태로 구성 | n | (false | true) |
| expand-open-level | 로딩 시 확장되는 하위 레벨 (* is-expand = "true" 지정 필수) |
n | (사용자 지정) |
| is-expand-only-select | 선택한 menu 만 확장하고 나머지는 축소 | n | (false | true) |
| show-slide-button | sidemenu 전체 숨김 버튼 표시 여부 |
n | (false | true) |
| slide-animation | slidemenu 전체 숨김시 애니메이션 효과여부 | n | (true | false) |
| empty-message | data 가 없을때 표시할 메시지 설정 | n | (사용자 지정) |
| inactive-collapse-focus | icon 클릭에 의한 축소시 하이라이트 상태를 제거 | n | (false | true) |
| vertical-scroll-height | 세로 스크롤 높이 예시) vertical-scroll-height="200px" |
n | (사용자 지정) |
| vertical-scroll-color | 세로 스크롤 색상 (default : '#000') |
n | (사용자 지정) |
| vertical-scroll-placement | 세로 스크롤 위치 | n | (right | left) |
| vertical-scroll-size | 세로 스크롤 폭 (default : '7px') |
n | (사용자 지정) |
| show-filter-box | filtering 검색 창 화면 표시 여부 | n | (false | true) |
| filter-box-not-found-msg | 검색한 단어가 없을 시 메세지를 설정하는 기능입니다. | n | (사용자 지정) |
| filter-starts-with | 첫번째 단어부터 검색할지 여부 설정하지 않거나 false 시 like 검색 |
n | (false | true) |
| filter-box-placeholder | filtering 검색 창 placeholder 설정 (* show-filter-box = "true" 지정 필수) (default: 메뉴명 검색) |
n | (사용자 지정) |
| menu-title | 상단에 title 문구 설정 | n | (사용자 지정) |
| menu-title-style | 상단 title 문구 스타일 | n | (사용자 지정) |
| menu-title-image-src | 상단 title 영역에 이미지 주소 | n | (사용자 지정) |
| menu-title-image-style | 상단 title 영역에 이미지 스타일 | n | (사용자 지정) |
| menu-title-image-alt | 상단 title 영역에 이미지 alt 값 | n | (사용자 지정) |
| menu-title-image-title | 상단 title 영역에 이미지 title 값 | n | (사용자 지정) |
| ext-menu-html-id | filter 아래 영역에 선언된 id 의 html 구조 추가 | n | (사용자 지정) |
| is-close-icon | 1depth 메뉴에 한하여 'X' 버튼으로 메뉴삭제 여부 | n | (false | true) |
| is-draggable | 1depth 메뉴에 한하여 메뉴 아이템들을 drag & drop 으로 위치 조정 여부 | n | (false | true) |
| show-ellipsis | 메뉴명이 긴 경우 말줄임표 | n | (false | true) |
| ellipsis-width | 말줄임표의 너비 설정 | n | (사용자 지정) |
| show-tooltip | 말줄임표에 해당하는 text 를 툴팁으로 나타냄
(* show-ellipsis = "true" 와 함께 사용하는 경우 줄임말만 툴팁) |
n | (false | true) |
| tooltip-key | 툴팁으로 보여질 데이터의 json data 내 매칭 key
(* text 외에 별도 데이터와 매칭시 사용) |
n | (사용자 지정) |
| tooltip-delay | 툴팁이 나타나고 사라지는 시간 | n | (사용자 지정) |
| tooltip-show-delay | 툴팁이 마우스오버이후 나타날 때까지의 지연시간
(* 메뉴 text 위로 단순이동시에는 나타나지 않게 하기 위한 설정) |
n | (사용자 지정) |
| tooltip-hide-delay | 포커스가 벗어난 이후 사라지기 전까지의 지연시간 | n | (사용자 지정) |
| target | 메뉴명 클릭시 이동할 target 명 | n | _blank: 빈 window 창 _window: layer window 창 _top: top target _self: 호출한 화면 _parent: 부모 target '특정 frame명': 특정 target |
| target-name | 메뉴명 클릭시 이동할 iframe 의 name 명 | n | (사용자 지정) |
| callback-menu-title-click | 이미지 title 클릭할 시 callback | n | |
| callback-before-close | 'X' 버튼을 눌러 삭제되기 전에 callback | n | (return false 인경우 삭제 중지) |
| callback-after-close | 'X' 버튼을 눌러 삭제된 후에 callback | n | |
| callback-slide-button | 슬라이드버튼 클릭시 callback | n | |
| callback-before-select | menu 선택 되기전에 callback | n | (return false 인경우 선택 중지) |
| callback-after-select | menu 선택 후에 callback | n | |
| callback-click-search | 돋보기 모양 또는 검색어 입력 후 enter 시 callback | n | |
| callback-after-drop-menu | 메뉴를 drag 하여 drop 하는 이후 시점에 발생 | n | |
| onclick | 클릭시 이벤트 | n | |
| 하위구조 태그명 | 속성명 | 설명 | 비고 |
|---|---|---|---|
| <menu-item> | 각 메뉴 item 을 구성하는 구조 | ||
| text | 항목명 속성 | ||
| value | 항목값 속성 | ||
| link | 클릭시 이동 링크 주소 | style | CSS 스타일 설정 속성 | class | CSS class 설정 속성 | target | link 선택시 이동할 target | target-name | link 선택시 이동할 iframe 명 | disabled | 메뉴 비활성 |
| 속성명 | 설명 / 유형(n:normal) | 비고 | |
|---|---|---|---|
| submenu-type | 메뉴를 나타내는 방식
(* submenu-type="dropdown" 시에는 show-filter-box="true" 사용할 수 없습니다.) |
n | (accordion | dropdown) |
| jsondata-ref | json data 참조 변수명 예시) json data 구조 var jsondata = [{ id:'A011', pid :'0', order: 1, text:'A01 메뉴', link:'./A011.html', 'target':'_window'}] |
n | (사용자지정) |
| jsondata-id | json data 내 id 참조 키명 | n | (id | 사용자지정) |
| jsondata-pid | json data 내 pid 참조 키명 | n | (pid | 사용자지정) |
| jsondata-order | json data 내 order 참조 키명 | n | (ordedr | 사용자지정) |
| jsondata-text | json data 내 text 참조 키명 | n | (text | 사용자지정) |
| jsondata-value | json data 내 value 참조 키명 | n | (value | 사용자지정) |
| jsondata-link | json data 내 link 참조 키명 | n | (link | 사용자지정) |
| jsondata-style | json data 내 tyle 참조 키명 | n | (style | 사용자지정) |
| jsondata-class | json data 내 class 참조 키명 | n | (class | 사용자지정) |
| jsondata-target-name | json data 내 iframe 명에 대한 참조 키명 | n | (사용자 지정) |
| jsondata-target | json data 내 target 명에 대한 참조 키명 | n | (사용자 지정) |
| expand-type | 하위 구조를 확장/축소를 발생시키는 형태 all : 아이템 전체 영역(text + icon) 클릭시 확장/축소 icon : icon 클릭시에만 확장/축소 |
n | (all | icon) |
| is-expand | 로딩 시의 초기 형태를 확장된 형태로 구성 | n | (false | true) |
| expand-open-level | 로딩 시 확장되는 하위 레벨 (* is-expand = "true" 지정 필수) |
n | (사용자 지정) |
| is-expand-only-select | 선택한 menu 만 확장하고 나머지는 축소 | n | (false | true) |
| show-slide-button | sidemenu 전체 숨김 버튼 표시 여부 |
n | (false | true) |
| slide-animation | slidemenu 전체 숨김시 애니메이션 효과여부 | n | (true | false) |
| empty-message | data 가 없을때 표시할 메시지 설정 | n | (사용자 지정) |
| inactive-collapse-focus | icon 클릭에 의한 축소시 하이라이트 상태를 제거 | n | (false | true) |
| vertical-scroll-height | 세로 스크롤 높이 예시) vertical-scroll-height="200px" |
n | (사용자 지정) |
| vertical-scroll-color | 세로 스크롤 색상 (default : '#000') |
n | (사용자 지정) |
| vertical-scroll-placement | 세로 스크롤 위치 | n | (right | left) |
| vertical-scroll-size | 세로 스크롤 폭 (default : '7px') |
n | (사용자 지정) |
| autocomplete-ref | 자동 완성 기능 참조 데이터 객체명 | n | |
| autocomplete-text | text 에 대한 참조 key 명 | n | |
| autocomplete-value | value 에 대한 참조 key 명 | n | |
| autocomplete-height | 자동 완성 기능 팝업 창 높이 | n | |
| autocomplete-zindex | 자동 완성 기능 팝업 z-index | n | |
| autocomplete-filter-starts-with | 문장의 첫글자부터 검색 | n | |
| autocomplete-prefix | 팝업되는 리스트의 Text 앞에 특정 문구 | n | 선택 후 prefix 자동 제거 |
| autocomplete-placement | 팝업되는 리스트의 위치 | n | |
| show-filter-box | filtering 검색 창 화면 표시 여부 | n | (false | true) |
| filter-starts-with | 첫번째 단어부터 검색할지 여부 설정하지 않거나 false 시 like 검색 |
n | (false | true) |
| filter-starts-with | 첫번째 단어부터 검색할지 여부 설정하지 않거나 false 시 like 검색 |
n | (false | true) |
| filter-box-placeholder | filtering 검색 창 placeholder 설정 (* show-filter-box = "true" 지정 필수) (default: 메뉴명 검색) |
n | (사용자 지정) |
| menu-title | 상단에 title 문구 설정 | n | (사용자 지정) |
| menu-title-style | 상단 title 문구 스타일 | n | (사용자 지정) |
| menu-title-image-src | 상단 title 영역에 이미지 주소 | n | (사용자 지정) |
| menu-title-image-style | 상단 title 영역에 이미지 스타일 | n | (사용자 지정) |
| menu-title-image-alt | 상단 title 영역에 이미지 alt 값 | n | (사용자 지정) |
| menu-title-image-title | 상단 title 영역에 이미지 title 값 | n | (사용자 지정) |
| ext-menu-html-id | filter 아래 영역에 선언된 id 의 html 구조 추가 | n | (사용자 지정) |
| is-close-icon | 1depth 메뉴에 한하여 'X' 버튼으로 메뉴삭제 여부 | n | (false | true) |
| is-draggable | 1depth 메뉴에 한하여 메뉴 아이템들을 drag & drop 으로 위치 조정 여부 | n | (false | true) |
| show-ellipsis | 메뉴명이 긴 경우 말줄임표 | n | (false | true) |
| ellipsis-width | 말줄임표의 너비 설정 | n | (사용자 지정) |
| show-tooltip | 말줄임표에 해당하는 text 를 툴팁으로 나타냄
(* show-ellipsis = "true" 와 함께 사용하는 경우 줄임말만 툴팁) |
n | (false | true) |
| tooltip-key | 툴팁으로 보여질 데이터의 json data 내 매칭 key
(* text 외에 별도 데이터와 매칭시 사용) |
n | (사용자 지정) |
| tooltip-delay | 툴팁이 나타나고 사라지는 시간 | n | (사용자 지정) |
| tooltip-show-delay | 툴팁이 마우스오버이후 나타날 때까지의 지연시간
(* 메뉴 text 위로 단순이동시에는 나타나지 않게 하기 위한 설정) |
n | (사용자 지정) |
| tooltip-hide-delay | 포커스가 벗어난 이후 사라지기 전까지의 지연시간 | n | (사용자 지정) |
| target | 메뉴명 클릭시 이동할 target 명 | n | _blank: 빈 window 창 _window: layer window 창 _top: top target _self: 호출한 화면 _parent: 부모 target '특정 frame명': 특정 target |
| target-name | 메뉴명 클릭시 이동할 iframe 의 name 명 | n | (사용자 지정) |
| callback-menu-title-click | 이미지 title 클릭할 시 callback | n | |
| callback-before-close | 'X' 버튼을 눌러 삭제되기 전에 callback | n | (return false 인경우 삭제 중지) |
| callback-after-close | 'X' 버튼을 눌러 삭제된 후에 callback | n | |
| callback-slide-button | 슬라이드버튼 클릭시 callback | n | |
| callback-before-select | menu 선택 되기전에 callback | n | (return false 인경우 선택 중지) |
| callback-after-select | menu 선택 후에 callback | n | |
| callback-click-search | 돋보기 모양 또는 검색어 입력 후 enter 시 callback | n | |
| callback-after-drop-menu | 메뉴를 drag 하여 drop 하는 이후 시점에 발생 | n | |
| onclick | 클릭시 이벤트 | n | |
| API 명 | 설명 / 유형(n: normal) | 비고 | |
|---|---|---|---|
| SBUxMethod.setSideMenu | sidemenu 의 항목을 선택 | n | |
| SBUxMethod.getSideMenu | 선택된 항목을 반환
(* 반환값은 storage-data 속성 설정과 연관되어 있습니다.) |
n | |
| SBUxMethod.getSideMenuUpdateData | is-close-icon="true" 속성 사용 후
'X' 를 클릭하여 삭제 시 저장된 메뉴 리스트를 object 형태로 반환 |
n | |
| SBUxMethod.getSideMenuChangedOrderData | 변경이 이루어진 메뉴 정보의 최종위치를 기준으로 반환 | n | |
| SBUxMethod.getSideMenuChangingOrderData | 변경이 이루어진 메뉴 정보의 변경시점마다 기준으로 반환 | n | |
| SBUxMethod.expandSideMenu | 전체를 펼치거나 특정 menu id 까지 펼침 | n | |
| SBUxMethod.collapseSideMenu | 전체를 접거나 특정 menu id 까지 접음 | n | |
| SBUxMethod.openSideMenu | sidemenu 를 왼쪽에서 오른쪽으로 open
(* show-side-button = 'true' 시만 동작) |
n | |
| SBUxMethod.closeSideMenu | sidemenu 를 오른쪽에서 왼쪽으로 close
(* show-side-button = 'true' 시만 동작) |
n | |
| SBUxMethod.disableSideMenu | 메뉴를 비활성화 | n | |
| SBUxMethod.enableSideMenu | 메뉴를 활성화 | n | |
| SBUxMethod.refresh | 재호출 | n | |
| SBUxMethod.hide | 감추기 | n | |
| SBUxMethod.show | 보이기 | n | |
