페이지 이력

page no.   

1. 기능 설명
   1. Slider 컨트롤의 스타일을 변경할 수 있는 API가 추가되었습니다.
      
      
2. 사용 방법

   1. 신규 추가된 스크립트 API를 이용하여 Slider 컨트롤의 스타일을 변경할 수 있습니다.

   기능 상세
   

   Slider 구조는 다음과 같습니다.

3. Bar
   Image Removed
4. Line
   Image Removed
5. Handle
   
6. FromToDataLabel
   Image Removed
7. ActiveDataLabel
   Image Removed
 Grid
Image Removed
지원하는 API리스트는 다음과 같습니다.

Property

Property Name

Data Type설명사용 예시BarBackgroundstringBar 배경 색Slider.sliderStyle.BarBackground = ' #90dfc0 ';LineBackgroundstringLine 배경 색Slider.sliderStyle. LineBackground= ' #90dfc0 ';HandleColorstringHandle 배경 색SlidersliderStyle..HandleColor= ' #90dfc0 ';HandleBorderColorstringHandle의 Border 색Slider.sliderStyle. HandleBorderColor= ' #90dfc0 ';HoverHandleColorstringHandle의 마우스 오버 했을 때의 배경 색Slider.sliderStyle. HoverHandleColor= ' #90dfc0 ';FromToDataLabelBackgroundColorstringFrom / To Data Label의 배경 색Slider.sliderStyle. FromToDataLabelBackgroundColor= ' #90dfc0 ';FromToDataLabelTextColorstringFrom / To Data Label의 폰트 색Slider.sliderStyle.FromToDataLabelTextColor= ' #90dfc0 ';FromToDataLabelTextSizestringFrom / To Data Label의 폰트 크기Slider.sliderStyle. FromToDataLabelTextSize= ' 1 3px';FromToDataLabelTextFontstringFrom / To Data Label의 폰트 종류Slider.sliderStyle.FromToDataLabelTextFont= 'Courier';ActiveDataLabelBackgroundColorstringActive Data Label의 배경 색Slider.sliderStyle. ActiveDataLabelBackgroundColor= ' #90dfc0 ';ActiveDataLabelTextColorstringActive Data Label의 폰트 색Slider.sliderStyle. ActiveDataLabelTextColor= ' #90dfc0 ';ActiveDataLabelTextSizestringActive Data Label의 폰트 크기Slider.sliderStyle. ActiveDataLabelTextSize= ' 1 3px';ActiveDataLabelTextFontstringActive Data Label의 폰트 종류Slider.sliderStyle. ActiveDataLabelTextFont= 'Courier ';ShadowColorstringShadow 색Slider.sliderStyle.ShadowColor = ' #90dfc0 ';GridColorstringGrid 색Slider.sliderStyle.GridColor = ' #90dfc0 ';GridTextSizestringGrid 폰트 크기Slider.sliderStyle.GridColor = ' 1 3px';GridTextFontstringGrid 폰트 종류Slider.sliderStyle.GridColor = 'Courier';

API 구조

1. 1. 코드 블럭
      language js theme Eclipse firstline 1 title 예제 코드 linenumbers true
      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'; }

      
      

2. 기능 상세
   

   1. Slider 구조는 다음과 같습니다.

      1. Bar
         Image Added
      2. Line
         Image Added
      3. Handle
         Image Added
      4. FromToDataLabel
         Image Added
      5. ActiveDataLabel
         Image Added
      6.  Grid
         Image Added
         
         
   2. 지원하는 API리스트는 다음과 같습니다.

      • 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의 스타일을 초기화시킵니다	코드 블럭 language js theme Eclipse firstline 1 title 예제 코드 linenumbers true collapse true Button.OnClick = function(s, e){ Slider.sliderStyle.Clear(); }

사용 예제

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';
}