My example use 'DAT.GUI.min.js'. I need disable/enable a folder option when another folder option is selected. For example when 'visibleImageX folder' is checked the folder 'fixImageX' must be enable, but when 'visibleImageX folder' is not checked the folder 'fixImageX' must be disabled.
My example is :
function initGUI() {
gui = new dat.GUI({
height : 5 * 32 - 1
});
parameters = {
x: 0, y: 0,
visibleImageX: true,
visibleImageY: true,
reset: function() { resetSurvey() }
};
var showPlan = gui.addFolder('Show Plan');
showPlan.add( parameters, 'visibleImageX').name('x').listen().onChange(
function(value) {
if (!value) {
parameters.x = 0;
//disable the folder name: fixImageX
}
else { //enable the folder name: fixImageX}
});
showPlan.add( parameters, 'visibleImageY').name('y').listen().onChange(
function(value) {
if (!value) {
parameters.y = 0;
//disable the folder name: fixImageY
}
});
showPlan.open();
var fixImage = gui.addFolder('Fix Image');
var fixImageX = fixImage.add( parameters, 'x' ).min(0).max(100).step(1)
.listen().onChange(function(value) {
// Do somethings
});
var fixImageY = fixImage.add( parameters, 'y' ).min(0).max(100).step(1)
.listen().onChange(function(value) {
// Do somethings
});
fixImage.open();
}
First, you only have 2 folders called
fixImage
andshowPlan
. Then using JQuery, to hide the folder you can doAnd to display it