setAutoWidthForButtons.html

<HTML>

<HEAD>

<script>var dFrameFilePath = '../../../../../dFrame/'</script>

<script language="Javascript" src="../../../../../dFrame/dFrame/lib/DFrameAPI.js"></script>

<script language="Javascript">

//Style

DFrameAPI.include('dFrame/styles/notes/styleNotes.js')

DFrameAPI.onLoad = function(){

var style = new DFrameStyle(dFrameStyle)

var x = style.getDefaultBarStyle().getDefaultButtonStyle()

//basePathForIcons is defined in styleNotes.js

x.setImageNormal(basePathForIcons+'close.gif')

x.setImageRoll(basePathForIcons+'closeDown.gif')

x.setImageDown(basePathForIcons+'closeDown.gif')

x.setImageSelected(basePathForIcons+'closeDown.gif')

x.setImageRollSelected(basePathForIcons+'closeDown.gif')

x.setAutoWidth('IMAGE')

var dFrame = new DFrame([10, 10, 40, 40], 'setAutoWidth.html - 1', style)

dFrame.addButton('', 'alert("Click !")')

dFrame.addButton('', 'alert("Click !")')

var txt = 'The Buttons above have a fixed width set to 80<br>with the setWidth() method in styleNotes.js .'

txt += '<br><br>You can understand the wrong spacing if<br>you roll over the images.'

dFrame.alert(txt)

x.setWidth(1)

var dFrame = new DFrame([50, 50, 80, 80], 'setAutoWidth.html - 2', style)

dFrame.addButton('', 'alert("Click !")')

dFrame.addButton('', 'alert("Click !")')

dFrame.alert('The style of those one have a fixed width set to 1<br>and can thus be adjusted to the width of the<br>image they contain.')

}

</script>

</HEAD>

</HTML>