2012-07-19 2 views
1

dat.GUI.js를 사용하여 상호 배타적 인 체크 박스를 만드는 법을 알고 싶습니다. API 링크 : http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage.dat.GUI.js API를 사용하는 상호 배타적 인 체크 박스

나는 상호 배타적 인 체크 박스를 구현하기 위해 [http://jsfiddle.net/georgeneil/dEbRg/] jsfiddle를 만들었습니다. 하지만 몇 가지 문제가 있습니다.

1 단계 : CheckBox2를 클릭하면 예상대로 작동합니다.

2 단계 : CheckBox1을 클릭하면 확인되지 않습니다.

누군가 내가

+0

나를 위해 다시 작동해야하지만 (두 번 클릭하는 것처럼 보이십니까?) 작동합니다. 또한 iow 라디오 버튼 목록에 일반 컨트롤을 사용하지 않는 것이 좋습니다. – leppie

+0

두 번 클릭하면 문제를 해결할 필요가 있습니다. 이상적으로는 더블 클릭으로 작업 할 필요가 있습니다. 라디오 버튼은 dat.GUI.js에서 사용할 수 없다고 생각합니다. –

답변

2

는 다음과 같이 jsFiddle의 코드를 변경해보십시오 dat.GUI.js에 관한 질문에 대한 답변을 얻을 수있는 곳을 수정하거나 링크를 제공하는 방법에 나를 인도 할 수 :

// dat.gui controls 
var view = this; 
view.CheckBox1 = true; 
view.CheckBox2 = false; 


var gui = new dat.GUI(); 
var CB1Controller = gui.add(view, 'CheckBox1').listen(); 
CB1Controller.onChange(function(value){ 
     view.CheckBox1 = true; 
     view.CheckBox2 = false; 
}); 

var CB2Controller = gui.add(view, 'CheckBox2').listen(); 
CB2Controller.onChange(function(value){ 
     view.CheckBox1 = false; 
     view.CheckBox2 = true; 
}); 

이전에 사용했던 부울 토글 코드는 두 가지 이상의 선택 항목으로 잘 일반화되지 않습니다. 또한이 버전의 코드는 언제나 정확히 하나의 확인란 만 선택하도록 강제 할 것입니다. 0 선택은 가능하지 않습니다.

+0

고마워요. 그것은 작동합니다! 기능을 깨지 않고도 선택을 취소 할 수 있습니까? –

+0

동일한 코드를 사용하고 하단에 '위의 항목 없음'이라는 다른 옵션을 추가하는 것은 어떻습니까? –

+0

'위에 해당되지 않음'을 사용하는 것이 나에게 부적절한 것 같습니다 ... !! –

관련 문제