맨위로가기
 

SBUx

닫기

Dropdown

Tree형태의 구조에 대해 하위나 상위로 나타나는 Dropdown menu 컴포넌트 입니다.

기본 사항

사항 설명 비고
HTML 태그 형태

<sbux-dropdown></sbux-dropdown>
필수 속성 id, name, uitype 고정형
변동형 jsondata-ref
* 2.6.962 버전이후 변경사항 :
- id 속성 미사용시 name 값으로 자동 매핑
- uitype 속성 미사용시 SBUxDefault.js 에 설정된 값으로 자동 매핑
uitype 속성 값 normal , button , splitbutton
데이터형 고정형 고정된 데이터시 사용
변동형 JSON Data 사용
가변적인 데이터시 사용
예시) HTML 형태의 개발 - 고정형

<script>

   function evt_onclick(args){

       alert("Dropdown 메뉴 클릭 시 value : " + args);

   }                

</script>


<sbux-dropdown id="idxDropdown_norm" name="dropdown_norm" uitype="normal"

                        text="Text 형태의 DropDown"

                        direction="down"

                        is-change-text="true"

                        style="font-weight:bold"

                        onclick="evt_onclick(dropdown_norm)">

   <menu-item link="javascript:void(0)" text="Action 1"></menu-item>

   <menu-item link="javascript:void(0)" text="Action 2">

       <menu-item link="javascript:void(0)" text="Action 2_1"></menu-item>

       <menu-item link="javascript:void(0)" text="Action 2_2">

           <menu-item link="javascript:void(0)" text="Action 2_2_1"></menu-item>

           <menu-item link="javascript:void(0)" text="Action 2_2_2"></menu-item>

       </menu-item>

       <menu-item link="javascript:void(0)" text="Action 2_3"></menu-item>

   </menu-item>

   <menu-item link="javascript:void(0)" text="Action 3" disabled></menu-item>

   <menu-item divider></menu-item>

   <menu-item link="javascript:void(0)" text="Action 4">

       <menu-item link="javascript:void(0)" text="Action 4_1"></menu-item>

       <menu-item link="javascript:void(0)" text="Action 4_2"></menu-item>

       <menu-item link="javascript:void(0)" text="Action 4_3"></menu-item>

       <menu-item link="javascript:void(0)" text="Action 4_4">

           <menu-item link="javascript:void(0)" text="Action 4_4_1"></menu-item>

           <menu-item link="javascript:void(0)" text="Action 4_4_2"></menu-item>

       </menu-item>

   </menu-item>

</sbux-dropdown>



<sbux-dropdown id="idxDropdown_btn" name="dropdown_btn" uitype="button"

                        text="위로 나타나는 Button 형 DropDown 메뉴"

                        direction="up"

                        button-color="blue">

   <menu-item link="javascript:void(0)" text="Action 1"></menu-item>

   <menu-item link="javascript:void(0)" text="Action 2">

       <menu-item link="javascript:void(0)" text="Action 2_1"></menu-item>

       <menu-item link="javascript:void(0)" text="Action 2_2">

           <menu-item link="javascript:void(0)" text="Action 2_2_1"></menu-item>

           <menu-item link="javascript:void(0)" text="Action 2_2_2"></menu-item>

       </menu-item>

       <menu-item link="javascript:void(0)" text="Action 2_3"></menu-item>

   </menu-item>

   <menu-item link="javascript:void(0)" text="Action 3" disabled></menu-item>

   <menu-item divider></menu-item>

   <menu-item link="javascript:void(0)" text="Action 4">

       <menu-item link="javascript:void(0)" text="Action 4_1"></menu-item>

       <menu-item link="javascript:void(0)" text="Action 4_2"></menu-item>

       <menu-item link="javascript:void(0)" text="Action 4_3"></menu-item>

       <menu-item link="javascript:void(0)" text="Action 4_4">

           <menu-item link="javascript:void(0)" text="Action 4_4_1"></menu-item>

           <menu-item link="javascript:void(0)" text="Action 4_4_2"></menu-item>

       </menu-item>

   </menu-item>

</sbux-dropdown>



