Location: PHPKode > scripts > Sigma visual ajax UI builder > sigma-visual-ajax-ui-builder/Samples/linb/Template/gallery1.html
<!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>
Return current item: Sigma visual ajax UI builder