setAutoWidthForBars.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(){   

 

          var dFrame = new DFrame([10, 10, 90, 90], 'Test for autoWidth / Height', dFrameStyle)                

 

          barStyle.setBackgroundColor('yellow')

          barStyle.setItemsVSpacing(5)                          

          barStyle.setBordersHMargin(5)

          barStyle.setBordersVMargin(5)

          barStyle.setHeight(45)

          barStyle.setAutoHeight('BUTTON')                    

         

//============================= Fixed Bar. pos = 'TOP' and startFrom('') => HORIZONTAL BAR

          barStyle.setAutoWidth('')

          var bar = dFrame.addBar(barStyle)

          for (var i = 0 ; i<2 ; i++) bar.addButton('Button ' + i)

         

          barStyle.setAutoWidth('BUTTON')

          var bar = dFrame.addBar(barStyle)

          for (var i = 0 ; i<2 ; i++) bar.addButton('Button ' + i)

         

          barStyle.setAutoWidth('CONTENT')

          var bar = dFrame.addBar(barStyle)

          for (var i = 0 ; i<2 ; i++) bar.addButton('Button ' + i)

//============================= Same code. But:

//============================= Fixed Bar. pos = 'TOP' and startFrom('TOP') => VERTICAL BAR

          barStyle.setStartFrom('TOP')

         

          barStyle.setAutoWidth('')

          var bar = dFrame.addBar(barStyle)

          for (var i = 0 ; i<2 ; i++) bar.addButton('Button ' + i)

         

          barStyle.setAutoWidth('BUTTON')

          var bar = dFrame.addBar(barStyle)

          for (var i = 0 ; i<2 ; i++) bar.addButton('Button ' + i)

         

          barStyle.setAutoWidth('CONTENT')

          var bar = dFrame.addBar(barStyle)

          for (var i = 0 ; i<2 ; i++) bar.addButton('Button ' + i)

 

 

//============================= Floating Bar. startFrom('LEFT') => HORIZONTAL BAR

          barStyle.setStartFrom('LEFT')                          

 

          barStyle.setAutoWidth('')

          barStyle.setAutoHeight('')

          barStyle.setPos([5, 5, 45, '45'])            

          var bar = dFrame.addBar(barStyle)       

          for (var i = 0 ; i<2 ; i++) bar.addButton('Button ' + i)

                  

          barStyle.setAutoWidth('CONTENT')      

          barStyle.setAutoHeight('')                                

          barStyle.setPos([5, 35, 45, '45'])                      

          var bar = dFrame.addBar(barStyle)       

          for (var i = 0 ; i<2 ; i++) bar.addButton('Button ' + i)

         

          barStyle.setAutoWidth('CONTENT')

          barStyle.setAutoHeight('CONTENT')

          barStyle.setPos([5, 60, 45, '45'])                      

          var bar = dFrame.addBar(barStyle)       

          for (var i = 0 ; i<2 ; i++) bar.addButton('Button' + i)

 

//============================= Same code. But:

//============================= Floating Bar. startFrom('RIGHT') => VERTICAL BAR

          barStyle.setStartFrom('TOP')                           

 

          barStyle.setAutoWidth('')

          barStyle.setAutoHeight('')

          barStyle.setPos([50, 5, 90, '45'])                      

          var bar = dFrame.addBar(barStyle)       

          for (var i = 0 ; i<2 ; i++) bar.addButton('Button ' + i)

         

          barStyle.setAutoWidth('CONTENT')      

          barStyle.setAutoHeight('')                                

          barStyle.setPos([50, 35, 90, '45'])                     

          var bar = dFrame.addBar(barStyle)       

          for (var i = 0 ; i<2 ; i++) bar.addButton('Button ' + i)

         

          barStyle.setAutoWidth('CONTENT')      

          barStyle.setAutoHeight('CONTENT')                             

          barStyle.setPos([50, 60, 90, '45'])                     

          var bar = dFrame.addBar(barStyle)       

          for (var i = 0 ; i<2 ; i++) bar.addButton('Button ' + i)

                  

          dFrame.show()                       

     }

</script>

</HEAD>

</HTML>