페이지 트리

버전 비교

  • 이 줄이 추가되었습니다.
  • 이 줄이 삭제되었습니다.
  • 서식이 변경되었습니다.




Start Release No : 7.0.400.20230209 / Update Release No :

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

작성자 :      김예슬        / 검수자 :  이경륜


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


도움말
iconfalse
title기능 설명

개요

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

Slider 구조

■ Bar

■ Line

■ Handle

■ FromToDataLabel

■ ActiveDataLabel

■ Grid

API 구조

■ Property

Property Name

Data Type설명사용 예시
BarBackgroundstringBar 배경 색Slider.sliderStyle.BarBackground = '#90dfc0';
LineBackgroundstringLine 배경 색Slider.sliderStyle.LineBackground= '#90dfc0';
HandleColorstringHandle 배경 색SlidersliderStyle..HandleColor= '#90dfc0';
HandleBorderColorstringHandle의 Border 색Slider.sliderStyle.HandleBorderColor= '#90dfc0';
HoverHandleColorstringHandle의 마우스 오버 했을 때의 배경 색Slider.sliderStyle.HoverHandleColor= '#90dfc0';
FromToDataLabelBackgroundColorstringFrom / To Data Label의 배경 색Slider.sliderStyle.FromToDataLabelBackgroundColor= '#90dfc0';
FromToDataLabelTextColorstringFrom / To Data Label의 폰트 색Slider.sliderStyle.FromToDataLabelTextColor= '#90dfc0';
FromToDataLabelTextSizestringFrom / To Data Label의 폰트 크기Slider.sliderStyle.FromToDataLabelTextSize= '13px';
FromToDataLabelTextFontstringFrom / To Data Label의 폰트 종류Slider.sliderStyle.FromToDataLabelTextFont= 'Courier';
ActiveDataLabelBackgroundColorstringActive Data Label의 배경 색Slider.sliderStyle.ActiveDataLabelBackgroundColor= '#90dfc0';
ActiveDataLabelTextColorstringActive Data Label의 폰트 색Slider.sliderStyle.ActiveDataLabelTextColor= '#90dfc0';
ActiveDataLabelTextSizestringActive Data Label의 폰트 크기Slider.sliderStyle.ActiveDataLabelTextSize= '13px';
ActiveDataLabelTextFontstringActive Data Label의 폰트 종류Slider.sliderStyle.ActiveDataLabelTextFont= 'Courier';
ShadowColorstringShadow 색Slider.sliderStyle.ShadowColor ='#90dfc0';
GridColorstringGrid 색Slider.sliderStyle.GridColor = '#90dfc0';
GridTextSizestringGrid 폰트 크기Slider.sliderStyle.GridColor ='13px';
GridTextFontstringGrid 폰트 종류Slider.sliderStyle.GridColor = 'Courier';

■ Method

Method NameReturns설명사용 예시
Clear()voidSlider의 스타일을 초기화시킵니다


코드 블럭
languagejs
themeEclipse
firstline1
title예제 코드
linenumberstrue
collapsetrue
Button.OnClick = function(s, e){
	Slider.sliderStyle.Clear();
}


사용 예제

코드 블럭
languagejs
themeEclipse
firstline1
title예제 코드
linenumberstrue
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
    height250

첨부 파일
patterns.*jsp,.*zip,.*xml,.*js,.*mtsd,.*xlsx,.*xlsb,.*mtzb,.*mtvx,.*mtx,.*mtxz,


변경 전/후 제품 버전

변경 전(제품 버전)

변경 전


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

변경 후

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




참고사항
title참고 자료


펼치기

첨부 파일



정보
title문서 수정 이력
변경 이력

하위 페이지 표시
alltrue



정보
titleBCRM 정보

(BCRM접수번호)제목


...