-
Notifications
You must be signed in to change notification settings - Fork 250
Description
var FamousEngine = require('famous/core/FamousEngine');
var Node = require('famous/core/Node');
var DOMElement = require('famous/dom-renderables/DOMElement');
var rootNode = FamousEngine.createScene().addChild();
FamousEngine.init();
var baseEl = new DOMElement(rootNode, {
classes: ['root'],
properties: {
'background-color': '#fff'
}
});
var currentContentId;
var currentContent;
//
var btn1Node = rootNode.addChild();
var btn2Node = rootNode.addChild();
var btn1El = new DOMElement(btn1Node, {
classes: ['btn'],
content: 'First Content',
properties: {
'background-color': 'blue'
}
});
btn1Node.setSizeMode(1,1)
.setAbsoluteSize(150, 60)
.setAlign(0, 0, 0)
.setMountPoint(0, 0, 0);
var btn2El = new DOMElement(btn2Node, {
classes: ['btn'],
content: 'Second Content',
properties: {
'background-color': 'green'
}
});
btn2Node.setSizeMode(1,1)
.setAbsoluteSize(150, 60)
.setAlign(0, 0, 0)
.setMountPoint(-1.1, 0, 0);
//
btn1Node.addUIEvent('click');
btn2Node.addUIEvent('click');
btn1Node.addComponent({
onReceive: function(e, payload) {
if(e === 'click') {
showContent(1);
}
}.bind(this)
});
btn2Node.addComponent({
onReceive: function(e, payload) {
if(e === 'click') {
showContent(2);
}
}.bind(this)
});
var contentNode = rootNode.addChild();
var contentEl = new DOMElement(contentNode, {
classes: ['content'],
properties: {
'background-color': '#000',
'top': '100px'
}
});
contentNode.setSizeMode(1,1)
.setAbsoluteSize(800, 800)
.setAlign(0, 0, 0)
.setMountPoint(0, 0, 0);
function showContent(id){
if(currentContent != id) {
if(currentContent) contentNode.removeChild(currentContent);
currentContent = createContent(id);
contentNode.addChild(currentContent);
}
currentContentId = id;
}
function createContent(id){
var content = new Node();
new DOMElement(content, {
classes: ['content-body']
});
if(id == 1) {
var line1Node = content.addChild();
new DOMElement(line1Node, {
classes: ['content-line1'],
content: 'Content1 line1',
properties: {
'color': '#fff',
'background-color': 'blue'
}
});
line1Node.setSizeMode(1,1)
.setAbsoluteSize(300, 50)
.setAlign(0, 0, 0)
.setMountPoint(0, 0, 0);
var line1SubNode = line1Node.addChild();
new DOMElement(line1SubNode, {
classes: ['content1-line1-sub1'],
properties: {
'background-color': '#fff'
}
});
line1SubNode.setSizeMode(1,1)
.setAbsoluteSize(150, 20)
.setAlign(1, 1, 0)
.setMountPoint(1, 1, 0);
var line2Node = content.addChild();
new DOMElement(line2Node, {
classes: ['content-line2'],
content: 'Content1 line2',
properties: {
'color': '#fff',
'background-color': 'blue'
}
});
line2Node.setSizeMode(1,1)
.setAbsoluteSize(300, 50)
.setAlign(0, 0, 0)
.setMountPoint(0, -1.1, 0);
}else if( id == 2) {
var line1Node = content.addChild();
new DOMElement(line1Node, {
classes: ['content-line1'],
content: 'Content2 line1',
properties: {
'color': '#fff',
'background-color': 'green'
}
});
line1Node.setSizeMode(1,1)
.setAbsoluteSize(300, 50)
.setAlign(0, 0, 0)
.setMountPoint(0, 0, 0);
var line2SubNode = line1Node.addChild();
new DOMElement(line2SubNode, {
classes: ['content2-line1-sub1'],
content: 'Content2 line1 sub',
properties: {
'color': '#000',
'font-size': '12px',
'background-color': 'yellow'
}
});
line2SubNode.setSizeMode(1,1)
.setAbsoluteSize(150, 20)
.setAlign(1, 1, 0)
.setMountPoint(1, 1, 0);
}
return content;
}