背景样色设置 和 theme

abiao5555

我用 linb.CSS.includeLink 引入一个 CSS文件，然后用setCustomClass 设置背景，无论是背景颜色还是背景图片，只有在default 风格下面生效， 但是边框却没这个问题，请教原因

app/js 下 index.js
-----------------------------------
Class('App', 'linb.Com',{
    Instance:{
        autoDestroy:true,

        iniComponents:function(){
            // [[code created by jsLinb UI Builder

            linb.CSS.includeLink('myStyle.css', 'myStyle', false, {"rel":"stylesheet","type":"text/css"});
            var host=this, children=[], append=function(child){children.push(child.get(0))};

            append((new linb.UI.Panel)
                .host(host,"myPanel")
                .setZIndex(1)
                .setCaption("panel4")
                .onIniPanelView(
                function(profile,item){                                       
                     linb.ComFactory.newCom("App.inPanel", function () {  
                                                                 host.myPanel.append(this.getUIComponents());
                                                                               
                                                                                });               
                    }
                )
            );

            return children;
            // ]]code created by jsLinb UI Builder
        },
               
        events:{"onReady":"_onReady"},
               
                _onReady:function(){
                        linb.UI.setTheme("default");
                        },
               
               
               
               
        customAppend:function(parent,subId,left,top){
            return false;
        },
        iniResource:function(com, threadid){
        },
        iniExComs:function(com, hreadid){
        }
    }
});

app/js 下 inPanel.js
--------------------------------------

Class('App.inPanel', 'linb.Com',{
    Instance:{
        autoDestroy:true,

        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)
                .host(host,"block1")
                .setLeft(130)
                .setTop(110)
                .setWidth(350)
                .setCustomClass({"PANEL":"inPenalBlockBg","KEY":"inPenalBlockBd"})
                               
            );
            
            host.block1.append((new linb.UI.SLabel)
                .host(host,"showHello")
                .setLeft(80)
                .setTop(30)
                .setCaption("hello")
            );
                       
                    append((new linb.UI.RadioBox)
                .host(host,"themeSetting")
                .setItems([{"id":"default", "caption":"default"}, {"id":"vista", "caption":"vista"}, {"id":"aqua", "caption":"aqua"}])
                .setLeft(130)
                .setTop(250)
                                .setHeight(100)
                .setValue("default")
                .onItemSelected( function (profile, item, src) { linb.UI.setTheme(item.id) } )
            );
                                               
            
            return children;
            // ]]code created by jsLinb UI Builder
        },
        events:{},
        customAppend:function(parent,subId,left,top){
            return false;
        },
        iniResource:function(com, threadid){
        },
        iniExComs:function(com, hreadid){
        }
    }
});

样式文件myStyle.css ,与index.html 并列
------------------------------------------
@charset "utf-8";
/* CSS Document */

.inPenalBlockBg{ background: url();}
.inPenalBlockBd{ border:dotted #FF3333 3px;}

linb

改变theme，会在head的最后加入一个css文件，这个文件在你的css后面，所以是优先的。
另外，theme css文件中没有定义边框，所以边框继承了以前的。

解决方案，在改变theme后调用：
linb.CSS.remove("id", "mycustomcssid");
// 第三个参数用 false，这样会加到最后
linb.CSS.includeLink("myStyle.css", "mycustomcssid", false);

abiao5555

thanks
字数