addMenu-2.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/blue/styleBlue.js')

DFrameAPI.onLoad = function(){

//alert(dFrameStyle.getDefaultBarStyle().getDefaultMenuStyle().isTree)

var dFrame = new DFrame([10, 10, 90, 90], addMenu-2.html', dFrameStyle)

var ssM = new Array()

ssM[0] = ['Button', 'sub1-sub2--item1', 'alert("Click !")']

ssM[1] = ['Button', 'sub1-sub2-item2', 'alert("Click !")']

var sM = new Array()

sM[0] = ['Button', 'sub1-item1', ssM]

sM[1] = ['Button', 'sub1-item2', 'alert("Click !")']

var M = new Array()

M[0] = ['Button', 'item1', sM]

M[1] = ['Button', 'item2', '']

//-- Menu 1

//use an array for borders width: No borders for the sub-level

dFrame.getStyle().getDefaultBarStyle().getDefaultMenuStyle().setBordersWidth([1, 1])

var bar = dFrame.addBar('', 'LEFT')

var menu = bar.addMenu(M)

//-- Menu 2

//enlarge the Menu because of the sub-level. Note that the Bar is resized

dFrame.getStyle().getDefaultBarStyle().getDefaultMenuStyle().setWidth(200)

//set a bg color to the Menu

dFrame.getStyle().getDefaultBarStyle().getDefaultMenuStyle().setBackgroundColor('#637D9C')

var bar = dFrame.addBar('', 'LEFT')

var menu = bar.addMenu(M)

bar.addText('This one has a width set to 200.<br>Note that the Bar is resized<br>to the width of the Menu.')

bar.addText('A background color <br>has been set.')

//-- Menu 3

var bar = dFrame.addBar('', 'LEFT')

//set the width of the Bar to the fixed width

bar.setAutoWidth('')

bar.setWidth(100)

//bar.setItemsHAlign('LEFT')

var menu = bar.addMenu(M, [150, 25])

//-- Menu 4

dFrame.floatingMenu = bar.addMenu(M, ['50', '*'], 'Floating Menu')

var t = dFrameStyle.getDefaultTitleBarStyle()

t.resetButtons()

t.setButtonImage('CloseDFrame', 'thisDFrame.floatingMenu.show(false)')

dFrame.floatingMenu.addTitleBar(t)

dFrame.floatingMenu.setDragEnabled(true)

dFrame.floatingMenu.setWidth(200)

dFrame.floatingMenu.setBackgroundColor('#637D9C')

dFrame.floatingMenu.setIsTree(true)

var txt = dFrame.addText([55, 5], 'The Bar can be smaller than the Menu it contains.<br>And, in fact, the Menu can also be outside of the Bar<br>if the setBordersHMargin / setBordersVMargin values<br>or the position of the Menu are bigger than the Bar\'s<br>width / height !')

txt.setOverlayParentBars(true)

dFrame.show()

}

</script>

</HEAD>

</HTML>