<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="keywords" content="javascript framework, RIA, SPA, client SOA, linb, jsLinb, RAD, IDE, Web IDE, widgets, javascript OOP, opensource, open-source, Ajax, cross-browser, prototype, web2.0, platform-independent, language-independent" />
<meta name="description" content="Web application powered by LINB framework" />
<meta name="copyright" content="hide@address.com" />
<meta http-equiv="imagetoolbar" content="no" />
<title>linb.Template sample -- basic</title>
</head>
<body>
<div id='loading'><img src="../../../runtime/loading.gif" alt="Loading..." /></div>
<div id='basic'></div>
<script type="text/javascript" src="../../../runtime/jsLinb/js/linb.js"></script>
<script type="text/javascript">
//Conditional-CSS
linb.main(function(){
linb.CSS.addStyleSheet('#basic div{padding:10px;margin:3px;border:solid 1px;}','basic.css');
});
//Template
linb.main(function(){
//hide loading message
linb('loading').remove();
//for tips stack
var stack=[];
//for template events
var events={
onMouseover:function(profile,e,src){
var item=profile.getItem(src);
if(item){
var t;
if(t=linb.Tips.getTips())stack.push(t);
linb.Tips.show(linb.Event.getPos(e), "<p style='font-weight:bold;'>"+item.id+"</p><p>"+item.tips+"</p>");
}
},
onMouseout:function(profile,e,src){
if(stack.length>0)
linb.Tips.show(linb.Event.getPos(e), stack.pop());
else
linb.Tips.hide();
}
};
//creates the template, and append it to the 'basic' div
linb('basic').append(
(new linb.Template)
.setTemplate({
"" : "<div onmouseout=[$e] onmouseover=[$e]>{id}{layer1}</div>",
layer1 : "<div onmouseout=[$e] onmouseover=[$e]>layer1:{id} {layer2}</div>",
"layer1.layer2" : "<div onmouseout=[$e] onmouseover=[$e]>layer2:{id} {layer3}</div>",
"layer1.layer2.layer3" : "<div onmouseout=[$e] onmouseover=[$e]>layer3:{id} {layer4}</div>",
"layer1.layer2.layer3.layer4" : "<div onmouseout=[$e] onmouseover=[$e]>layer4:{id}</div>"
})
.setEvents({
layer1:events,
"layer1.layer2":events,
"layer1.layer2.layer3":events,
"layer1.layer2.layer3.layer4":events
})
.setProperties({
id:"con",
layer1:[{
id:"a",
tips:"tips a",
layer2:[{
id:"aa",
tips:"tips aa"
},{
id:"ab",
tips:"tips ab",
layer3:[{
id:"aba",
tips:"tips aba"
},{
id:"abb",
tips:"tips abb"
},{
id:"abc",
tips:"tips abc",
layer4:[{
id:"abca",
tips:"tips abca"
},{
id:"abcb",
tips:"tips abcb"
}]
}]
}]
},{
id:"b",
tips:"tips b",
layer2:[{
id:"ba",
tips:"tips ba"
}]
}]
})
);
});
</script>
</body>
</html>