| 사항 | 설명 | 비고 | |
|---|---|---|---|
| HTML 태그 형태 | <sbux-breadcrumb></sbux-breadcrumb> |
||
| 필수 속성 | id, name, uitype, jsondata-ref | ||
| * 2.6.962 버전이후 변경사항 : - id 속성 미사용시 name 값으로 자동 매핑 - uitype 속성 미사용시 SBUxDefault.js 에 설정된 값으로 자동 매핑 |
|||
| uitype 속성 값 | text, select | ||
| 예시) HTML 형태의 개발 |
|---|
|
<sbux-breadcrumb id="idxBreadcrumb_text" name="breadcrumb_text" uitype="text" jsondata-ref="json1"></sbux-breadcrumb> |
| 예시) jQuery Plugin 형태의 개발 |
|---|
|
<div id="sbArea"></div> <script> $(document).ready(function(){ $('#sbArea').sbBreadcrumb({ name : 'sbScriptNm', uitype : 'select', jsondataRef : 'data1' }); }); </script> |
| 속성명 | 설명 / 유형(t:text, s:select) | 비고 | |
|---|---|---|---|
| home-icon | 가장 첫번째 메뉴의 텍스트를 아이콘으로 대체 하기 위한 속성 | t, s | 'home'지정 시 첫번째 메뉴의 텍스트 대신 'home'아이콘이 생성됨 |
| split-text | split-text 메뉴 사이에 입력되는 문자 설정 하기 위한 속성 | t, s | |
| empty-message | 메뉴데이터가 없을 때의 메시지 설정 하기 위한 속성 | t, s | (default: "No breadcrumb data founded.") |
| show-tooltip | text 마우스 오버시 tooltip 출력 여부를 설정하는 속성 | t, s | |
| target | item 클릭시 링크페이지의 이동방법을 정의한 속성 | t, s | |
| target-name | item 클릭시 iframe 영역으로, 클릭한 item 에 설정된 link 페이지를 불러오기 위해 연결하는 속성 | t, s | target-name 에 iframe 의 name 을 설정 |
| tooltip-key | 툴팁을 표시하기 위한 key를 설정하는 속성 | t, s | show-tooltip 기능 필수 적용 사항 |
| tooltip-delay | tooltip이 나타나고 사라지는 시간을 설정하는 속성 | t, s | show-tooltip 기능 필수 적용 사항 |
| tooltip-show-delay | tooltip이 나타나는 시간을 설정하는 속성 | t, s | show-tooltip 기능 필수 적용 사항 |
| tooltip-hide-delay | tooltip이 사라지는 시간을 설정하는 속성 | t, s | show-tooltip 기능 필수 적용 사항 |
| jsondata-ref | json data 를 호출하기 위한 변수명 참조 속성 | t, s | |
| jsondata-id | breadcrumb 의 부모, 자식간의 관계를 설정하기 위한 속성 | t, s | 속성을 지정하지 않았을 경우의 기본 key 명은 'id' |
| jsondata-pid | breadcrumb 의 부모, 자식간의 관계를 설정하기 위한 속성 | t, s | 속성을 지정하지 않았을 경우의 기본 key 명은 'pid' |
| jsondata-order | breadcrumb 항목의 순서에 해당하는 부문을 json data 에서 호출하기 위한 key 명을 지정하는 속성 | t, s | 속성을 지정하지 않았을 경우의 기본 key 명은 'order' |
| jsondata-text | breadcrumb 항목의 text에 해당하는 부문을 json data 에서 호출하기 위한 key 명을 지정하는 속성 | t, s | 속성을 지정하지 않았을 경우의 기본 key 명은 'text' |
| jsondata-link | breadcrumb 항목의 링크 주소에 해당하는 부문을 json data 에서 호출하기 위한 key 명을 지정하는 속성 | t, s | 속성을 지정하지 않았을 경우의 기본 key 명은 'link' |
| jsondata-style | 항목의 style에 해당하는 부분을 json data 에서 호출하기 위한 key 명을 지정하는 속성 | t, s | 속성을 지정하지 않았을 경우의 기본 key 명은 'style' |
| jsondata-image-src | 항목의 imagealt에 해당하는 부분을 json data 에서 호출하기 위한 key 명을 지정하는 속성 | t | 속성을 지정하지 않았을 경우의 기본 key 명은 'imagesrc' |
| jsondata-image-alt | 항목의 imagealt에 해당하는 부분을 json data 에서 호출하기 위한 key 명을 지정하는 속성 | t | 속성을 지정하지 않았을 경우의 기본 key 명은 'imagealt' |
| jsondata-image-title | 항목의 imagetitle 해당하는 부분을 json data 에서 호출하기 위한 key 명을 지정하는 속성 | t | 속성을 지정하지 않았을 경우의 기본 key 명은 'imagetitle' |
| jsondata-image-name | 항목의 imagename에 해당하는 부분을 json data 에서 호출하기 위한 key 명을 지정하는 속성 | t | 속성을 지정하지 않았을 경우의 기본 key 명은 'imagename' |
| jsondata-target | item 클릭시 정해진 target 으로, 클릭한 item 에 설정된 link 페이지를 불러오기 위해 연결하는 json data 내 key 명을 지정하는 속성 | t, s | 속성을 지정하지 않았을 경우의 기본 key 명은 'target' |
| jsondata-target-name | 항목 클릭 시 iframe 명에 대한 ref 명 속성 | t, s | 속성을 지정하지 않았을 경우의 기본 key 명은 'targetname' |
| vertical-scroll-height | 메뉴데이터가 많을 때 아이템리스트 높이를 설정하기 위한 속성 | s | 설정값보다 클 경우 스크롤이 생성 |
| caret-button | breadcrumb 타이틀 부분의 드롭다운 버튼ui 숨김처리 설정하는 속성 | s | |
| trigger | breadcrumb의 아이템목록을 오픈할 때 이벤트를 설정하는 속성 | s | 속성을 지정하지 않았을 경우의 기본 key 명은 'targetname' |
| callback-before-select | 클릭하였을 때 선택으로 변경되기 이전에 발생하는 callback 함수 등록 속성 | s | |
| callback-after-select | 클릭하였을 때 선택으로 변경된 이후에 발생하는 callback 함수 등록 속성 | s | |
| onclick | 클릭시 이벤트 | t, s | |
| API 명 | 설명 / 유형(n:normal) | 비고 | |
|---|---|---|---|
| SBUxMethod.setBreadcrumb | breadcrumb의 상태값을 변경 | t, s | |
| SBUxMethod.getBreadcrumb | breadcrumb의 상태값을 반환 | t, s | |