<sbux-dropdown id="idxDropdown_split" name="dropdown_split" uitype="splitbutton"

                        text="Action"

                        direction="down"

                        button-color="default"

                        is-change-text="true">

   <menu-item link="javascript:void(0)" text="Action 1"></menu-item>

   <menu-item link="javascript:void(0)" text="Action 2">

       <menu-item link="javascript:void(0)" text="Action 2_1"></menu-item>

       <menu-item link="javascript:void(0)" text="Action 2_2">

           <menu-item link="javascript:void(0)" text="Action 2_2_1"></menu-item>

           <menu-item link="javascript:void(0)" text="Action 2_2_2"></menu-item>

       </menu-item>

       <menu-item link="javascript:void(0)" text="Action 2_3"></menu-item>

   </menu-item>

   <menu-item link="javascript:void(0)" text="Action 3" disabled></menu-item>

   <menu-item divider></menu-item>

   <menu-item link="javascript:void(0)" text="Action 4">

       <menu-item link="javascript:void(0)" text="Action 4_1"></menu-item>

       <menu-item link="javascript:void(0)" text="Action 4_2"></menu-item>

       <menu-item link="javascript:void(0)" text="Action 4_3"></menu-item>

       <menu-item link="javascript:void(0)" text="Action 4_4">

           <menu-item link="javascript:void(0)" text="Action 4_4_1"></menu-item>

           <menu-item link="javascript:void(0)" text="Action 4_4_2"></menu-item>

       </menu-item>

   </menu-item>

</sbux-dropdown>
예시) HTML 형태의 개발 - 변동형

<script>

   var dropdownJsonData = [

       { "id" : "4_1_2",   "pid" : "4_1","order" : "2", "text" : "Action 4_1_2" , "link" : "javascript:void(0)" },

       { "id" : "4_1",      "pid" : "4",  "order" : "1", "text" : "Action 4_1"   , "link" : "javascript:void(0)" },

       { "id" : "2_1",      "pid" : "2",  "order" : "1", "text" : "Action 2_1" , "link" : "javascript:void(0)" },

       { "id" : "4_2_2",   "pid" : "4_2","order" : "2", "text" : "Action 4_2_2" , "link" : "javascript:void(0)" },

       { "id" : "4_2",      "pid" : "4",  "order" : "2", "text" : "Action 4_2"   , "link" : "javascript:void(0)" },

       { "id" : "4_3_3_2", "pid" : "4_3_3","order" : "2", "text" : "Action 4_3_3_2" , "link" : "javascript:void(0)" },

       { "id" : "1",         "pid" : "0",  "order" : "1", "text" : "Action 1"     , "link" : "javascript:void(0)" },

       { "id" : "4_2_1_1", "pid" : "4_2_1","order" : "1", "text" : "Action 4_2_1_1"   , "link" :         "javascript:void(0)" },

       { "id" : "4_3_1",    "pid" : "4_3","order" : "1", "text" : "Action 4_3_1" , "link" : "javascript:void(0)" },

       { "id" : "3",         "pid" : "0",  "order" : "3", "text" : "Action 3" , "link" : "javascript:void(0)" ,"disabled" : "true" },

       { "id" : "4_1_1",    "pid" : "4_1","order" : "1", "text" : "Action 4_1_1"   , "link" : "javascript:void(0)" },

       { "id" : "99",        "pid" : "0",  "order" : "4", "text" : ""             , "link" : ""  ,"divider" : "true" },

       { "id" : "4",         "pid" : "0",  "order" : "5", "text" : "Action 4"     , "link" : "javascript:void(0)" },

       { "id" : "1_1",       "pid" : "1",  "order" : "1", "text" : "Action 1_1"     , "link" : "javascript:void(0)" },

       { "id" : "99",        "pid" : "4_2",  "order" : "3", "text" : ""             , "link" : ""  ,"divider" : "true" },

       { "id" : "4_3",       "pid" : "4",  "order" : "3", "text" : "Action 4_3"   , "link" : "javascript:void(0)" },

       { "id" : "2",          "pid" : "0",  "order" : "2", "text" : "Action 2"     , "link" : "javascript:void(0)" },

       { "id" : "99",        "pid" : "4_3","order" : "2", "text" : ""             , "link" : ""  ,"divider" : "true" } ,

       { "id" : "4_3_2",    "pid" : "4_3","order" : "3", "text" : "Action 4_3_2" , "link" : "javascript:void(0)" },

       { "id" : "4_2_3",    "pid" : "4_2","order" : "4", "text" : "Action 4_2_3"   , "link" : "javascript:void(0)" },

       { "id" : "4_3_3",    "pid" : "4_3","order" : "4", "text" : "Action 4_3_3" , "link" : "javascript:void(0)" },

       { "id" : "2_2",       "pid" : "2",  "order" : "2", "text" : "Action 2_2" , "link" : "javascript:void(0)" },

       { "id" : "4_2_1",    "pid" : "4_2","order" : "1", "text" : "Action 4_2_1"   , "link" : "javascript:void(0)" },

       { "id" : "4_3_3_1", "pid" : "4_3_3","order" : "1", "text" : "Action 4_3_3_1" , "link" : "javascript:void(0)" }

   ];  

