I am making a menu that will have several icon buttons, and I wanted to have it so the user can interact with several buttons, like form checkbox elements. Every icon has 2 images, a off state (raised) and a on state (sunken) to give them a visual reference to what the current state is for that option.
It is more work than the checkbox type, but it looks nicer and allows me to have pictures to choose from instead of just text.
Code: Select all// sample dialog with 2 icon buttons
var win = new Window("dialog{text:'Script Interface',bounds:[100,100,264,410],\
ico0:IconButton{bounds:[10,10,154,154] , icon:'/c/off.png',properties:{style:'button'}},\
ico1:IconButton{bounds:[10,160,154,304] , icon:'/c/off.png',properties:{style:'button'}},\
};");
// start both buttons as off
ico0state = 0;
ico1state = 0;
// ico0 button
win.ico0.onClick = function() {
// if it is currently off
if (ico0state == 0) {
// change it to on
ico0state = 1;
this.icon = '/c/on.png';
}
// if it is current on
else if (ico0state == 1) {
// change it to off
ico0state = 0;
this.icon = '/c/off.png';
}
}
// ico1 button
win.ico1.onClick = function() {
// if it is currently off
if (ico1state == 0) {
// change it to on
ico1state = 1;
this.icon = '/c/on.png';
}
// if it is current on
else if (ico1state == 1) {
// change it to off
ico1state = 0;
this.icon = '/c/off.png';
}
}
// show dialog
win.center();
win.show();
// after you close the dialog, the status is available in the state variables
// 0 = off
// 1 = on
alert("ico0: "+ ico0state +"\nico1: "+ ico1state);
I attached the code and sample PNG images.