extjs4 tab 样式修改

原文:http://cjblog.iteye.com/blog/1879921


说明:原文给的样式,把Tab标签右边空白改成白色了,我觉得不爽,做了下修改,保持原来的颜色不变,这样应对不同主题时,应该不会太影响其它效果,由于样式增加了tab的header高度,原来有个背景图就不能用了,下面的样式中我直接把该背景图取消了。看起还可以。

tab-bar.css:


CSS CODE:
  /* CSS Document */

        .ui-tab-bar
        {
            padding-top: 1px;
        }

            .ui-tab-bar .x-tab-bar
            {
                /*background: #FFF !important;*/
                border: 0 !important;
            }

            /*去掉Tabs右边的线条图片*/
            .ui-tab-bar .x-tab-bar-default-top{
                background-image:none;
            }

            .ui-tab-bar .x-tab-bar-strip
            {
                top: 31px !important; /* Default value is 20*/
            }

            .ui-tab-bar .x-tab-bar-strip-default-top
            {
                height: 0px !important;
            }


            .ui-tab-bar .ui-tab-body
            {
                border: 0 !important;
            }

            .ui-tab-bar .x-tab-bar .x-tab-bar-body
            {
                height: 34px !important; /* Default value is 23*/
                /*border: 0 !important;*/ /* Overides the border that appears on resizing the grid */
            }

                .ui-tab-bar .x-tab-bar .x-tab-bar-body .x-box-inner
                {
                    height: 32px !important; /* Default value is 21*/
                }

                    .ui-tab-bar .x-tab-bar .x-tab-bar-body .x-box-inner .x-tab
                    {
                        height: 31px !important; /* Default value is 21*/
                    }

                    .ui-tab-bar .x-tab-bar .x-tab-bar-body .x-box-inner .x-tab-button
                    {
                        height: 24px !important; /* Default value 13*/
                        line-height: 24px !important; /* Default value 13*/
                        margin-top: 5px;
                    }



引用方式:
var center = Ext.create("Ext.tab.Panel",{
    region:"center",
id: 'center-panel',
    defaults: { 
                autoScroll:true
             }, 
 cls:"ui-tab-bar",
 bodyCls:"ui-tab-body",
             activeTab: 0,
 //plugins: [Ext.create('Ext.ux.TabCloseMenu')],
             items: [{ 
               id: "HomePage", 
               title: "首页"
             }] 
   });



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值