맨위로가기
 

SBUx

닫기

Menu

상단메뉴를 구성할 때 사용하는 메뉴 컴포넌트 입니다.

기본 사항

사항 설명 비고
HTML 태그 형태

<sbux-menu></sbux-menu>

  
필수 속성 id, name, uitype 고정형
변동형 jsondata-ref
* 2.6.962 버전이후 변경사항 :
- id 속성 미사용시 name 값으로 자동 매핑
- uitype 속성 미사용시 SBUxDefault.js 에 설정된 값으로 자동 매핑
uitype 속성 값 normal, inbox
자식 Dom 구조 고정형

<brand-item>

 회사 로고, Site 로고 등을 위한 구조

<menu-item>

 menu 구성하기 위한 구조
변동형

<brand-item>

 회사 로고, 시스템 로고 등을 위한 구조

JSON Data 사용

 가변적인 데이터시 사용
예시) HTML 형태의 개발 - 고정형

/* 고정형 */

<sbux-menu id="idxMenu_norm" name="menu_norm" uitype="normal"

                  placement="top"

                  is-fixed="true"

                  is-inverse="false">

   <brand-item text="SoftBowl" link="./../SBUx"

                     image-src="./../sbux/data/company_logo.png"

                     image-style="width:94px;height:40px;"></brand-item>

   <menu-item link="./../total/total" text="전체"

                     image-src="./images/ico_inv.png"

                     image-style="font-size:16pt;"></menu-item>

   <menu-item text="입력 계열">

       <menu-item link="./../input/input_all" text="전체"></menu-item>

       <menu-item link="./../input/input" text="Input"></menu-item>

       <menu-item link="./../input/picker" text="Picker"></menu-item>

       <menu-item link="./../input/textarea" text="Textarea"></menu-item>

       <menu-item link="./../input/listbox" text="Listbox"></menu-item>

   </menu-item>

   <menu-item text="선택 계열">

       <menu-item link="./../select/select_all" text="전체"></menu-item>

       <menu-item link="./../select/select" text="Select"></menu-item>

       <menu-item link="./../select/checkbox" text="Checkbox"></menu-item>

       <menu-item link="./../select/radio" text="Radio"></menu-item>

       <menu-item link="./../select/listbox" text="Listbox"></menu-item>

       <menu-item link="./../select/picker" text="Picker"></menu-item>

   </menu-item>

   <menu-item link="./../locale/locale" text="다국어지원"></menu-item>

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

<script>

   var menuJson = [

       { "id" : "1",   "pid" : "0","order" : "1", "text" : "전체"   , "link" : "./../total/total" },

       { "id" : "2",   "pid" : "0","order" : "2", "text" : "입력계열" },

       { "id" : "2_1", "pid" : "2","order" : "1", "text" : "전체"  , "link" : "./../input/input_all" },

       { "id" : "2_2", "pid" : "2","order" : "2", "text" : "Input"    , "link" : "./../input/input" },

       { "id" : "2_3", "pid" : "2","order" : "3", "text" : "Picker"   , "link" : "./../input/picker" },

       { "id" : "2_4", "pid" : "2","order" : "4", "text" : "Textarea" , "link" : "./../input/textarea" },

       { "id" : "2_5", "pid" : "2","order" : "5", "text" : "Listbox"  , "link" : "./../input/listbox" },

       { "id" : "3",   "pid" : "0","order" : "3", "text" : "선택계열" },

       { "id" : "3_1", "pid" : "3","order" : "1", "text" : "전체"     , "link" : "./../select/select_all" },

       { "id" : "3_2", "pid" : "3","order" : "2", "text" : "Select"   , "link" : "./../select/select" },

       { "id" : "3_3", "pid" : "3","order" : "3", "text" : "Checkbox" , "link" : "./../select/checkbox" },

       { "id" : "3_4", "pid" : "3","order" : "4", "text" : "Radio"    , "link" : "./../select/radio" },

       { "id" : "3_5", "pid" : "3","order" : "5", "text" : "Listbox"  , "link" : "./../select/listbox" },

       { "id" : "3_6", "pid" : "3","order" : "6", "text" : "Picker"   , "link" : "./../select/picker" },

       { "id" : "4",   "pid" : "0","order" : "4", "text" : "다국어지원" }

   ];

</script>


<sbux-menu id="idxMenu_json" name="menu_json" uitype="normal"

                  placement="bottom"

                  is-fixed="true"

                  is-inverse="false"

                  jsondata-ref="menuJson"

                  jsondata-text="text"

                  jsondata-link="link"

                  jsondata-id="id"

                  jsondata-pid="pid"

                  jsondata-order="order">

   <brand-item text="SoftBowl"

ink="SBUx"

image-src="./sbux/data/company_logo.png"  

image-style="width:94px;height:40px;">

</brand-item>

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

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

