newDFrame.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], 'newDFrame.html', dFrameStyle)

 

          barStyle.setHeight(20)

          barStyle.setWidth(20)

          var color = ['blue', 'yellow', 'green']

          //add 16 bars

          for (var i = 0 ; i<3 ; i++) {

              barStyle.setBackgroundColor(color[i])                      

              dFrame.addBar('', 'TOP', barStyle)

              dFrame.addBar('', 'RIGHT', barStyle)

              dFrame.addBar('', 'BOTTOM', barStyle)

              dFrame.addBar('', 'LEFT', barStyle)              

          }

          //dFrameStyle.setBackgroundColor('red')

          var dFrame1 = new DFrame([1, 2, 49, 98], 'First DFrame', dFrameStyle, dFrame)

          dFrame1.setBackgroundColor('red')

 

          barStyle.setAutoWidth('')

          barStyle.setAutoHeight('')

         

          barStyle.setBackgroundColor('white')

          barStyle.setHeight(100)

          dFrame1.addBar('',barStyle, 'TOP')

         

          grid(dFrame1)             

 

          dFrame1.addBar('floating 1', barStyle, [40, 40, 60, 60])

          dFrame1.show()

         

          //dFrameStyle.setBackgroundColor('black')

          var position = [null, 2, 99, 98]   

          position[0] = [dFrame1,'RIGHT',5]         

          var dFrame2 = new DFrame(position, 'Second DFrame', dFrameStyle, dFrame)

 

          grid(dFrame2)             

 

          dFrame2.setBackgroundColor('black')

          dFrame2.addBar('floating2',barStyle, [40, 40, 60, 60])                 

          dFrame2.show()                      

     }

     function grid(dFrame) {

          barStyle.setBackgroundColor('yellow')

          barStyle.setBordersWidth(0)

          dFrame.addBar(barStyle, [20,  0, '1', 100])

          dFrame.addBar(barStyle, [40,  0, '1', 100])

          dFrame.addBar(barStyle, [60,  0, '1', 100])

          dFrame.addBar(barStyle, [80,  0, '1', 100])

          dFrame.addBar(barStyle, [ 0, 20, 100, '1'])

          dFrame.addBar(barStyle, [ 0, 40, 100, '1'])

          dFrame.addBar(barStyle, [ 0, 60, 100, '1'])

          dFrame.addBar(barStyle, [ 0, 80, 100, '1'])

     }

</script>

</HEAD>

</HTML>