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>