Office 2010 Style Ribbon Toolbar in HTML/CSS/JS

Posted on June 8, 2011 by Roger

I have created an implementation of the Office 2010 Ribbon toolbar that can be used in any website. It is written in HTML, CSS, and JS. Try a demo at http://okgodoit.com/ribbon/ or watch the video at http://www.youtube.com/watch?v=5YOpn2W-fQ8. Download the source from http://okgodoit.com/ribbon/ribbon.zip.

Some highlights:

  • Light (silver) and dark (black) themes
  • 2010-style Backstage feature (optional)
  • 2 button sizes
  • Buttons can have a disabled state
  • Tabs, sections, and buttons can all have custom HTML (such as bold or entities) in their titles
  • Optional hot and disabled icon states
  • Full HTML in ScreenTip (tooltip) supported

So far I’ve tested it in Chrome, Firefox, Safari, and IE 8+. I’m still working on IE 7 compatibility, and I haven’t tested it on Opera. It uses the jQuery framework.

There’s still a lot of work left to be done, but I wanted to get this first version out there. Feel free to leave feedback and suggestions in the comments.

Please note that you legally should license the ribbon UX from Microsoft (for free) at http://msdn.microsoft.com/en-us/office/aa973809.

This entry was posted in Projects. Bookmark the permalink.
  • Steve

    Roger -
    Many thanks!

    I found these two functions to be a helpful addition:
    [hoping they post properly]
    $.fn.switchToTab = function(tabid) { for (var item in tabNames) { var thisTabId = tabNames[item]; if(thisTabId == tabid) that.switchToTabByIndex(item); } }        $.fn.selectedTab = function() {  for (var item in tabNames) { var thisTabId = tabNames[item]; if ($(‘#ribbon #ribbon-tab-header-strip’).find(‘#ribbon-tab-header-’+item).hasClass(‘sel’)) return tabNames[item]; } return -1; }

  • Quannetdidong

    I want to set default tab = 2 ? help me.

  • http://www.OkGoDoIt.com OkGoDoIt

    $(‘#ribbon’).ribbon().switchToTabByIndex(2)

    That should work, although I admit it’s not obvious.  Perhaps I should implement a helper function.

  • Quannetdidong

    year, thank you OkgoDoIt!
    I have another question: How to get tabid when click on ribbon tab.

  • Appreciative User

    Hi, can you show how to generate alerts for the big buttons in the File table and also for the new selected tab. A simply alert like the Open Table functionality would be appreciated.

  • NJ

    Finally, something that’s recent and actually looks like it! :)

  • Abd. Gafur Jamada

    Your tutorial is very helpful, how to hide and show the button

blog comments powered by Disqus