페이지 이력

page no.   

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

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

      코드 블럭
      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'; }

      
      

3. 기능 상세
   

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

      1. Bar
         
      2. Line
         
      3. Handle
         
      4. FromToDataLabel
         
      5. ActiveDataLabel
         
      6.  Grid
         
         
         
   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(); }