<!DOCTYPE html>
<html>
<head>
<title>HTML5 Demo</title>
<script type="text/javascript" src="2d/lib/twaver.js"></script>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var box = new twaver.ElementBox();
var network = new twaver.vector.Network(box);
function init() {
initNetwork();
initDataBox();
}
function initNetwork() {
var view = network.getView();
document.body.appendChild(view);
network.adjustBounds({x: 0, y: 0, width: 1300, height: 1000});
network.getToolTip = function (element) {
var Id = element.getId();
var name = element.getName();
var name2 = element.getName2();
var icon = element.getIcon();
var clientProperty = element.getClient('clientProperty');
return 'Id:' + Id + '<br>' + 'name:' + name + '<br>' + 'name2:' + name2+
'<br>' + 'icon:' + icon;
}
twaver.Styles.setStyle('label.color','#ec6c00');
twaver.Styles.setStyle('label2.color','#57ab9a');
twaver.Styles.setStyle('select.color','#ef8200');
}
function initDataBox() {
var node = new twaver.Node({
name: 'from',
id: '1',
location: {
x: 300,
y: 200
}
});
node.setClient("textName","bb");
node.setImage("textNode");
box.add(node);
var node2 = new twaver.Node({
name: 'to',
name2: 'to2',
location: {
x: 500,
y: 250
}
});
box.add(node2);
var node3 = new twaver.Node({
name: 'to',
name2: 'to3',
location: {
x: 600,
y: 250
}
});
box.add(node3);
var link = new twaver.Link(node3, node2);
link.setName('Hello TWaver!');
//link.setName2('Hello Vector!');
link.setClient('clientProperty',node);
link.setClient('value', 'hello');
box.add(link);
setInterval(function () {//放到initDataBox里。定时更新用。
//link.setName((new Date()).toString());//连线上更新。
node.setClient('textName',(new Date()).toString());
}, 1000);
}
$(document).ready(function () {
setInterval("startRequest()",1000);
});
function startRequest()
{
$("#date").text((new Date()).toString());
$("#aa").text("test");
}
</script>
<script>
$(function(){
setInterval(aa,100);
function aa(){
$("#aa").append("a");
}
});
twaver.Util.registerImage('textNode', {
w: 80,
h: 30,
origin: {
x: 0.5,
y: 0.5
},
v: [
{
shape: 'text',
text: '<%= getClient("textName") %>',
textAlign: 'center',
textBaseline: 'top',
font: 'bold 10px arial',
x: 0,
y: 0
}
]
});
</script>
</head>
<body onload="init()">
</body>
<div id="aa"></div>
<div id="date"></div>
</html>
