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