Another Ribbon Style

**khebs@live.com** · 8 May 2011 9:42 AM

Yet another ribbon for ExtJS 4. Experimental UX.

- FIXME: Some CSS Problem with Firefox Chrome in XP. Specifically in ButtonGroups does not properly aligns the height with other groups if it has only 1 item or a menu button, etc. Please experiment, if you think you fixed it, please post back your magic solution here.

Code:

/**
 * @class App.lib.ux.Ribbon
 * @extend Ext.tab.Panel
 */
Ext.define('App.lib.ux.Ribbon', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.appuxribbon',
    cls: 'ui-ribbonbar',
    activeTab: 0,
    plain: true,
    unstyled: true,
    margin: '5 0 0 0',
    autoHeight: true,

    addTab: function (config, focus) {
        var tab = this.add(config);
        if (focus === true) this.setActiveTab(tab);
    },

    initComponent: function () {
        this.callParent(arguments);
    }
});

Code:

/**
 * @class App.lib.ux.RibbonTab
 * @extend Ext.tab.Tab
 */
Ext.define('App.lib.ux.RibbonTab', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.appuxribbontab',
    unstyled: true,
    layout: 'hbox',
    title: 'Untitled',

    defaults: {
        xtype: 'buttongroup',
        headerPosition: 'bottom',
        margins: '1 0 3 3'
    },

    initComponent: function () {
        this.callParent(arguments);

        this.on('added', function (o, c, i) {
            Ext.each(this.items.items, function (btnGroups) {
                Ext.each(btnGroups.items.items, function (item) {
                    if (item.scale !== 'small') {
                        var text = String(item.text);

                        if (text.indexOf('\n') != -1) { // has \n ?
                            text = text.replace('\n', '<br/>');
                        } else if (text.indexOf(' ') != -1) {
                            text = text.replace(/[ +]/gi, '<br/>');
                        } else {
                            if (!item.menu || item.arrowAlign !== 'bottom')
                                item.cls = 'x-btn-as-arrow';
                        }

                        if (item.setText)
                            item.setText(text);
                    }
                });
            });
        });

        this.on('render', function () {
            this.doLayout(true);
        });
    }
});

The CSS

Code:

