페이지 이력

page no.   

1. 기능

•  API Open

•  UI Open

•  Read Only

•  Not Use

•  Hidden

•  Not Recommend

개요

Slider 컨트롤의 스타일을 변경할 수 있는 API가 추가되었습니다.

Slider 구조

■ Bar

Image Removed

■ Line

Image Removed

■ Handle

Image Removed

■ FromToDataLabel

Image Removed

■ ActiveDataLabel

Image Removed

■ Grid

Image Removed

API 구조

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
         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 배경 색

1. 1. • 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';

1. 1. • 
        

      • 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(); }

        
        

변경 전

변경 후