[i-AUD] 스크립트 API를 이용하여 Slider 컨트롤의 스타일을 변경할 수 있습니다.

page no.    79414242

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

   1. 신규 추가된 스크립트 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';
      }
      

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의 스타일을 초기화시킵니다	예제 코드  원본 펼치기 Button.OnClick = function(s, e){ Slider.sliderStyle.Clear(); }