<!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 -- product gallery 1</title>
</head>
<body>
<div id='loading'><img src="../../../runtime/loading.gif" alt="Loading..." /></div>
<div style='height:20px;'></div>
<div id='gallery1' style="margin:0 auto;width:680px;border:solid 1px;padding:4px;"></div>
<div style="text-align:center;padding:10px;"><button id="cmd">reorder</button></div>
<div style='height:20px;'></div>
<div id='drop' style="margin:0 auto;width:680px;border:solid 1px #CCC;height:32px;height:100px;position:relative;">
drag a product here
</div>
<script type="text/javascript" src="../../../runtime/jsLinb/js/linb.js"></script>
<script type="text/javascript">
var tpl;
//code snippets for linb.Template
linb.main(function(){
//hide loading message
linb('loading').remove();
//drop
linb('drop').dropable(true, 'prd').onDrop(function(){
var pro=linb.DragDrop.getProfile();
linb(this).html(_.serialize(pro.dragData));
});
//reorder
linb('cmd').onClick(function(){
if(tpl.rendered){
var data=tpl.properties.items, copy=_.copy(data);
data.length=0;
_.arr.each(copy,function(o){
data.push(o);
},null,true);
tpl.render();
}
});
linb('gallery1').append(
(tpl=new linb.Template)
.setTemplate({
"" : "<div><h3 class='gallery1-head'>{head}</h3><ul class='gallery1-ul'>{items}</ul><div style='clear:both;'></div></div>",
items : "<li class='gallery1-li' onclick=[$e] onmouseover=[$e] onmousedown=[$e] onmouseout=[$e]><div class='gallery1-left'><div><a href='{href}'><img src='{src}'/><p>{price}</p></a></div></div><div class='gallery1-right'><a href='{href}'><h4>{title}</h4><div>{desc}</div></a></div></li>"
})
.setEvents({
items:{
onMouseover:function(profile,e,src){
linb(src).css('backgroundColor','#EEE');
//here, just use linb.Template to build a html string
var item=profile.getItem(src),
tpl=new linb.Template({"":"<div style='text-align:center;border:solid 1px;background:#fff;'><h4>{title}</h4><img src='{src}'></div><p>{desc}</p>"},item),
html=tpl.toHtml();
linb.Tips.show(linb.Event.getPos(e),html);
},
onMouseout:function(profile,e,src){
linb(src).css('backgroundColor','transparent');
linb.Tips.hide();
},
onMousedown:function(profile,e,src){
linb(src).startDrag(e,{dragType:"icon",dragCursor:"default",shadowFrom:src},'prd',profile.getItem(src));
linb(src).css('backgroundColor','transparent');
linb.Tips.hide();
}
}
})
.setProperties({
head:"On sale products",
items:[{
id:"a",
src:"img/g1_0.gif",
href:"#",
price:"$ 18.99",
title:"product #0",
desc:"product #0 is on sale now!"
},{
id:"b",
src:"img/g1_1.jpg",
href:"#",
price:"$ 23.99",
title:"product #1",
desc:"product #1 is on sale now!"
},{
id:"c",
src:"img/g1_2.jpg",
href:"#",
price:"$ 23.99",
title:"product #2",
desc:"product #2 is on sale now!"
},{
id:"d",
src:"img/g1_3.jpg",
href:"#",
price:"$ 23.99",
title:"product #3",
desc:"product #3 is on sale now!"
},{
id:"e",
src:"img/g1_4.jpg",
href:"#",
price:"$ 23.99",
title:"product #4",
desc:"product #4 is on sale now!"
},{
id:"f",
src:"img/g1_5.jpg",
href:"#",
price:"$ 23.99",
title:"product #5",
desc:"product #5 is on sale now!"
}]
})
);
});
//
//other code, continue to read it if you want
//
//add Conditional-CSS here
linb.main(function(){
//add css
linb.CSS.addStyleSheet(''+
'.gallery1-head{border-bottom:dashed 1px #888;}'+
'.gallery1-ul{clear:both;padding-top:6px;}'+
'.gallery1-li{float:left;height:100px;width:200px;overflow:hidden;line-height:15px;margin:3px;cursor:pointer;}'+
'.gallery1-left{float:left;width:90px;overflow:hidden;}'+
'.gallery1-left p{text-align:center;font-weight:bold;}'+
'.gallery1-left img{border:solid 1px #CCC;width:80px;height:80px;}'+
'.gallery1-right{float:left;width:100px;padding-left:2px;overflow:hidden;}'
,'gallery1.css');
});
</script>
</body>
</html>