[스파이더젠] 선택 클릭하면 색상 바뀌기

일단 탭뷰 코드를 한 버튼 안에서 동작할 수 있게 만들어준다.

이동탭 안에 Button 이벤트를 넣어준다.

이름은 myBtnClick으로 설정해주었다.

 

TabView가 각각 버튼마다 이동하게 해주려면 원래는 클릭 이벤트를 각각 줘서 진행해 주었는데

하나의 버튼으로 각각 탭이 이동하는 코드로 다시 작성해보았다.

function addProduct*myBtnClick(comp, info, e)
{	
	// comp.ID 넘어온다 (버튼 아이디로 넣어준다) 탭뷰 속성 = 페이지아이디 속성 
	//누르면서 id가 comp.ID로 넘어가면서 등록해둔 리스트중에 해당아이디에 맞게
	this.myTab.selectTabById(comp.compId);
}

 

각각의 탭뷰와 선택할 버튼들의 id 값을 똑같이 준다.

comp를 찍어보면 각각 아이디 값을 가진 view들이 나온다

이제 그걸 클릭하면 id 값이 comp.ID로 넘어가면서 해당 탭뷰에 맞게 화면이 뜨게 된다.

버튼 이벤트 함수 하나로 누르는 버튼 ID를 받아서 옮겨지는 셈이다

아이디 값을 같게 하는게 관건이다.

 

그리고 클릭 할 때마다 background-color를 바뀌게 하고 싶다면

이 클릭함수 안에서 설정해줄 수 있다.

일단 클릭할 버튼들을 그룹으로 묶어준다.

그리고 findCompByGroup를 사용해서 변수 선언을 해준다

var tabs = this.findCompByGroup('tab_button');

 

탭 그룹으로 배열을 받아서

foreach문으로 반복문을 돌려준다

설정해두었던 클래스를 전부 제거 해주었다가 선택 된 클래스만 색상이 추가 되게 해준다.

class는 각각 다 넣어준다.

 

class 설정

아예 스타일 menu class에 주었고, 그 아래 하위 선택자에 바뀔 색상에 대한 것을 지정해주었다.

.menu{
	width: 205px;
	height: 50px;
	position: relative;
	top: 0px;
	border-radius: 15px 15px 0px 0px;
	margin-right: 3px;
	margin-left: 0px;
	background-color: rgb(245, 245, 245);
	margin-top: 0px;
}

.menu.on{
	
	background-color: #2c3a2c;
	color : #fff;
}

 

계속 class적용이 안되서 애를 먹었는데 알고보니 경로를 잘못 설정해두어서 그랬던 것 같다.

앞으로는 global에 Template를 넣어놓도록 하자

var index = tabs.indexOf(comp);
	//console.log(index);
	tabs.forEach(function(e){
		e.removeClass('on');
	});
	//console.log(comp);
	comp.addClass('on');

 

전체코드는 이렇게 나온다.

function addProduct*myBtnClick(comp, info, e)
{	
	// comp.ID 넘어온다 (버튼 아이디로 넣어준다) 탭뷰 속성 = 페이지아이디 속성 
	//누르면서 id가 comp.ID로 넘어가면서 등록해둔 리스트중에 해당아이디에 맞게
	this.myTab.selectTabById(comp.compId);
	
	//console.log(comp)
	
	var tabs = this.findCompByGroup('tab_button');
	//console.log(tabs);
	var index = tabs.indexOf(comp);
	//console.log(index);
	tabs.forEach(function(e){
		e.removeClass('on');
	});
	//console.log(comp);
	comp.addClass('on');
	
	

};