맨위로가기
 

SBUx

닫기

Alert

변경되는 사항에 대한 메시지를 나타내고자 할 때 사용하는 컴포넌트 입니다.

기본 사항

사항 설명 비고
HTML 태그 형태

<sbux-alert></sbux-alert>
필수 속성 id, name, uitype, switch-name, case-array
* 2.6.962 버전이후 변경사항 :
- id 속성 미사용시 name 값으로 자동 매핑
- uitype 속성 미사용시 SBUxDefault.js 에 설정된 값으로 자동 매핑
uitype 속성 값 alert
예시) HTML 형태의 개발

<sbux-select id="idxSelect_alert" name="select_alert" uitype="single"

                 auto-unselected-text="true"

                 style="width:150px;" >

   <option-item value="red"  >Red</option-item>

   <option-item value="green">Green</option-item>

   <option-item value="blue" >Blue</option-item>

</sbux-select>


<sbux-alert id="idxAlert" name="alert" uitype="alert"

                switch-name="select_alert"

                case-array="{red,Color Changed,레드를 선택하셨습니다.,}

                               ^{green,,<h3>그린을 선택하셨습니다.</h3>,}

                               ^{blue,블루,블루를 선택하셨습니다.,light}"

                case-image="./../sbux/data/companyLogo.png"  

                time="1000"              

                base-mode="info"

                base-title="색상변경">

</sbux-alert>

( * alert 컴포넌트는 다른 컴포넌트의 연계동작으로 나타나는 경우가 일반적 입니다)
예시) jQuery Plugin 형태의 개발

<sbux-select id="idxSelect_alert" name="select_alert" uitype="single"

                 auto-unselected-text="true"

                 style="width:150px;" >

   <option-item value="red"  >Red</option-item>

   <option-item value="green">Green</option-item>

   <option-item value="blue" >Blue</option-item>

</sbux-select>



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

<script>

   $(document).ready(function(){

       $('#sbArea').sbAlert({

           name : 'sbScriptNm',

           uitype : 'alert',

           switchName : 'select_alert',

           caseArray : '{red,Color Changed,레드를 선택하셨습니다.,}

                         ^{green,,<h3>그린을 선택하셨습니다.</h3>,}

                         ^{blue,블루,블루를 선택하셨습니다.,light}'

       });

   });

</script>

주요 속성 사항

속성명 설명 / 유형(a:alert) 비고
switch-name 조건의 대상이 되는 컴포넌트의 name 값 a
case-array 조건의 대상이 되는 컴포넌트의 값변화에 따른 분기 처리 구문 a {매칭값,alert 타이틀,본문메시지,css style}
case-image 이미지 주소 a 여러개인 경우 '^' 로 구분
base-mode 디자인 테마형태 a info,light
base-title 전체 상단 타이틀 문구 a base-xxx 와 case-array 의 중복시 case-array 가 우선
is-fixed 자동닫힘 비활성 속성 a false,true
is-modal 뒤쪽 배경 불투명 처리 a false,true
show-window-scroll 모달 open 시 window 내 스크롤 동작여부 설정 a false,true
is-fixed-close-button alert 우측 상단 close 버튼 고정여부 a false 시 포커스시 close 버튼 표시,true
show-close-button alert 우측 상단 close 버튼 유무 a true,false
button-text alert의 confirm 확인, 취소 버튼과 footer 영역의 확인 버튼의 텍스트 설정 a JSON 타입 - { CONFIRM_OK, CONFIRM_CANCEL, CLOSE_ON_FOOTER }
time alert 창이 유지되는 시간 a 1000(1초)
placement 표시 위치 a top-right,top-left,top-center,middle-right,middle-left,middle-center
close-keyenter Enter 시 close a false,true
show-only-one alert 창이 하나만 나타나도록 제어 a false,true
is-confirm confirm 형태의 alert a script 가 중단되지 않으며, 확인과 취소 이벤트 등록
has-only-ok-button alert을 확인버튼이 있는 confirm창으로 변경하는 속성입니다. a false,true
callback-confirm-ok confirm의 확인버튼 클릭시 callback a
callback-confirm-cancel confirm의 취소버튼 클릭시 callback a
callback-before-open open 전 callback a
callback-after-open open 후 callback a
callback-before-close close 전 callback a 사용자에 의한 close 시 리턴값 true 전달
callback-after-close close 후 callback a 사용자에 의한 close 시 리턴값 true 전달

주요 API 사항

API 명 설명 / 유형(a:alert) 비고
SBUxMethod.openAlert SBUxMethod.openAlert( options 객체 );
options :
- title : alert 의 타이틀
- text : alert 내 문구
- mode : alert 의 색상 모드 (info | light)
- image : alert 좌측의 이미지 주소
- is_fixed : 고정 여부 (false | true)
- is_modal : modal 창 효과 (false | true)
- show_only_one : 하나의alert 만 띄울것인지 여부(false|true)
- is_confirm : 컨폼형태 여부(false | true)
- show_close_button : 닫힘 버튼 보임여부 (true | false)
- is_fixed_close_button : 닫힘 버튼 고정여부 (false | true)
- close_keyenter : enter 키 사용시 닫힘여부 (false | true)
- time : alert 창이 지속되는 시간( '1000' = 1초)
- placement : 위치 (top-right | top-left)
- class : css class
- wrap_class : dom 구조의 최상단에 적용되는 class
- style : css style
- wrap_style : dom 구조의 최상단에 적용되는 style
- before_open : alert 창이 나타나기 전에 callback 함수 호출
- after_open : alert 창이 나타난 후에 callback 함수 호출
- before_close : alert 창이 닫히기 전에 callback 함수 호출
- after_close : alert 창이 닫힌 후에 callback 함수 호출
- confirm_ok : is_confirm = true 한 후 열린창에서 ok 부분 클릭시
   callback 함수 호출
- confirm_cancel : is_confirm = true 한 후 열린창에서
   cancel 부분 클릭시 callback 함수 호출 		a
SBUxMethod.closeAlert open 된 alert 을 close a
SBUxMethod.render <sbux-xxx tag >랜더링 a