.ui-ribbonbar
{
    border-color: #99BBE8;
    background-image: none;
    background-color: #DFE9F5;
    background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#DFE9F5),color-stop(100%,#D3E1F1));
    background-image: -moz-linear-gradient(top,#DFE9F5,#D3E1F1);
    background-image: linear-gradient(top,#DFE9F5,#D3E1F1);
    border-bottom: 1px solid #99BBE8 !important;
}

.ui-ribbonbar .x-btn-as-arrow em
{
    display: block;
    background-color: transparent;
    padding-bottom: 15px;
    font-size: 1px!important;
}

.x-chrome .ui-ribbonbar .x-btn-as-arrow em
{
    padding-bottom: 13px;
}

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

.ui-ribbonbar .x-tab-default-top
{
    background-image: none;
    background-color: transparent;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -o-box-shadow: white 0 1px 0 0 inset,white -1px 0 0 0 inset,white 1px 0 0 0 inset;
    border: 1px solid transparent;
}

.ui-ribbonbar .x-tab-default-top
{
    margin-left: 2px !important;
}

.ui-ribbonbar .x-tab-default-closable
{
    padding-right: 10px;
}

.ui-ribbonbar .x-tab-close-btn
{
    font-size: 0px !important;
    text-indent: -999px;
}

.ui-ribbonbar .x-tab-top-active
{
    border: 1px solid #8DB2E3;
    background-image: none;
    background-color: #DFE9F5;
    background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(30%,white),color-stop(100%,#DFE9F5));
    background-image: -moz-linear-gradient(top,white,#F5F9FE 30%,#DEECFD 100%);
    background-image: linear-gradient(top,white,#F5F9FE 30%,#DEECFD 100%);
}

.ui-ribbonbar .x-tab-default-top-active
{
    border-bottom-color: #DFE9F5 !important;
}

.ui-ribbonbar .x-tab em
{
    padding: 0 10px;
}

.ui-ribbonbar .x-tab em button
{
    font-weight: normal !important;
}

.ui-ribbonbar .x-toolbar-default
{
    border-color: #99BBE8;
    background-image: none;
    background-color: #D3E1F1;
    background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#DFE9F5),color-stop(100%,#D3E1F1));
    background-image: -moz-linear-gradient(top,#DFE9F5,#D3E1F1);
    background-image: linear-gradient(top,#DFE9F5,#D3E1F1);
}

Sample Usage:

Make Ribbon Tabs

Code:

/**
 * @class App.view.employees.list.Ribbon
 * @extend App.lib.ux.RibbonTab
 */
Ext.define('App.view.employees.list.Ribbon', {
    extend: 'App.lib.ux.RibbonTab',
    alias: 'widget.employeeslistribbon',

    title: 'Employees',
    closable: false,

    items: [{
        title: 'Data',
        items: [{
            text: 'List of All\nEmployees',
            iconCls: 'icon-ribbon-address32',
            scale: 'large',
            iconAlign: 'top',
            action: 'list'
        }]
    }, {
        title: 'New',
        columns: 3,
        items: [{
            text: 'New Employee',
            scale: 'large',
            iconAlign: 'top',
            iconCls: 'icon-ribbon-contact32',
            action: 'newemployee'
        }, {
            text: 'New Department',
            scale: 'large',
            iconAlign: 'top',
            iconCls: 'icon-ribbon-inbox32'
        }, {
            text: 'Archived Documents',
            scale: 'large',
            iconAlign: 'top',
            iconCls: 'icon-ribbon-docs32'
        }]
    }, {
        title: 'Action',
        defaults: {
            scale: 'large',
            iconAlign: 'top'
        },
        items: [{
            text: 'Delete',
            action: 'delete',
            iconCls: 'icon-ribbon-deletecontact32'
        }, {
            text: 'Refresh All',
            iconCls: 'icon-ribbon-refresh32'
        }]
    }, {
        title: 'Reports',
        defaults: {
            scale: 'large',
            iconAlign: 'top'
        },
        items: [{
            text: 'Available Reports',
            iconCls: 'icon-ribbon-report32'
        }]
    }]
});

Ribbon Bar - which is probably the north region / dock: 'top' of your viewport / window

Code:

/**
 * @class App.view.ui.RibbonBar
 * @extend Ext.tab.Panel
 */
Ext.define('App.view.ui.RibbonBar', {
    extend: 'App.lib.ux.Ribbon',
    alias: 'widget.uiribbonbar',

    initComponent: function () {
        this.callParent(arguments);
    }
});

...

Ext.Viewport({
    ...
    items: [{
        xtype: 'uiribbonbar', region: 'north'
    }]
    ...
});

In your controller

Code:

/**
 * @class App.controller.Employees
 * @extend Ext.app.Controller
 */
Ext.define('App.controller.Employees', {
    extend: 'Ext.app.Controller',

    views: [
        'employees.list.Ribbon',
        ...
    ],

    refs: [
    // List
        { ref: 'listRibbon', selector: 'employeeslistribbon', xtype: 'employeeslistribbon', autoCreate: true }.
        { ref: 'ribbonBar', selector: 'uiribbonbar' }.
        ...
        ...
    ],

    // private
    init: function () {
        this.control({
            'employeeslistribbon': {
                activate: this.showList
            },
            ...
            ...
        });
    },

    // private
    onLaunch: function () {
        this.showList();
    },

    /**
     * Shows Employee Listings
     * @method showList
     */
    showList: function () {
        var rb = this.getRibbonBar(), ribbon = this.getListRibbon();
        ...
        if (!ribbon.rendered) rb.add(ribbon);
        ...
        //rb.setActiveTab(ribbon);
    },

    ...
    ...

});

**khebs@live.com** · 12 May 2011 3:50 AM

ui-ribbon.css

Code:

.ui-ribbonbar 
{
    background: transparent;
}

.ui-ribbonbar .x-panel-body-default
{
    border-color: #99BBE8 !important;
    background-image: none !important;
    background-color: #DFE9F5 !important;
    background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#DFE9F5),color-stop(60%,#ccdbec)) !important;
    background-image: -moz-linear-gradient(top,#DFE9F5 5%,#ccdbec 60%) !important;
    background-image: linear-gradient(top,#DFE9F5 5%,#ccdbec 60%) !important;
    
    border-bottom: 1px solid #99BBE8 !important;
    
    border-radius: 2px 2px 0px 0px;
    -moz-border-radius: 2px 2px 0px 0px;
    -webkit-border-radius: 2px 2px 0px 0px;
    -o-border-radius: 2px 2px 0px 0px;
    -ms-border-radius: 2px 2px 0px 0px;
    -khtml-border-radius: 2px 2px 0px 0px;
}

.ui-ribbonbar .x-tab-bar-strip 
{
    border-top: 0px;
    padding-right: 10px;
}

.ui-ribbonbar .x-btn-as-arrow em
{
    display: block;
    background-color: transparent;
    padding-bottom: 15px;
    font-size: 1px!important;
}

.x-chrome .ui-ribbonbar .x-btn-as-arrow em
{
    padding-bottom: 13px;
}

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

.ui-ribbonbar .x-tab-default-top
{
    background-image: none;
    background-color: transparent;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -o-box-shadow: white 0 1px 0 0 inset,white -1px 0 0 0 inset,white 1px 0 0 0 inset;
    border: 1px solid transparent;
}

.ui-ribbonbar .x-tab-default-top
{
    margin-left: 2px !important;
}

.ui-ribbonbar .x-tab-default-closable
{
    padding-right: 10px;
}

.ui-ribbonbar .x-tab-close-btn
{
    font-size: 0px !important;
    text-indent: -999px;
}

.ui-ribbonbar .x-tab-bar-body
{
    top: 3px !important;
    border-bottom: 0px !important;
}

.ui-ribbonbar .x-tab-top-active
{
    border: 1px solid #8DB2E3;
    background-image: none;
    background-color: #DFE9F5;
    background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(5%,white),color-stop(80%,#DFE9F5));
    background-image: -moz-linear-gradient(top,white,#F5F9FE 5%,#DFE9F5 80%);
    background-image: linear-gradient(top,white,#F5F9FE 5%,#DEECFD 80%);
}

.ui-ribbonbar .x-tab-default-top-active
{
    border-bottom-color: #DFE9F5 !important;
}

.ui-ribbonbar .x-tab em
{
    padding: 0 10px;
}

.ui-ribbonbar .x-tab em button
{
    font-weight: normal !important;
}

.ui-ribbonbar .x-tab-bar-body .x-box-inner
{
    height: 24px !important;
}

App.lib.ux.Ribbon

Code:

/**
 * @class App.lib.ux.Ribbon
 * @extend Ext.tab.Panel
 */
Ext.define('App.lib.ux.Ribbon', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.appuxribbon',
    cls: 'ui-ribbonbar',
    activeTab: 0,
    plain: true,
    unstyled: true,
    autoHeight: true,
    border: false,

    bodyStyle: 'margin-bottom: -3px;',

    addTab: function (config, focus) {
        var tab = this.add(config);
        if (focus === true) this.setActiveTab(tab);
    },

    initComponent: function () {
        this.callParent(arguments);
    }
});

App.lib.ix.RibbonTab

Code:

/**
 * @class App.lib.ux.RibbonTab
 * @extend Ext.tab.Tab
 */
Ext.define('App.lib.ux.RibbonTab', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.appuxribbontab',
    layout: 'hbox',
    title: 'Untitled',

    defaults: {
        xtype: 'buttongroup',
        headerPosition: 'bottom',
        margins: '3 0 3 3'
    },

    initComponent: function () {
        this.callParent(arguments);

        this.on('added', function (o, c, i) {
            Ext.each(this.items.items, function (btnGroups) {
                Ext.each(btnGroups.items.items, function (item) {
                    if (item.scale !== 'small') {
                        var text = String(item.text);

                        if (text.indexOf('\n') != -1) { // has \n ?
                            text = text.replace('\n', '<br/>');
                        } else if (text.indexOf(' ') != -1) {
                            text = text.replace(/[ +]/gi, '<br/>');
                        } else {
                            if (!item.menu || item.arrowAlign !== 'bottom')
                                item.cls = 'x-btn-as-arrow';
                        }

                        if (item.setText)
                            item.setText(text);
                    }
                });
            });
        });

        this.on('render', function () {
            this.doLayout(true);
        });
    }
});

ribbon2.png

**ajaxvador** · 16 May 2011 2:11 AM

Hi,

I tried the example posted on the forum, but that does not work. can you post an example or demo

(beautiful screen shot)

many thanks

**khebs@live.com** · 16 May 2011 8:23 AM

I tried the example posted on the forum, but that does not work. can you post an example or demo
- What did not work?

This ux works just like the Toolbar, nothing special. Maybe just the css and some config in the ux itself.

(beautiful screen shot)
- Thanks for appreciating it

**ajaxvador** · 16 May 2011 9:52 AM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="scripts/ext4//resources/css/ext-all.css" />
<script type="text/javascript" src="scripts/ext4/ext-all.js"></script>

<style>
.ui-ribbonbar
{
border-color: #99BBE8;
background-image: none;
background-color: #DFE9F5;
background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#DFE9F5),color-stop(100%,#D3E1F1));
background-image: -moz-linear-gradient(top,#DFE9F5,#D3E1F1);
background-image: linear-gradient(top,#DFE9F5,#D3E1F1);
border-bottom: 1px solid #99BBE8 !important;
}

.ui-ribbonbar .x-btn-as-arrow em
{
display: block;
background-color: transparent;
padding-bottom: 15px;
font-size: 1px!important;
}

.x-chrome .ui-ribbonbar .x-btn-as-arrow em
{
padding-bottom: 13px;
}

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

.ui-ribbonbar .x-tab-default-top
{
background-image: none;
background-color: transparent;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
-o-box-shadow: white 0 1px 0 0 inset,white -1px 0 0 0 inset,white 1px 0 0 0 inset;
border: 1px solid transparent;
}

.ui-ribbonbar .x-tab-default-top
{
margin-left: 2px !important;
}

.ui-ribbonbar .x-tab-default-closable
{
padding-right: 10px;
}

.ui-ribbonbar .x-tab-close-btn
{
font-size: 0px !important;
text-indent: -999px;
}

.ui-ribbonbar .x-tab-top-active
{
border: 1px solid #8DB2E3;
background-image: none;
background-color: #DFE9F5;
background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(30%,white),color-stop(100%,#DFE9F5));
background-image: -moz-linear-gradient(top,white,#F5F9FE 30%,#DEECFD 100%);
background-image: linear-gradient(top,white,#F5F9FE 30%,#DEECFD 100%);
}

.ui-ribbonbar .x-tab-default-top-active
{
border-bottom-color: #DFE9F5 !important;
}

.ui-ribbonbar .x-tab em
{
padding: 0 10px;
}

.ui-ribbonbar .x-tab em button
{
font-weight: normal !important;
}

.ui-ribbonbar .x-toolbar-default
{
border-color: #99BBE8;
background-image: none;
background-color: #D3E1F1;
background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#DFE9F5),color-stop(100%,#D3E1F1));
background-image: -moz-linear-gradient(top,#DFE9F5,#D3E1F1);
background-image: linear-gradient(top,#DFE9F5,#D3E1F1);
}
</style>

<script>

Ext.require([ '*' ]);

/**
* @class App.lib.ux.Ribbon
* @extend Ext.tab.Panel
*/
Ext.define('App.lib.ux.Ribbon', {
extend: 'Ext.tab.Panel',
alias: 'widget.appuxribbon',
cls: 'ui-ribbonbar',
activeTab: 0,
plain: true,
unstyled: true,
margin: '5 0 0 0',
autoHeight: true,

addTab: function (config, focus) {
var tab = this.add(config);
if (focus === true) this.setActiveTab(tab);
},

initComponent: function () {
this.callParent(arguments);
}
});

/**
* @class App.lib.ux.RibbonTab
* @extend Ext.tab.Tab
*/
Ext.define('App.lib.ux.RibbonTab', {
extend: 'Ext.panel.Panel',
alias: 'widget.appuxribbontab',
unstyled: true,
layout: 'hbox',
title: 'Untitled',

defaults: {
xtype: 'buttongroup',
headerPosition: 'bottom',
margins: '1 0 3 3'
},

initComponent: function () {
this.callParent(arguments);

this.on('added', function (o, c, i) {
Ext.each(this.items.items, function (btnGroups) {
Ext.each(btnGroups.items.items, function (item) {
if (item.scale !== 'small') {
var text = String(item.text);

if (text.indexOf('\n') != -1) { // has \n ?
text = text.replace('\n', '<br/>');
} else if (text.indexOf(' ') != -1) {
text = text.replace(/[ +]/gi, '<br/>');
} else {
if (!item.menu || item.arrowAlign !== 'bottom')
item.cls = 'x-btn-as-arrow';
}

if (item.setText)
item.setText(text);
}
});
});
});

this.on('render', function () {
this.doLayout(true);
});
}
});

/**
* @class App.view.employees.list.Ribbon
* @extend App.lib.ux.RibbonTab
*/
Ext.define('App.view.employees.list.Ribbon', {
extend: 'App.lib.ux.RibbonTab',
alias: 'widget.employeeslistribbon',

title: 'Employees',
closable: false,

items: [{
title: 'Data',
items: [{
text: 'List of All\nEmployees',
iconCls: 'icon-ribbon-address32',
scale: 'large',
iconAlign: 'top',
action: 'list'
}]
}, {
title: 'New',
columns: 3,
items: [{
text: 'New Employee',
scale: 'large',
iconAlign: 'top',
iconCls: 'icon-ribbon-contact32',
action: 'newemployee'
}, {
text: 'New Department',
scale: 'large',
iconAlign: 'top',
iconCls: 'icon-ribbon-inbox32'
}, {
text: 'Archived Documents',
scale: 'large',
iconAlign: 'top',
iconCls: 'icon-ribbon-docs32'
}]
}, {
title: 'Action',
defaults: {
scale: 'large',
iconAlign: 'top'
},
items: [{
text: 'Delete',
action: 'delete',
iconCls: 'icon-ribbon-deletecontact32'
}, {
text: 'Refresh All',
iconCls: 'icon-ribbon-refresh32'
}]
}, {
title: 'Reports',
defaults: {
scale: 'large',
iconAlign: 'top'
},
items: [{
text: 'Available Reports',
iconCls: 'icon-ribbon-report32'
}]
}]
});

var tabs = Ext.createWidget('tabpanel', {

itemId: 'tabPanel',
activeTab: 0,
border:false,
frame:false, plain:false,
defaults :{
bodyPadding: 10
},
items: [{

title: 'Short Text'
// closable: true
},{

title: 'Long Text'
}]
});

Ext.onReady(function() {
Ext.QuickTips.init();

var viewport = Ext.create('Ext.Viewport', {
id: 'border-example',
layout: 'border',
items: [

{
region: 'north',

height: 100,

layout:'fit',
items: [{xtype: 'uiribbonbar'}]
} ,

Ext.create('Ext.tab.Panel', {
region: 'center',
deferredRender: false,
activeTab: 0,
items: [{
title: 'Bureau',

autoScroll: true
}, {
// contentEl: 'center2',
title: 'Center Panel',
autoScroll: true,
closable: true
}]
})]
});
});
</script>
</head>
<body>
</body>
</html>

thanks for your help

**ykey** · 16 May 2011 11:54 AM

I was able to get it working as is and can post the code later today if nobody beats me to it.

**ykey** · 16 May 2011 2:38 PM

You will need to add the CSS for the extension and your icons from the above post.

Code:

                   Ext.onReady(function() {
			Ext.define('App.lib.ux.Ribbon', {				
				extend: 'Ext.tab.Panel',
				alias: 'widget.appuxribbon',
				cls: 'ui-ribbonbar',
				activeTab: 0,
				plain: true,
				unstyled: true,
				autoHeight: true,
				border: false,

				bodyStyle: 'margin-bottom: -3px;',

				addTab: function (config, focus) {
					var tab = this.add(config);
					if (focus === true) this.setActiveTab(tab);
				},

				initComponent: function () {
					this.callParent(arguments);
				}
			});

			Ext.define('App.lib.ux.RibbonTab', {
				extend: 'Ext.panel.Panel',
				alias: 'widget.appuxribbontab',
				layout: 'hbox',
				title: 'Untitled',

				defaults: {
					xtype: 'buttongroup',
					headerPosition: 'bottom',
					margins: '3 0 3 3'
				},

				initComponent: function () {
					this.callParent(arguments);

					this.on('added', function (o, c, i) {
						Ext.each(this.items.items, function (btnGroups) {
							Ext.each(btnGroups.items.items, function (item) {
								if (item.scale !== 'small') {
									var text = String(item.text);

									if (text.indexOf('\n') != -1) { // has \n ?
										text = text.replace('\n', '<br/>');
									} else if (text.indexOf(' ') != -1) {
										text = text.replace(/[ +]/gi, '<br/>');
									} else {
										if (!item.menu || item.arrowAlign !== 'bottom')
											item.cls = 'x-btn-as-arrow';
									}

									if (item.setText)
										item.setText(text);
								}
							});
						});
					});

					this.on('render', function () {
						this.doLayout(true);
					});
				}
			});
			
			Ext.define('App.view.ui.RibbonBar', {
				extend: 'App.lib.ux.Ribbon',
				alias: 'widget.uiribbonbar',

				initComponent: function () {
					this.callParent(arguments);
				}
			});
			
			Ext.define('App.view.employees.list.Ribbon', {
				extend: 'App.lib.ux.RibbonTab',
				alias: 'widget.employeeslistribbon',
				title: 'Employees',
				closable: false,
				items: [{
					title: 'Data',
					items: [{
						text: 'List of All\nEmployees',
						iconCls: 'icon-ribbon-address32',
						scale: 'large',
						iconAlign: 'top',
						action: 'list'
					}]
				}, {
					title: 'New',
					columns: 3,
					items: [{
						text: 'New Employee',
						scale: 'large',
						iconAlign: 'top',
						iconCls: 'icon-ribbon-contact32',
						action: 'newemployee'
					}, {
						text: 'New Department',
						scale: 'large',
						iconAlign: 'top',
						iconCls: 'icon-ribbon-inbox32'
					}, {
						text: 'Archived Documents',
						scale: 'large',
						iconAlign: 'top',
						iconCls: 'icon-ribbon-docs32'
					}]
				}, {
					title: 'Action',
					defaults: {
						scale: 'large',
						iconAlign: 'top'
					},
					items: [{
						text: 'Delete',
						action: 'delete',
						iconCls: 'icon-ribbon-deletecontact32'
					}, {
						text: 'Refresh All',
						iconCls: 'icon-ribbon-refresh32'
					}]
				}, {
					title: 'Reports',
					defaults: {
						scale: 'large',
						iconAlign: 'top'
					},
					items: [{
						text: 'Available Reports',
						iconCls: 'icon-ribbon-report32'
					}]
				}]
			});

			var rb = Ext.widget('uiribbonbar');
			var ribbon = Ext.widget('employeeslistribbon');
			
			Ext.create('Ext.container.Viewport', {
				renderTo: Ext.getBody(),
				items: [rb]
			});	

			rb.add(ribbon);
		});

**hyteckit** · 16 May 2011 5:23 PM

Really cool.

Wondering if we can get a vertical version.

Most monitors these days are widescreen. There isn't much vertical space left for content after adding up the vertical space use up by the ribbon and the web browser toolbar.

**ajaxvador** · 17 May 2011 12:48 AM

thanks my friend

**bigice** · 26 May 2011 9:07 AM

demo online please or Download link?
thanks.

Another Ribbon Style

Thread Tools

Search Thread

Display

Another Ribbon Style

Another Ribbon Style

Updates

Updates

UI dont work for me

UI dont work for me

Similar Threads

Microsoft Office Ribbon (VERY COOL)

Real Ribbon ButtonGroup

Simple Ribbon UX

Simple Ribbon (Ext.ux.Ribbon)

Tags for this Thread