Code snip: a simple slider demo

[Jack Lee]

Class('App', 'linb.Com',{
    Instance:{
        iniComponents : function(){
            // [[code created by jsLinb UI Builder
            var host=this, children=[], append=function(child){children.push(child.get(0))};
           
            append(
                (new linb.UI.Block)
                .setHost(host,"ctl_block1")
                .setLeft(100)
                .setTop(20)
                .setWidth(500)
                .setHeight(310)
                .setBorderType("none")
                .setBackground("#fff")
            );
           
            host.ctl_block1.append(
                (new linb.UI.Pane)
                .setHost(host,"mainP")
                .setDock("fill")
            );
           
            host.mainP.append(
                (new linb.UI.Pane)
                .setHost(host,"pp")
                .setLeft(-500)
                .setTop(0)
                .setWidth(1500)
                .setHeight(310)
            );
           
            host.pp.append(
                (new linb.UI.Pane)
                .setHost(host,"p1")
                .setLeft(0)
                .setTop(0)
                .setWidth(500)
                .setHeight(310)
                .setIframeAutoLoad("http://www.linb.net/Examples")
            );
           
            host.pp.append(
                (new linb.UI.Pane)
                .setHost(host,"p2")
                .setLeft(500)
                .setTop(0)
                .setWidth(500)
                .setHeight(310)
                .setIframeAutoLoad("http://www.linb.net")
            );
           
            host.pp.append(
                (new linb.UI.Pane)
                .setHost(host,"p3")
                .setLeft(1000)
                .setTop(0)
                .setWidth(500)
                .setHeight(310)
                .setZIndex(10)
                .setIframeAutoLoad("http://www.linb.net/Order.html")
            );
           
            append(
                (new linb.UI.Button)
                .setHost(host,"toLeft")
                .setLeft(70)
                .setTop(20)
                .setWidth(30)
                .setHeight(310)
                .setZIndex(1004)
                .setCaption("<")
                .onClick("_toleft_onclick")
            );
           
            append(
                (new linb.UI.Button)
                .setHost(host,"toRight")
                .setLeft(600)
                .setTop(20)
                .setWidth(34)
                .setHeight(310)
                .setZIndex(1002)
                .setCaption(">")
                .onClick("_toright_onclick")
            );
           
            return children;
            // ]]code created by jsLinb UI Builder
        },
        _toright_onclick : function (profile,e,src,value){
            var ns = this;
            ns.pp.getRoot().animate({left:[-500,0]},function(){
                ns.toLeft.setDisabled(true);
                ns.toRight.setDisabled(true);
            },function(){
                ns.toLeft.setDisabled(false);
                ns.toRight.setDisabled(false);
               
                ns.pp.getRoot().left(-500);
                ns.p1.getRoot().left(500);
                ns.p2.getRoot().left(1000);
                ns.p3.getRoot().left(0);
               
                var pt=ns.p3;
                ns.p3=ns.p2;
                ns.p2=ns.p1;
                ns.p1=pt;
            },300,15,"sineOut").start();
        },
        _toleft_onclick : function (profile,e,src,value){
            var ns = this;
            ns.pp.getRoot().animate({left:[-500,-1000]},function(){
                ns.toLeft.setDisabled(true);
                ns.toRight.setDisabled(true);
            },function(){
                ns.toLeft.setDisabled(false);
                ns.toRight.setDisabled(false);
               
                ns.pp.getRoot().left(-500);
                ns.p1.getRoot().left(1000);
                ns.p2.getRoot().left(0);
                ns.p3.getRoot().left(500);
               
                var pt=ns.p1;
                ns.p1=ns.p2;
                ns.p2=ns.p3;
                ns.p3=pt;
            },300,15,"sineOut").start();
        }
    }
});

[wahono sri]

It's OK for rich content slider and work perfectly.

How to animate image element (linb widget)? I try this simple thing, but maybe my knowledge about JS very little. Please help me.

// The default code is a com class (inherited from linb.Com)
Class('App.mainform', 'linb.Com',{
    // Ensure that all the value of "key/value pair" does not refer to external variables
    Instance:{
        // To initialize instance(e.g. properties)
        initialize : function(){
            // To determine whether or not the com will be destroyed, when the first UI control be destroyed
            this.autoDestroy = true;
            // To initialize properties
            this.properties = {};
        },
        // To initialize internal components (mostly UI controls)
        // *** If you're not a skilled, dont modify this function manually ***

        iniComponents : function(){
            // [[code created by jsLinb UI Builder
            var host=this, children=[], append=function(child){children.push(child.get(0))};
            
            append(

                (new linb.UI.Image)
                .setHost(host,"ctl_service")
                .setLeft(20)
                .setTop(30)
                .setWidth(90)
                .setHeight(90)
                .setSrc("{/}img/service.png")
                .beforeHoverEffect("_ctl_service_beforehovereffect")

            );
            
            return children;
            // ]]code created by jsLinb UI Builder
        }
        ,

        // Give a chance to load other com
        iniExComs : function(com, threadid){
        },
        // Give a chance to determine which UI controls will be appended to parent container
        customAppend : function(parent, subId, left, top){
            // "return false" will cause all the internal UI controls will be added to the parent panel
            return false;
        },
        // This instance's events
        events : {},
        _ctl_service_beforehovereffect : function (profile,item,e,src,type){
            this.ctl_service.animate({
                 opacity : [1,0] 
                }, 
                             { 
                                 left : [0,200], 
                                 top : [0,300], 
                                 width : [30,300], 
                                 height : [30,300], 
                                 opacity : [1,0] 
                             }, 
                             null,null,500,50,'sineOut').start()
                },
    }
});

[Jack Lee]

Run the code as following.

BTW, How to highlight the code?

-------------

// The default code is a com class (inherited from linb.Com)

Class('App.mainform', 'linb.Com',{
    // Ensure that all the value of "key/value pair" does not refer to external variables
    Instance:{

        // To initialize internal components (mostly UI controls)
        // *** If you're not a skilled, dont modify this function manually ***
        iniComponents : function(){
            // [[code created by jsLinb UI Builder
            var host=this, children=[], append=function(child){children.push(child.get(0))};
            
            append(
                (new linb.UI.Image)
                .setHost(host,"ctl_service")
                .setLeft(20)
                .setTop(30)

                .setWidth(60)
                .setHeight(30)
                .setSrc("http://www.linb.net/img/logo.gif")

                .beforeHoverEffect("_ctl_service_beforehovereffect")
            );
            
            return children;
            // ]]code created by jsLinb UI Builder
        }
        ,

        // Give a chance to determine which UI controls will be appended to parent container
        customAppend : function(parent, subId, left, top){
            // "return false" will cause all the internal UI controls will be added to the parent panel
            return false;
        },
        // This instance's events

        events : {"onRender":"_com_onrender"},
        _ctl_service_beforehovereffect : function (profile,item,e,src,type){
            var args;
            if(type=="mouseover"){
                args={
                 opacity : [0.5,1],
                 width : [60,120],
                 height : [30,60]
                };
            }else{
                args={
                 opacity : [1,0.5],
                 width : [120,60],
                 height :[60,30]
                };
            }
            
            this.ctl_service.getRoot().animate(args, null,null,300,30,'sineOut').start();

            return false;
        },
        _com_onrender : function (com,threadid){
            var ns=this,
                ctrl=ns.ctl_service;
            ctrl.getRoot().css('opacity',0.5);
        }
    }
});

[wahono sri]

Thanks Jack, it works as I hope.