필독 
- 좌측 사이드 메뉴 클릭시 해당 컴포넌트 기능들을 확인 할 수 있습니다.
- 다양한 소스코드가 하나의 페이지에 들어 있어 가독성을 높이기 위한 소스코드 하이라이트를 사용하여 초기 로딩 속도가 다소 느릴 수 있으나, 
컴포넌트를 초기에 로딩하지 않고 샘플 확인 버튼 클릭시에 컴포넌트를 나타내기 때문에 초기 로딩 속도에 관여하지 않습니다.
- API의 경우 chrome 브라우저에 최적화 되어 있습니다.

구성

Description


<head>
	<!-- 제품위치 설정을 하는 제품 상대경로입니다. SBUx 폴더의 상위까지 설정합니다. -->
	<script type="text/javascript">
	var SBUxConfig = {
		Path : "./../../resources/sbux",
		SBGrid : {	
			Theme : 'default',	
			Version2_5 : true,
			Version3_0 : true,
		},
		SBChart : {	
			Version2_0 : true	
		},
	};
	</script>

	<!-- SBUx.js 호출 -->
	<script src="./../../resources/sbux/SBUx.js" type="text/javascript"></script>	// 필수, SBUx.js를 호출하는 구문

	<!-- 개발 시 사용할 jquery 버전은 SBUx.js 호출 이후 구문에 삽입하시기 바랍니다.
	(제품에서 사용하는 jquery 버전은 1.11.3 입니다.) -->
</head>

<body>

	... 중략

	<sbux-input id="idx" name="idx" uitype="text"></sbux-input>

	... 중략

</body>

SBUxConfig 속성

필수여부 속성명 설명 기본값 예제
Y Path SBUx폴더의 위치를 지정합니다. - Path : "./../../resources/sbux"
N SBGrid 자사 그리드 제품과의 호환을 위한 부분입니다.
Theme 그리드 2.5의 테마설정입니다. "default" Theme : "default"
Version2_5 SBGrid2.5를 화면에서 사용하시는 경우 true로 설정합니다. - Version2_5 : true
Version3_0 SBGrid3.0을 화면에서 사용하시는 경우 true로 설정합니다. - Version3_0 : true
Excel Excel 관련 설정합니다.
Local SBGrid2.5 의 exportLocalExcel 및 exportData (엑셀 로컬다운로드) 기능을 사용하지 않는 경우 사용됩니다. true Local : false
N SBChart 자사 차트 제품과의 호환을 위한 부분입니다.
Version2_0 SBChart2.0를 화면에서 사용하시는 경우 true로 설정합니다. - Version2_0 : true
N License 라이선스 키입니다. 설정부분의 DefaultSetFile에 매핑된 js 파일에 라이선스를 입력하여 공통화 하실 수 있습니다. - License : "SBUX-G12XD-131XD"
N Locale 언어를 설정합니다. (한국어 : "ko", 영어 : "en", 중국어 : "zh", 일본어 : "ja") "ko" Locale : "en"
N LocaleFile 파일로 locale 사항이 설정되어 있을 때 사용합니다. - LocaleFile : "<c:url value='/resources/locale/locale_?.js' />"
N Design Design css를 로딩하지 않습니다. 모든 CSS에 대한 직접 디자인 할 때 사용합니다. false Design : true
N CustomCSS 각 화면마다 CSS를 변경하고자 할 때 사용합니다. 파일의 위치를 assets > css로 지정되어 있습니다. CustomCSS : "SBUxCustom_Demo.css"
N Debug 개발자를 위한 Debug 활성/비활성 모드를 설정합니다. false Debug : false
N CheckTime 개발자를 위한 속도측정 CheckTime 활성/비활성 모드를 설정합니다. false CheckTime : false
N DeveloperTipType 개발자를 위한 Tip Mode입니다. (console, alert, storage, none) none DeveloperTipType : "console"
N LoadIncludeClass 
<sbux-xxx class="ooo" 로 개발시 작성하고 LoadIncludeClass :"ooo" 인 경우 'ooo' class 를 가진 컴포넌트만 랜더링 하여 나타냅니다.
(모든 화면이 나타난 후 별도로 SBUxMethod.render(); 를 통해 나머지 컴포넌트를 랜더링하여 화면에 나타낼 수 있습니다.)
 클래스명 LoadIncludeClass : "className"
