페이지 이력

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

1. 설명
   1. Slider 컨트롤의 스타일을 변경할 수 있는 API가 추가되었습니다.
      
      
2. 사용 방법
   1. 신규 추가된 스크립트 API를 이용하여 Slider 컨트롤의 스타일을 변경할 수 있습니다.
      
      
3. 기능 상세
   

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

      1. Bar
         Image Added
      2. Line
         Image Added
      3. Handle
         
      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= ' 1 3px';
        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= ' 1 3px';
        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 = ' 1 3px';
        GridTextFont	string	Grid 폰트 종류	Slider.sliderStyle.GridColor = 'Courier';

        
        

        
        

      • 
        

API 구조

■ Property

Method

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

• 샘플 파일

• 참고 사항

  1. 백업 대상 파일은 다음과 같습니다.

     1. 보고서 파일 + MX-GRID 디자인 파일(Excel, .json2, .ds) + Server Script 파일

  2. 백업 파일 저장 경로는 다음과 같습니다.

     1. /reports/cm/VERSIONS/{REPORT_CODE}/{UUID}.zip

• 해당 기능을 사용하기 위해서는 /extention/shell/customscript.jsp 파일을 업데이트 해야 합니다.
• 기존 백업 파일은 기존 대로 정상적으로 동작합니다. 

변경 전

변경 후