Print Page - How to style tab header?

How to style tab header?

For example i have 4 tabs, and i want to make:
tab 1 have small tab header size
tab 2 have yellow background in tab header
tab 3 have normal tab header size
tab 4 have big tab header size with green background

or see the image below
(http://i.imgur.com/Lh84pXO.jpg)

How to do that?

thank you in advance

Here is the extended method 'setTabStyle' that allows you to set the styles for a special tab strip.

Code:

<script type="text/javascript">
    $.extend($.fn.tabs.methods, {
        setTabStyle: function(jq, param){
            return jq.each(function(){
                var opts = $(this).tabs('options');
                var tab = $(this).tabs('getTab', param.which).panel('options').tab.find('.tabs-inner');
                tab.css(param);
                tab._outerHeight(param.height);
                var margin = opts.tabHeight-param.height;
                tab.css({
                    lineHeight:tab[0].style.height,
                    marginTop:(opts.tabPosition=='top'?margin+'px':0),
                    marginBottom:(opts.tabPosition=='bottom'?margin+'px':0)
                });
            });
        }
    });
    $(function(){
        $('#tt').tabs({
            narrow:true,
            plain:true,
            tabHeight:60
        });
        $('#tt').tabs('setTabStyle', {which:0,height:30});
        $('#tt').tabs('setTabStyle', {which:1,height:40,background:'yellow'});
        $('#tt').tabs('setTabStyle', {which:2,height:40});
        $('#tt').tabs('setTabStyle', {which:3,height:60,background:'green',color:'#fff'});
    })
</script>

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: aswzen on June 20, 2016, 09:21:00 PM