N LoadExcludeClass 위 LoadIncludeClass 와는 상반된 개념으로 LoadExcludeClass : "ooo" 인 경우 <sbux-xxx class="ooo" 인 컴포넌트는 랜더링 하지 않습니다.
(모든 화면이 나타난 후 별도로 SBUxMethod.render(); 를 통해 나머지 컴포넌트를 랜더링하여 화면에 나타낼 수 있습니다.)		 클래스명 LoadExcludeClass : "className"
N UsingMinifyFile true 설정시 minify 된 파일로 읽어 네트워크 Size 를 줄입니다.
minify 파일목록 :
SBUxMessage_ko.min.js, SBUxMessage_date.min.js, Bootstrap_Datetimepicker.min.js,
SBUxDefault.min.js, SBGridDefault25.min.js,
hashtable.min.js, hashset.min.js, SBQueue.min.js, SBStack.min.js, xlsx.min.js		 false UsingMinifyFile : false
N CustomAttrs 사용자가 <sbux-xxx 태그 내 사용할 속성을 배열 형태로 정의합니다. 사용자
정의 속성		 CustomAttrs : ['cust1','cust2']
N UsingComplexCSS Bootstrap CSS 등 컴포넌트가 구비된 CSS 와 혼용해서 사용할 경우, SBUx 를 적용하지 않은 신규 개발인 경우에 독립적인 CSS 를 보장할 수 있는 설정입니다.
유의점: <sbux-tabs 사용시 content 영역을 잡는 class 명을 <div class="tab-content"> 에서 <div class="sbux-tab-content"> 로 변경하시기 바랍니다.		 false UsingComplexCSS : false
N SupportVersion AngularJS 문법 치환, {{ }} 형태의 angularJS 를 이전 버전에서 사용하고 jQuery.serialize 를 실행했을때 {{ }} 내의 모델명에 대한 값의 치환 및 사칙연산을 통한 계산이 반영되는 설정입니다. - SupportVersion : "2.0"
N BeforeRendering SBUx 의 랜더링 전에 사용자의 함수를 호출하고자 하는 경우 사용자가 SBUxConfig 속성에 사용할 함수 명을 등록 합니다. - BeforeRendering : "fnUserProcess"
N ConvertNull false 설정시 그리드 바인딩 후 컴포넌트 내 들어오는 null 데이터를 "null" 변환없이 유지합니다. true ConvertNull : true
N AfterRendering 렌더링 이후 함수를 실행합니다. - AfterRendering : "fnCall"
N CompletedAfterRendering 렌더링 이후 후처리까지 끝난 뒤 등록된 함수를 실행합니다. - CompletedAfterRendering : () => {}
N UsingExportImage true 설정 후 이미지 출력기능 시, 필요한 파일을 import 합니다.
설정 후 SBUxMethod.exportImage('화면캡쳐.jpg') 메소드로 이미지 출력을 할 수 있습니다.		 false UsingExportImage : true
N UsingExportPdf true 설정 후 이미지 출력기능 시, 필요한 파일을 import 합니다.
설정 후 SBUxMethod.exportPdf('화면캡쳐.pdf') 메소드로 PDF 출력을 할 수 있습니다.		 false UsingExportPdf : true
N IframeAfterRenderingGrid contents 를 iframe 을 이용하고, cross domain url 을 호출하고자 할때 초기 설정인 SBUxConfig 에서 속성값으로 제어할 수 있는 Callback 함수를 등록 합니다.
한번만 호출되며, 그리드의 Resize 이후 호출되지 않습니다.		 - -
N AsyncResizeGrid tabs, tab 내 그리드가 있을 시 그리드 resize를 비동기로 실행할 수 있습니다. false AsyncResizeGrid : true
N UsingCompReset SBUx.css내에서의 Reset CSS에 대한 분기처리 기능입니다. true 설정 시 component 해당 css 파일을 로딩 - UsingCompReset : true
N SaveCreatedComponentInfo getGroupData method 사용 시 선언된 컴포넌트들의 순서에 따라 정보를 가져올지 설정하는 옵션입니다. - SaveCreatedComponentInfo : true