foam-framework
Version:
MVC metaprogramming framework
51 lines (47 loc) • 1.43 kB
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="..//core/foam.css" />
<script language="javascript" src="../core/bootFOAM.js"></script>
<title>Sliding Panels demo</title>
</head>
<body>
<div style="width:100%; height:500px">
<div style="width: 100%; height: 250px">
I'm a top section ie. the calculator bits.
</div>
<div id="container" style="width: 100%; height: 250px; background-color: red; overflow: hidden">
</div>
</div>
<script language="javascript">
var container = window.document.getElementById('container');
MODEL({
name: 'BackgroundView',
extendsModel: 'foam.ui.View',
properties: ['color'],
methods: {
toHTML: function() {
return '<div style="background-color: ' + this.color +
'; height: 100%"></div>';
}
}
});
setTimeout(function() {
var Y = this.X.sub();
//Y.touchManager = Y.TouchManager.create({});
var v = Y.SlidePanelView.create({
mainView: Y.BackgroundView.create({ color: 'green' }),
minWidth: 500,
minPanelWidth: 300,
panelView: Y.SlidePanelView.create({
mainView: Y.BackgroundView.create({ color: 'yellow' }),
minWidth: 300,
minPanelWidth: 150,
panelView: Y.BackgroundView.create({ color: 'blue' })
})
});
container.innerHTML = v.toHTML();
v.initHTML();
}, 10);
</script>
</body>
</html>