페이지 이력

Start Release No : 7.0.400.20230209 / Update Release No :

프로젝트명 : (BCRM#D4258) Slider 차트 문의

작성자 : 김예슬 / 검수자 :

기능 정보			API Open			UI Open			Read Only			Not Use			Hidden			Not Recommend

도움말

icon	false
title	기능 설명

개요

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

Slider 구조

■ Bar

■ Line

■ Handle

■ FromToDataLabel

■ ActiveDataLabel

■ Grid

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

사용 예제

코드 블럭

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

정보

title	샘플 정보

샘플 파일
View file
name (BCRM D4258) Slider 차트 문의_Sample.mtsz
height 250

첨부 파일

patterns	.jsp,.zip,.xml,.js,.mtsd,.xlsx,.xlsb,.mtzb,.mtvx,.mtx,.*mtxz,

변경 전/후 제품 버전

변경 전(제품 버전)

변경 전

기본 제공 스타일만 이용 가능

변경 후

기본 제공 스타일 이외에 커스텀 가능

공간 바로가기

페이지 트리

버전 비교

이전 버전 2

새 버전 3

키

개요

Slider 구조

API 구조

■ Property

■ Method

사용 예제