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>