Tuesday, 5 June 2012

Tab box with tool bar CSS

 We will see how we can customize the look and feel for Tabbox With toolbar



<zk xmlns:x="xhtml">
    <style>

    .menutabs.z-tab .z-tab-text 
    {
        color: red;
        cursor: pointer;
        font-family: arial,sans-serif;
        font-size: 12px;
        font-size-adjust: none;
        font-weight : bold;
        padding: 4px 14px;
        white-space: nowrap;
    }
    
    .mainmenu.z-tabbox .z-tab .z-tab-hm 
    {
        background-image:none;
        background-color: #d9eef7;
        background-position : center;
        background-repeat : repeat;
        height:36px;
    }

    .mainmenu.z-tabbox .z-tab .z-tab-hm:hover 
    {
        background-image:none;
        background-color: #007ead;
        background-position : center;
        background-repeat : repeat-X;
        height:36px;
        padding:none;
        margin:none;
    }

.mainmenu.z-tabbox .z-tab .z-tab-hl 
    {
        background-image:none;
        background-color: #d9eef7;
        background-position : left ;
        background-repeat : repeat;
        height:36px;
    }

    .mainmenu.z-tabbox .z-tab .z-tab-hl:hover 
    {
        background-image:none;
        background-color: #007ead;
        background-position : left ;
        background-repeat : repeat;
        height:36px;
        padding:none;
        margin:none;
    }


    .mainmenu.z-tabbox .z-tab .z-tab-hr 
    {
        background-image:none;
        background-color: #d9eef7;
        background-position : right ;
        background-repeat : repeat;
        height:36px;
    }

    .mainmenu.z-tabbox .z-tab .z-tab-hr:hover 
    {
        background-image:none;
        background-color: #007ead;
        background-position : right ;
        background-repeat : repeat;
        height:36px;
    }

    .z-tabs-header 
    {
        height: 32px;
        margin: 0;
        overflow: hidden;
        position: relative;
        height: 32px;
    }



    .z-toolbar .z-toolbarbutton-cnt 
    {
        color: #000000;
        font-family: Tahoma,verdana;
        font-size: 1em;
        font-weight: normal;
        padding: 2px 10px 2px 10px;
        position: relative;
        border-left: 1px solid #dddddd;
        border-right: 1px solid #eeeeee;
        border-top: 1px solid #e0e0e0;
    }

    .z-toolbar 
    {
        background: none;
        background-color: #cff791;
        height: 18px;
    }

    .z-toolbarbutton-over .z-toolbarbutton-cnt
    {
        background-image:none;
        background-color: #cff791;
        
    }

    .z-toolbarbutton-select .z-toolbarbutton-cnt
    {
        background-image:none;
        background-color: red;
        
    }
    
    
    </style>
    <tabbox width="100%" sclass="mainmenu">
        <tabs id="tabs" >
            <tab label="Our Product" sclass="menutabs"/>
            <tab label="Live Demo" sclass="menutabs"/>
            <tab label="Online Documentation" sclass="menutabs"/>
        </tabs>

        <tabpanels>
            <tabpanel>

                <toolbar width="794px">
                    <toolbarbutton label="Product 1"  />
                    <toolbarbutton label="Product 2" />
                    <toolbarbutton label="Product 3" />
                </toolbar>
            </tabpanel>

            <tabpanel>
                <toolbar width="800px">
                    <toolbarbutton label="Documentation 1" />
                    <toolbarbutton label="Documentation 2" />
                    <toolbarbutton label="Documentation 3" />
                    <toolbarbutton label="Documentation 4" />
                    <toolbarbutton label="Documentation 5" />
                </toolbar>
            </tabpanel>
        </tabpanels>
    </tabbox>
    <separator height="30px"></separator>
</zk>


Output

image

1 comment:

Passing Parameter between two files using MVVM

This examples shows how to pass parameter between two zul screens. In this example, we are passing some parameters from the parent vm to...