page no.
신규 추가된 Script API를 이용하여 Slider 컨트롤의 스타일을 변경할 수 있습니다.
var Slider = null; var initControlVariables = function(){ Slider = Matrix.getObject("Slider"); setSliderGreen(); }; initControlVariables(); function setSliderGreen(){ var green = { bar: '#82d173', line: '#dbf4a7', handle: '#b6e94c', hadleHover: '#91ba3c', fromtoBgColor: '#416839', activeBgColor: '#51ba3d', text: 'white', grid: '#c273d1' }; // Slider의 스타일 객체 : Slider.sliderStyle Slider.sliderStyle.BarBackground = green.bar; Slider.sliderStyle.LineBackground = green.line; Slider.sliderStyle.HandleColor = green.handle; Slider.sliderStyle.HoverHandleColor = green.hadleHover; Slider.sliderStyle.FromToDataLabelBackgroundColor = green.fromtoBgColor; Slider.sliderStyle.FromToDataLabelTextColor = green.text; Slider.sliderStyle.ActiveDataLabelBackgroundColor = green.activeBgColor; Slider.sliderStyle.GridColor = green.grid; Slider.sliderStyle.HandleBorderColor = green.activeBgColor; Slider.sliderStyle.GridTextFont = 'Courier'; } |
Slider 구조는 다음과 같습니다.
Property
Property Name | Data Type | 설명 | 사용 예시 |
---|---|---|---|
BarBackground | string | Bar 배경 색 | Slider.sliderStyle.BarBackground = '#90dfc0'; |
LineBackground | string | Line 배경 색 | Slider.sliderStyle. LineBackground= '#90dfc0'; |
HandleColor | string | Handle 배경 색 | SlidersliderStyle..HandleColor= '#90dfc0'; |
HandleBorderColor | string | Handle의 Border 색 | Slider.sliderStyle. HandleBorderColor= '#90dfc0'; |
HoverHandleColor | string | Handle의 마우스 오버 했을 때의 배경 색 | Slider.sliderStyle. HoverHandleColor= '#90dfc0'; |
FromToDataLabelBackgroundColor | string | From / To Data Label의 배경 색 | Slider.sliderStyle. FromToDataLabelBackgroundColor= '#90dfc0'; |
FromToDataLabelTextColor | string | From / To Data Label의 폰트 색 | Slider.sliderStyle.FromToDataLabelTextColor= '#90dfc0'; |
FromToDataLabelTextSize | string | From / To Data Label의 폰트 크기 | Slider.sliderStyle. FromToDataLabelTextSize= '13px'; |
FromToDataLabelTextFont | string | From / To Data Label의 폰트 종류 | Slider.sliderStyle.FromToDataLabelTextFont= 'Courier'; |
ActiveDataLabelBackgroundColor | string | Active Data Label의 배경 색 | Slider.sliderStyle. ActiveDataLabelBackgroundColor= '#90dfc0'; |
ActiveDataLabelTextColor | string | Active Data Label의 폰트 색 | Slider.sliderStyle. ActiveDataLabelTextColor= '#90dfc0'; |
ActiveDataLabelTextSize | string | Active Data Label의 폰트 크기 | Slider.sliderStyle. ActiveDataLabelTextSize= '13px'; |
ActiveDataLabelTextFont | string | Active Data Label의 폰트 종류 | Slider.sliderStyle. ActiveDataLabelTextFont= 'Courier'; |
ShadowColor | string | Shadow 색 | Slider.sliderStyle.ShadowColor = ' #90dfc0'; |
GridColor | string | Grid 색 | Slider.sliderStyle.GridColor = ' #90dfc0'; |
GridTextSize | string | Grid 폰트 크기 | Slider.sliderStyle.GridColor = ' 13px'; |
GridTextFont | string | Grid 폰트 종류 | Slider.sliderStyle.GridColor = 'Courier'; |
Method
Method Name | Returns | 설명 | 사용 예시 | |
---|---|---|---|---|
Clear() | void | Slider의 스타일을 초기화시킵니다 |
|
|
|
기능 정보 |
|
|
|
|
|
|
|
---|---|---|---|---|---|---|---|
시작 버전 정보 |
|
|
|