</script>


<sbux-dropdown id="idxDropdown_json" name="dropdown_json" uitype="button"

                        text="JSON DATA Drop Down 메뉴"

                        direction="down"

                        jsondata-ref="dropdownJsonData"

                        jsondata-text = "text"

                        jsondata-link = "link"

                        jsondata-id   = "id"

                        jsondata-pid  = "pid"

                        jsondata-order  = "order"

                        style="width:80%;"

                        tooltip="해당 사항을 선택하세요."

                        button-color="sky">

</sbux-dropdown>
예시) jQuery Plugin 형태의 개발

<div id="sbArea"></div>

<script>

   var jsondata = [

       {id : '1', text : 'input'},

       {id : '2', text : 'picker'},

       {id : '3', text : 'radio'},

       {id : '4', text : 'select'}

   ];

   $(document).ready(function(){

       $('#sbArea').sbDropdown({

           name : 'sbScriptNm',

           uitype : 'normal',

           jsondataRef : 'jsondata',

           text : 'SBUx normal dropdown'

       });

   });

</script>

주요 속성 사항

속성명 설명 / 고정형 유형(n:normal, b:button, s:splitbutton) 비고
disabled 비활성 n | b | s
readonly 읽기 전용 n | b | s
group-id 그룹으로 묶일 id n | b | s
text 표시 문구 n | b | s
direction 메뉴의 방향 n | b | s down, up
is-change-text 메뉴 선택시 title 문구 변경 여부 n | b | s
show-breadcrumb-text title 문구의 breadcrumb 형태 적용여부 n | b | s
button-color 버튼 색상 b | s default, blue, green, sky, orange, red
onclick 클릭시 이벤트 n | b | s
onchange 값 변경시의 이벤트 n | b | s
속성명 설명 / 변동형 유형(n:normal, b:button, s:splitbutton) 비고
disabled 비활성 n | b | s
readonly 읽기 전용 n | b | s
group-id 그룹으로 묶일 id n | b | s
text 표시 문구 n | b | s
direction 메뉴의 방향 n | b | s down, up
is-change-text 메뉴 선택시 title 문구 변경 여부 n | b | s
show-breadcrumb-text title 문구의 breadcrumb 형태 적용여부 n | b | s
button-color 버튼 색상 b | s default, blue, green, sky, orange, red
jsondata-ref json data 참조 변수명
json data 구조 = [{id:'1', pid:'0', order:'1', text:'Soft',link:'',disabled:'true', 'divider':'true'}] 		n | b | s
jsondata-text json data 내 text 참조 키명 n | b | s
jsondata-link json data 내 link 참조 키명 n | b | s
jsondata-id json data 내 id 참조 키명 n | b | s
jsondata-pid json data 내 parent id 참조 키명 n | b | s
jsondata-order json data 내 order 참조 키명 n | b | s
onclick 클릭시 이벤트 n | b | s
ondblclick 더블 클릭시 이벤트 n | b | s
onchange 값 변경시의 이벤트 n | b | s

주요 API 사항

API 명 설명 / 유형(n:normal, b:button, s:splitbutton) 비고
SBUxMethod.set 값을 입력 n | b | s
SBUxMethod.get 저장된 값 호출 n | b | s
SBUxMethod.attr 속성값 변경
개별적인 disabled 시 객체로 입력
(SBUxMethod.attr('모델명', {disabled:true,target:'0,2'}) 또는
(SBUxMethod.attr('모델명', {disabled:true,target:['0','2']}) 		n | b | s readonly, disabled
SBUxMethod.refresh 재호출 n | b | s
SBUxMethod.hide 감추기 n | b | s
SBUxMethod.show 보이기 n | b | s
SBUxMethod.getAllData 전체데이터 가져오기 n | b | s
SBUxMethod.clearAllData 전체데이터 지우기 n | b | s
SBUxMethod.getGroupData group-id 로 묶여진 컴포넌트 데이터 가져오기 n | b | s
SBUxMethod.clearGroupData group-id 로 묶여진 컴포넌트 데이터 지우기 n | b | s
SBUxMethod.changeGroupAttr group-id 로 묶여진 컴포넌트 데이터 속성변경 n | b | s readonly,disabled
SBUxMethod.showGroup group-id 로 묶여진 컴포넌트 보이기 n | b | s
SBUxMethod.hideGroup group-id 로 묶여진 컴포넌트 감추기 n | b | s
SBUxMethod.refreshGroup group-id 로 묶여진 컴포넌트 refresh n | b | s
SBUxMethod.render <sbux-xxx tag >랜더링 n | b | s