<script>

   var jsonData = [                

       { "id" : "1", "pid" : "-1", "order" : "1", "text" : "SBUx" },

       { "id" : "1_1", "pid" : "1", "order" : "1", "text" : "input" },

       { "id" : "1_2", "pid" : "1", "order" : "2", "text" : "select" },

       { "id" : "2", "pid" : "-1", "order" : "2", "text" : "SBChart" },

       { "id" : "3", "pid" : "-1", "order" : "3", "text" : "SBGrid" },

       { "id" : "3_1", "pid" : "3", "order" : "1", "text" : "SBGrid 2.1" },

       { "id" : "3_2", "pid" : "3", "order" : "2", "text" : "SBGrid 2.5" }

  ];  

   $(document).ready(function(){

       $('#sbArea').sbMenu({

           name : 'sbScriptNm',

           uitype : 'normal',

           jsondataRef : 'jsonData'

       });

   });

</script>

주요 속성 사항 (고정형)

속성명 설명 / 유형(n:normal) 비고
placement 컴포넌트 위치 속성 n (top | bottom)
is-fixed 상하 스크롤시 메뉴 고정여부 n (true | false)
trigger 하위 메뉴 펼치기 동작 구분 n (hover | click)
show-all-menu 전체 메뉴 보이기 n (false | true)
show-sub-all-menu 선택한 상단메뉴 내 하위메뉴 전체 보이기 n (false | true)
layer-width show-all-menu 또는 show-sub-all-menu 시에
팝업되는 layer 의 width 설정(단위 px) 		n
css-style text 에 적용되는 css style n
target-name 메뉴명 클릭시 이동할 iframe 의 name 명 n
target 메뉴명 클릭시 이동할 target 명 n _blank: 빈 window 창
_window: layer window 창
_top: top target
_self: 호출한 화면
_parent: 부모 target
'특정 frame명': 특정 target
onclick 클릭시 이벤트 n
하위구조 태그명 속성명 설명 비고
<brand-item> 회사명,사이트명,시스템명 등 메뉴 좌측 태그
link 로고 클릭시 연결할 링크 정보
text 문자열 로고
image-src 로고가 이미지인 경우 이미지 경로 속성
image-style 이미지에 적용될 style 속성
image-alt 이미지에 적용될 alt 속성
image-title 이미지에 적용될 title 속성
<menu-item> 각 메뉴 항목 구성을 위한 태그
link 메뉴 클릭시 링크
text 메뉴명
image-src 메뉴명 좌측에 나타나는 이미지의 주소
image-style 이미지에 적용될 style 속성
image-alt 이미지에 적용될 alt 속성
image-title 이미지에 적용될 title 속성
divider 구분자 표시 속성
disabled 비활성 속성
target-name 메뉴명 클릭시 이동할 iframe 의 name 명
target 메뉴명 클릭시 이동할 target 명 _blank: 빈 window 창
_window: layer window 창
_top: top target
_self: 호출한 화면
_parent: 부모 target
'특정 frame명': 특정 target

주요 속성 사항 (변동형)

속성명 설명 / 유형(n:normal) 비고
placement 컴포넌트 위치 속성 n (top | bottom)
is-fixed 상하 스크롤시 메뉴 고정여부 n (true | false)
trigger 하위 메뉴 펼치기 동작 구분 s (hover | click)
show-all-menu 전체 메뉴 보이기 n (false | true)
show-sub-all-menu 선택한 상단메뉴 내 하위메뉴 전체 보이기 n (false | true)
layer-width show-all-menu 또는 show-sub-all-menu 시에
팝업되는 layer 의 width 설정(단위 px) 		n
css-style text 에 적용되는 css style n
target-name 메뉴명 클릭시 이동할 iframe 의 name 명 n
target 메뉴명 클릭시 이동할 target 명 n _blank: 빈 window 창
_window: layer window 창
_top: top target
_self: 호출한 화면
_parent: 부모 target
'특정 frame명': 특정 target
jsondata-ref json data 참조 변수명
예시) json data 구조 = [{"id":"1","pid":"0","order":"1",
"text":"소프트","link":""./../xxx.do",
"cssstyle":"font-size:25px",
"imagesrc" : "./images/icon/iconTitle.gif",
"imagestyle" : "width:25px;height:25px;",
"imagetitle" : "image",
"imagealt" : "image",
"divider" : "divider","disabled" : "disabled","targetname" : "subframe","target" : "_blank"
}] 		n
jsondata-id json data 내 id 참조 키명 n
jsondata-pid json data 내 pid 참조 키명 n
jsondata-order json data 내 order 참조 키명 n
jsondata-text json data 내 text 참조 키명 n
jsondata-link json data 내 link 참조 키명 n
jsondata-image-src json data 내 image 경로 참조 키명 n
jsondata-image-alt json data 내 image alt 참조 키명 n
jsondata-image-title json data 내 image title 참조 키명 n
jsondata-target-name json data 내 target name 참조 키명 n target-name 과 중복된 경우 jsondata 내 설정된 데이터를 우선합니다.
jsondata-target json data 내 target 참조 키명 n target 과 중복된 경우 jsondata 내 설정된 데이터를 우선합니다.
onclick 클릭시 이벤트 n

주요 API 사항

API 명 설명 / 데이터형(s:고정형,f:변동형) 비고
SBUxMethod.set 값을 입력 s | f
SBUxMethod.get 저장된 값 호출 s | f
SBUxMethod.refresh 재호출 s | f
SBUxMethod.hide 감추기 s | f
SBUxMethod.show 보이기 s | f
SBUxMethod.render <sbux-xxx tag >랜더링 s | f