type: widget
release: 0.0
priority: high || medium || low
status: in planning || in development || complete
documentation: url || N/A
demo: http://maninblack.info/_proj/jquery-ui-ribbon/demos/ribbon/ ; http://dev.mikaelsoderstrom.se/scripts/jquery/ribbon/
1 - Description:
A widget to emulate the ribbon style toolbar from the Office 2007 product line (and now MS Paint!).
More details here:
http://office.microsoft.com/en-us/products/HA101679411033.aspx
http://en.wikipedia.org/wiki/Ribbon_(computing)
2 - Visual Design:
3 - Functional Specifications/Requirements:
(Detailed description of how the script will be structured: defaults, options, architecture, extensibility, etc.)
3.1 Architecture
Utilizes basic ui.widget pattern ( Widget factory )
[TODO:]
3.2 Options
[TODO: document existing options]
- autocollapse (boolean, default: false)
- when set to true, the ribbon will collapse automatically whenever the mouse leaves the ribbon area; if auto-expand is not specified, then the user needs to click on any of the available tab buttons to once again expand the ribbon
-
- autoexpand (boolean, default: false)
- when set to true, the ribbon's tabSets will automatically expand whenever the user moves the mouse over any of the available tab button; if auto-collapse is not set, then the user must manually click on any of the tab buttons in order to once again collapse the ribbon
3.3 Methods
[TODO: document existing methods]
3.4 Extensibility
[TODO:]
4 - Markup & Style:
4.1 Initial markup examples
(Pre-enhanced HTML markup structure that will be transformed into the final widget. There may be multiple possible HTML markup options per widget: for example, for a slider, radiobuttons, inputs or selects could all be used. )
<div id="ribbon">
<div id="ribbonContextData" style="display:none;"><label>Data</label></div>
<div id="ribbonContextTestTabs" style="display:none;"><label>Test tabs</label></div>
<ul>
<li><a href="#ribbonTabHome"><span><label>Home</label></span></a></li>
<li><a href="#ribbonTabView"><span><label>View</label></span></a></li>
<li><a href="#ribbonTabImport" rel="ribbonContextData"><span><label>Import</label></span></a></li>
<li><a href="#ribbonTabExport" rel="ribbonContextData"><span><label>Export</label></span></a></li>
<li><a href="#ribbonTabEmpty" rel="ribbonContextTestTabs"><span><label>Empty tab</label></span></a></li>
</ul>
<div id="ribbonTabHome">
<ul>
<li id="groupClipboard_ribbonTabHome">
<div>
<button class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-large-button" id="ribbonButtonPaste" title="Paste"><span><img /><label>Paste</label></span></button>
<ul class="ui-ribbon-element ui-ribbon-list">
<li><button class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-simple-button" id="ribbonButtonCut" title="Cut"><span><img /><label>Cut</label></span></button></li>
<li><button class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-simple-button" id="ribbonButtonCopy" title="Copy"><span><img /><label>Copy</label></span></button></li>
</ul>
</div>
<h3><span>Clipboard</span></h3>
</li>
<li id="groupSomething_ribbonTabHome">
<div>
<ul class="ui-ribbon-element ui-ribbon-list">
<li><button class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-simple-button" id="ribbonButtonWithoutIcon" title="A button without icon"><span><img class="ui-icon-empty" /><label>A button without icon</label></span></button></li>
<li><button class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-simple-button" id="ribbonButtonWithIcon" title="A button with ui-icon"><span><img class="ui-icon-info" /><label>A button with ui-icon</label></span></button></li>
</ul>
</div>
<h3><span>Something</span></h3>
</li>
<li id="groupEditing_ribbonTabHome">
<div>
<button class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-large-button" id="ribbonButtonProperties" title="Properties"><span><img /><label>Properties</label></span></button>
<ul class="ui-ribbon-element ui-ribbon-list">
<li><button class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-simple-button" id="ribbonButtonRename" title="Rename"><span><img class="ui-icon-empty" /><label>Rename</label></span></button></li>
<li><button class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-simple-button" id="ribbonButtonDelete" title="Delete"><span><img class="ui-icon-empty" /><label>Delete</label></span></button></li>
</ul>
<button class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-large-button" id="ribbonButtonSortFilter" title="Sort and filter"><span><img class="ui-icon-empty" /><label>Sort <br />and filter</label></span></button>
<button class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-large-button" id="ribbonButtonFindSelect" title="Find and select"><span><img class="ui-icon-empty" /><label>Find and <br />select</label></span></button>
</div>
<h3><span>Editing</span></h3>
</li>
<li id="groupSomethingElse_ribbonTabHome">
<div>
<button class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-large-button" id="ribbonButtonOne1" title="One 1"><span><img class="ui-icon-empty" /><label>One 1</label></span></button>
<button class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-large-button" id="ribbonButtonTwo2" title="Two 2"><span><img class="ui-icon-empty" /><label>Two 2</label></span></button>
<button class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-large-button" id="ribbonButtonThree3" title="Three 3"><span><img class="ui-icon-empty" /><label>Three 3</label></span></button>
</div>
<h3><span>Something else</span></h3>
</li>
</ul>
</div>
<div id="ribbonTabView">
<ul>
<li id="groupUnits_ribbonTabView">
<div class="ui-ribbon-group-content">
<ul class="ui-ribbon-element ui-ribbon-list">
<li><button class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-simple-button" id="ribbonButtonUnitsMoney" title="Currency..."><span><img class="ui-icon-empty" /><label>Currency...</label></span></button></li>
<li><button class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-simple-button" id="ribbonButtonUnitsPrecision" title="Precision..."><span><img class="ui-icon-empty" /><label>Precision...</label></span></button></li>
</ul>
</div>
<h3><span>Units</span></h3>
</li>
<li id="groupZoom_ribbonTabView">
<div>
<button class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-large-button" id="ribbonButtonZoom" title="Zoom"><span><img class="ui-icon-empty" /><label>Zoom</label></span></button>
<button class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-large-button" id="ribbonButtonZoom100" title="100%"><span><img class="ui-icon-empty" /><label>100%</label></span></button>
</div>
<h3><span>Scale</span></h3>
</li>
<li id="groupOtherViewSettings_ribbonTabView">
<div class="ui-ribbon-group-content"></div>
<h3 class="ui-ribbon-group-label"><span>Other settings</span></h3>
</li>
</ul>
</div>
<div id="ribbonTabExport">
<ul>
<li id="groupExport_ribbonTabExport">
<div>
<button class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-large-button" id="ribbonButtonExportXML" title="XML"><span><img class="ui-icon-empty" /><label>XML</label></span></button>
<button class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-large-button" id="ribbonButtonExportText" title="Text"><span><img class="ui-icon-empty" /><label>Text</label></span></button>
<button class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-large-button" id="ribbonButtonExportDB" title="Database"><span><img class="ui-icon-empty" /><label>Database</label></span></button>
</div>
<h3><span>Export</span></h3>
</li>
</ul>
</div>
<div id="ribbonTabImport">
<ul>
<li id="groupImport_ribbonTabImport">
<div>
<button class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-large-button" id="ribbonButtonImportXML" title="XML"><span><img class="ui-icon-empty" /><label>XML</label></span></button>
<button class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-large-button" id="ribbonButtonImportText" title="Text"><span><img class="ui-icon-empty" /><label>Text</label></span></button>
<button class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-large-button" id="ribbonButtonImportDB" title="Database"><span><img class="ui-icon-empty" /><label>Database</label></span></button>
</div>
<h3><span>Import</span></h3>
</li>
</ul>
</div>
<div id="ribbonTabEmpty">
<ul></ul>
</div>
</div>
4.2 Recommended transformed HTML markup
(The HTML markup structure and classes that will be used by the scripts in the enhanced version)
Normal state:
Minimized state:
[TODO: verify this markup ThemeRoller-ready]
<div id="ribbon" class="ui-ribbon ui-widget ui-widget-content ui-helper-reset">
<div class="ui-tabs ui-widget"><!-- managed by ui.tabs -->
<!-- TODO: make up a method to place tabset limiters without abs.positioning -->
<div style="display: block; visibility: visible; width: 119px; left: 105px;" id="ribbonContextData" class="ui-ribbon-tabset-contextual" title="Data">
<i class="left"/><span style="width: 107px;"><label>Data</label></span><i class="right"/>
</div>
<div style="display: block; visibility: visible; width: 85px; left: 224px;" id="ribbonContextTestTabs" class="ui-ribbon-tabset-contextual" title="Test tabs">
<i class="left"/><span style="width: 73px;"><label>Test tabs</label></span><i class="right"/>
</div>
<ul class="ui-ribbon-tabs ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-corner-top">
<li class="ui-ribbon-tab ui-corner-top ui-tabs-selected ui-state-active"><a href="#ribbonTabHome"><span><label>Home</label></span></a></li>
<li class="ui-ribbon-tab ui-corner-top ui-state-default"><a href="#ribbonTabView"><span><label>View</label></span></a></li>
<li class="ui-ribbon-tab ui-corner-top ui-ribbon-tab-contextual ui-priority-secondary ui-state-default"><a rel="ribbonContextData" href="#ribbonTabImport"><span><label>Import</label></span></a></li>
<li class="ui-ribbon-tab ui-corner-top ui-ribbon-tab-contextual ui-priority-secondary ui-state-default"><a rel="ribbonContextData" href="#ribbonTabExport"><span><label>Export</label></span></a></li>
<li class="ui-ribbon-tab ui-corner-top ui-ribbon-tab-contextual ui-priority-secondary ui-state-default"><a rel="ribbonContextTestTabs" href="#ribbonTabEmpty"><span><label>Empty tab</label></span></a></li>
</ul>
<span class="ui-ribbon-minimized-border ui-widget-content"></span><!-- span represents a bottom border in the minimized state, gets hidden in normal state -->
<div id="ribbonTabHome" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-ribbon-panel ui-state-default ui-corner-all ui-state-active">
<ul>
<li id="groupClipboard_ribbonTabHome" class="ui-ribbon-group ui-widget-content ui-corner-all">
<div class="ui-ribbon-group-content ui-corner-top">
<button title="Paste" id="ribbonButtonPaste" class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-large-button ui-widget ui-widget-content ui-helper-clearfix ui-state-default ui-corner-all"><span><img src="#" class="ui-icon"/><label>Paste</label></span></button>
<ul class="ui-ribbon-element ui-ribbon-list">
<li><button title="Cut" id="ribbonButtonCut" class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-simple-button ui-widget ui-widget-content ui-helper-clearfix ui-state-default ui-corner-all"><span><img src="#" class="ui-icon"/><label>Cut</label></span></button></li>
<li><button title="Copy" id="ribbonButtonCopy" class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-simple-button ui-widget ui-widget-content ui-helper-clearfix ui-state-default ui-corner-all"><span><img src="#" class="ui-icon"/><label>Copy</label></span></button></li>
</ul>
</div>
<h3 class="ui-ribbon-group-label ui-widget-header ui-corner-bottom"><span>Clipboard</span></h3>
</li>
<li id="groupSomething_ribbonTabHome" class="ui-ribbon-group ui-widget-content ui-corner-all">
<div class="ui-ribbon-group-content ui-corner-top">
<ul class="ui-ribbon-element ui-ribbon-list">
<li><button title="A button without icon" id="ribbonButtonWithoutIcon" class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-simple-button ui-widget ui-widget-content ui-helper-clearfix ui-state-default ui-corner-all"><span><img class="ui-icon-empty ui-icon" src="#"/><label>A button without icon</label></span></button></li>
<li><button title="A button with ui-icon" id="ribbonButtonWithIcon" class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-simple-button ui-widget ui-widget-content ui-helper-clearfix ui-state-default ui-corner-all"><span><img class="ui-icon-info ui-icon" src="#"/><label>A button with ui-icon</label></span></button></li>
</ul>
</div>
<h3 class="ui-ribbon-group-label ui-widget-header ui-corner-bottom"><span>Something</span></h3>
</li>
<li id="groupEditing_ribbonTabHome" class="ui-ribbon-group ui-widget-content ui-corner-all">
<div class="ui-ribbon-group-content ui-corner-top">
<button title="Properties" id="ribbonButtonProperties" class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-large-button ui-widget ui-widget-content ui-helper-clearfix ui-state-default ui-corner-all"><span><img src="#" class="ui-icon"/><label>Properties</label></span></button>
<ul class="ui-ribbon-element ui-ribbon-list">
<li><button title="Rename" id="ribbonButtonRename" class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-simple-button ui-widget ui-widget-content ui-helper-clearfix ui-state-default ui-corner-all"><span><img class="ui-icon-empty ui-icon" src="#"/><label>Rename</label></span></button></li>
<li><button title="Delete" id="ribbonButtonDelete" class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-simple-button ui-widget ui-widget-content ui-helper-clearfix ui-state-default ui-corner-all"><span><img class="ui-icon-empty ui-icon" src="#"/><label>Delete</label></span></button></li>
</ul>
<button title="Sort and filter" id="ribbonButtonSortFilter" class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-large-button ui-widget ui-widget-content ui-helper-clearfix ui-state-default ui-corner-all"><span><img class="ui-icon-empty ui-icon" src="#"/><label>Sort <br/>and filter</label></span></button>
<button title="Find and select" id="ribbonButtonFindSelect" class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-large-button ui-widget ui-widget-content ui-helper-clearfix ui-state-default ui-corner-all"><span><img class="ui-icon-empty ui-icon" src="#"/><label>Find and <br/>select</label></span></button>
</div>
<h3 class="ui-ribbon-group-label ui-widget-header ui-corner-bottom"><span>Editing</span></h3>
</li>
<li id="groupSomethingElse_ribbonTabHome" class="ui-ribbon-group ui-widget-content ui-corner-all">
<div class="ui-ribbon-group-content ui-corner-top">
<button title="One 1" id="ribbonButtonOne1" class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-large-button ui-widget ui-widget-content ui-helper-clearfix ui-state-default ui-corner-all"><span><img class="ui-icon-empty ui-icon" src="#"/><label>One 1</label></span></button>
<button title="Two 2" id="ribbonButtonTwo2" class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-large-button ui-widget ui-widget-content ui-helper-clearfix ui-state-default ui-corner-all"><span><img class="ui-icon-empty ui-icon" src="#"/><label>Two 2</label></span></button>
<button title="Three 3" id="ribbonButtonThree3" class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-large-button ui-widget ui-widget-content ui-helper-clearfix ui-state-default ui-corner-all"><span><img class="ui-icon-empty ui-icon" src="#"/><label>Three 3</label></span></button>
</div>
<h3 class="ui-ribbon-group-label ui-widget-header ui-corner-bottom"><span>Something else</span></h3>
</li>
</ul>
</div>
<div id="ribbonTabView" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-ribbon-panel ui-state-default ui-corner-all ui-tabs-hide">
<ul>
<li id="groupUnits_ribbonTabView" class="ui-ribbon-group ui-widget-content ui-corner-all">
<div class="ui-ribbon-group-content ui-corner-top">
<ul class="ui-ribbon-element ui-ribbon-list">
<li><button title="Currency..." id="ribbonButtonUnitsMoney" class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-simple-button ui-widget ui-widget-content ui-helper-clearfix ui-state-default ui-corner-all"><span><img class="ui-icon-empty ui-icon" src="#"/><label>Currency...</label></span></button></li>
<li><button title="Precision..." id="ribbonButtonUnitsPrecision" class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-simple-button ui-widget ui-widget-content ui-helper-clearfix ui-state-default ui-corner-all"><span><img class="ui-icon-empty ui-icon" src="#"/><label>Precision...</label></span></button></li>
</ul>
</div>
<h3 class="ui-ribbon-group-label ui-widget-header ui-corner-bottom"><span>Units</span></h3>
</li>
<li id="groupZoom_ribbonTabView" class="ui-ribbon-group ui-widget-content ui-corner-all">
<div class="ui-ribbon-group-content ui-corner-top">
<button title="Zoom" id="ribbonButtonZoom" class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-large-button ui-widget ui-widget-content ui-helper-clearfix ui-state-default ui-corner-all"><span><img class="ui-icon-empty ui-icon" src="#"/><label>Zoom</label></span></button>
<button title="100%" id="ribbonButtonZoom100" class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-large-button ui-widget ui-widget-content ui-helper-clearfix ui-state-default ui-corner-all"><span><img class="ui-icon-empty ui-icon" src="#"/><label>100%</label></span></button>
</div>
<h3 class="ui-ribbon-group-label ui-widget-header ui-corner-bottom"><span>Scale</span></h3>
</li>
<li id="groupOtherViewSettings_ribbonTabView" class="ui-ribbon-group ui-widget-content ui-corner-all">
<div class="ui-ribbon-group-content ui-corner-top"/>
<h3 class="ui-ribbon-group-label ui-widget-header ui-corner-bottom"><span>Other settings</span></h3>
</li>
</ul>
</div>
<div id="ribbonTabExport" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-ribbon-panel ui-state-default ui-corner-all ui-ribbon-panel-contextual ui-priority-secondary ui-tabs-hide">
<ul>
<li id="groupExport_ribbonTabExport" class="ui-ribbon-group ui-widget-content ui-corner-all">
<div class="ui-ribbon-group-content ui-corner-top">
<button title="XML" id="ribbonButtonExportXML" class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-large-button ui-widget ui-widget-content ui-helper-clearfix ui-state-default ui-corner-all"><span><img class="ui-icon-empty ui-icon" src="#"/><label>XML</label></span></button>
<button title="Text" id="ribbonButtonExportText" class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-large-button ui-widget ui-widget-content ui-helper-clearfix ui-state-default ui-corner-all"><span><img class="ui-icon-empty ui-icon" src="#"/><label>Text</label></span></button>
<button title="Database" id="ribbonButtonExportDB" class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-large-button ui-widget ui-widget-content ui-helper-clearfix ui-state-default ui-corner-all"><span><img class="ui-icon-empty ui-icon" src="#"/><label>Database</label></span></button>
</div>
<h3 class="ui-ribbon-group-label ui-widget-header ui-corner-bottom"><span>Export</span></h3>
</li>
</ul>
</div>
<div id="ribbonTabImport" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-ribbon-panel ui-state-default ui-corner-all ui-ribbon-panel-contextual ui-priority-secondary ui-tabs-hide">
<ul>
<li id="groupImport_ribbonTabImport" class="ui-ribbon-group ui-widget-content ui-corner-all">
<div class="ui-ribbon-group-content ui-corner-top">
<button title="XML" id="ribbonButtonImportXML" class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-large-button ui-widget ui-widget-content ui-helper-clearfix ui-state-default ui-corner-all"><span><img class="ui-icon-empty ui-icon" src="#"/><label>XML</label></span></button>
<button title="Text" id="ribbonButtonImportText" class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-large-button ui-widget ui-widget-content ui-helper-clearfix ui-state-default ui-corner-all"><span><img class="ui-icon-empty ui-icon" src="#"/><label>Text</label></span></button>
<button title="Database" id="ribbonButtonImportDB" class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-large-button ui-widget ui-widget-content ui-helper-clearfix ui-state-default ui-corner-all"><span><img class="ui-icon-empty ui-icon" src="#"/><label>Database</label></span></button>
</div>
<h3 class="ui-ribbon-group-label ui-widget-header ui-corner-bottom"><span>Import</span></h3>
</li>
</ul>
</div>
<div id="ribbonTabEmpty" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-ribbon-panel ui-state-default ui-corner-all ui-ribbon-panel-contextual ui-priority-secondary ui-tabs-hide">
<ul></ul>
</div>
</div>
</div>
Comments:
The ui-button control used above is written by me, currently supports sliding-doors background and an icon (may be set as <img src= or as background-image).
The default image for it ( data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw== )
is an empty gif, base64-encoded to embed into the markup. Inspired by IE showing 'no image' icon instead of empty space.
4.3 Accessibility recommendation
(Detailed recommendations for ARIA, HTML markup, CSS and javascript that will contribute to universal access and full section 508 accessibility for screen readers, mobile devices and any other devices)
For every active item (tab, control) an accesskey should be set. By pressing a hotkey (Alt, Ctrl etc.) all accesskeys and combinations should be displayed in special boxes near each active item. By pressing a hotkey (Alt, Ctrl etc.) and an accesskey some event (e.g. click) should be automatically triggered on the related active item.
4.4 CSS & Theme
(Description of the CSS classes to be used for all states, how custom theming and Themeroller support will work.)
Ribbon itself:
- ui-ribbon - class for base element of ribbon widget
- ui-ribbon-tabs - class for tabs list
- ui-tabs - class for a ui.tabs widget container
- ui-tabs-nav - class for tabs list (managed by ui.tabs)
- ui-tabs-selected - class for a selected tab (managed by ui.tabs)
- ui-ribbon-tab-contextual - class for a contextual tab (managed considering the tabsets)
- ui-ribbon-tabset-contextual - class for a contextual tabset limiter (visual grouping, span on top of grouped tabs)
- ui-ribbon-panel - class for a panel (a container for groups)
- ui-ribbon-panel-contextual - class for a panel within a contextual tab
- ui-ribbon-group - class for a group of controls on one tab
- ui-ribbon-group-content - class for a container for controls within a group
- ui-ribbon-minimized - base element modifier for the 'minimized' state
- ui-ribbon-minimized-border - an element that represents a 'minimized tab' (due to all the real tabs are hidden on minimize)
-
Ribbon controls:
- ui-ribbon-element - class for any ribbon element (floats all the elements to the left)
- ui-ribbon-control - class for any ribbon control
- ui-ribbon-list - class for a vertical list of small controls [TODO: make up a method for laying out a long list - more than 66px height]
- ui-button - any button control [proposed to be used as jQuery UI default button]
- ui-ribbon-large-button - for large buttons (e.g. Paste in the screenshot provided above), specifies the size, label and icon placement
- ui-ribbon-simple-button - for small buttons (e.g. Copy)
- ui-icon-empty - modifier for a ui-icon; sets the icon width to 0px [proposed for inclusion into ThemeRoller]
ThemeRoller support:
[TODO: add description for ThemeRoller support]
5 - Latest version of plugin:
(Link to the latest version in the jQuery UI trunk here)
I started a project on googlecode to have an SVN for it:
http://code.google.com/p/jquery-ui-ribbon/source/browse/#svn/trunk
It utilizes the same directory structure as the UI Framework ( http://code.google.com/p/jquery-ui/source/browse/#svn/trunk )
6 - Open issues being discussed
(Use this area to place things that we're hashing out like featuresand options we're not sure we should include, questions about how this fits into UI and relates to other widgets and utilities, known problems, whether features should be broken across multiple releases, etc.)
[TODO: consider relationships with other UI controls (e.g. button)]
On the ribbon, there are alot of specific controls that are not covered by the current UI and ThemeRoller framework but should be implemented...
Comments (20)
sompylasar said
at 4:35 am on May 28, 2009
Please, have a look at my ui.ribbon & ui.orbButton implementations.
See the demo page here: http://maninblack.info/_work/RibbonLayout/
Ribbon and orbButton both have a ui.widget design, cross-browser markup, extensible CSS styling and trigger-based events. Ribbon is built upon ui.tabs with alot of additions and fixes to it. The widgets were tested and prooved working state upon Firefox 3.0.6, Opera 9.63, IE 7, IE 8 Compatibility mode, Google Chrome 2.0.172.
Current version (not provided in the demo page) is being built upon ASP.NET server-side, so some of the decisions on controls layout are made at server-side (e.g. limitation for vertical list of simple buttons not to break the ribbon height).
Please, post your comments here or send me an email.
sompylasar said
at 4:35 am on May 28, 2009
Current version features:
+ cross-browser markup
+ wide range of CSS states for every element providing extensible look&feel
+ customizable plugin options
+ runtime tabs manipulation (show, hide, enable, disable, select, showGroup, hideGroup)
+ ribbon minimization (based on modified ui.tabs plugin)
+ alot of events notifying the ribbon state change, bind/trigger events model
+ tabs grouping aka context ribbon (in the demo page, see second tab, click first button to open context tab)
+ control group dialog callout (not shown in the demo)
+ visual design identical to MS Office 2007
Currently implemented controls:
+ large button
+ simple button
+ combo-box aka drop-down (built upon jquery.linkselect plugin, heavily modified to support text-input and trigger-based event model)
Currently in development:
+ smart layout of controls
+ controls group minimizaton on page resize
It needs a Themeroller integration, more support for runtime manipulation (API) and a complete unit-testing support. Separate ribbon controls are also needed. Localization support may also be embedded in the future versions.
List of possible controls implemented in MS Office 2007:
+ large split-button
+ simple split-button
+ horizontal toggle e.g. [Bold,Italic,Underlined] and [Left,Center,Right,Justify] in MS Office
+ context-menu (attached to simple button, large split-button, horizontal toggle etc)
+ up-down
+ gallery
+ extended hint window (hover on group dialog button in MS Office for a demo view)
sompylasar said
at 4:41 am on May 28, 2009
Also accesskey suport should be added and tab navigation improved in the future.
sompylasar said
at 5:05 am on May 28, 2009
Current features of ui.orbButton with menu:
+ cross-browser markup
+ extensive CSS to provide various states of the menu and its items
+ API to control the menu (show, hide)
+ various events with bind/trigger event model
+ additional right half menu with split-items toggling it (not shown in the demo)
Also the markup and CSS for orbButton toolbar were developed. In the future there might be a widget allowing to manipulate the toolbar buttons.
Todd Parker said
at 8:11 am on May 28, 2009
Wow, there's a lot of interest in the Ribbon plugin all of a sudden. Since this is not in our priorities right now, and we're going to need to nail down basic buttons, toolbars and menus first I'd strongly recommend that both of you get your code out in the world as standalone projects but it's great to keep them linked up here. I'd be curious to see if you would be able to get these plugins ThemeRoller-ready. The only concern I have right now is that this is such a software-specific (Office and some Windows apps) widget that I don't know how frequently it will be used in a web interface but that's why having these released as projects will be interesting to track. Maybe the two of you would want to join efforts and collaborate!
@sompylasar Your demo looks very feature-complete as almost a complete port of the Office GUI which is cool. My only comment is that your code seems to use a lot of nested tables which is something we avoid on this project.
We had another developer, Mikael Söderström, post a different take on the toolbar plugin. Here's his message I moved from the front page to here. His plugin looks promising too and the code is very clean:
You have "ribbon style toolbar" in the list. I am currently working on one, what about it? It looks like the one in Windows 7 (paint, wordpad etc).
http://jqueryribbon.codeplex.com
Demo: http://vinkr.net/ribbon
sompylasar said
at 9:13 am on May 28, 2009
I've recently seen Mikael Söderström's ribbon but was disappointed with it's inconsistensies in the most of modern browsers. Though I'd of course prefer not to use so many tables, they provide more cross-browser compatibility. The other pro is that the ribbon itself is much more like a table that a list by its structure (it should not wrap at all but should collapse group-by-group providing a drop-down panel for each collapsed group). So the markup should match.
We could join our efforts to make an ideal markup but saving the functionality and compatibility. One more thought: the ribbon is such a control that isn't likely to be indexed or used in a page with javascript disabled so there is a little profit of having strictly semantic markup.
There's much work to do with the ribbon but my goal was to point out that much work has been already done.
I'd like someone to manage the work on the ribbon to merge the two projects. But currently I don't have enough spare time to pull the current version out of ASP.NET back-end (where my ribbon is being primarily developed)...
Any thoughts on managing the merge?
sompylasar said
at 9:36 am on May 28, 2009
My thoughts on markup:
img vs background-image (buttons' and other controls' icons):
+ background allows to embed images into the page using url(data:...) => no preloading required
+ img is simpler to lay out with float BUT this may corrupt cross-browser compatibility (or may require additional non-semantic markup elements as something clear:both'ed)
table>tr>td vs ul>li (ui-ribbon-group)
+ table gives correct one-row alignment for ribbon groups
+ li gives simpler markup => that's good
+ li allows flexible group floating (but this is not required by the design)
table>tr>td vs div,h3
+ I personally like the h3 solution => table must be replaced in my implementation
sompylasar said
at 9:40 am on May 28, 2009
Sorry, the h2 solution ( http://vinkr.net/ribbon ). But the elements of group contents should be wrapped into a div. That would give the correct semantics of what the group is.
sompylasar said
at 10:16 am on May 28, 2009
As I've been thoroughly studying the ribbon for half a year, I'd like to start filling the wiki page with some sketch thoughts based on my research. Not being a part of UI team, I'm not currently involved into any higher priority projects so can spend available time on working with this one. As this is my first publishing at jqueryui wiki, any help (moderation, comments) would be appreciated. Also I'd like to start collaborating with Mikael Söderström here, on this page, to organize all our thoughts into one stream.
Todd Parker said
at 10:54 am on May 28, 2009
That sounds great. Please feel free to edit this page and use it as a place for you to collaborate. Use the Google ui-dev list to ask for input or if you have questions. I'm available if you have any design or css framework questions.
sompylasar said
at 1:52 am on Jun 5, 2009
I've done ThemeRoller'ing the ribbon. Please, have a look.
Additionally, I've tried to push the development of ui.button further 'cause that control is essential for the ribbon. What do you think about my implementation? (see my comment to Buttons article for details)
I need advice on how to implement MS Office rich styling with limited ThemeRoller abilities. How to write the stylesheets for that case? I tend to write a separate stylesheet for ui.ribbon fully restyling it from ThemeRoller to MS Office. Any other solutions?
sompylasar said
at 11:59 am on Jun 5, 2009
Added a live demo: http://maninblack.info/_proj/jquery-ui-ribbon/demos/ribbon/
Todd Parker said
at 2:06 pm on Jun 5, 2009
Nice job applying the css framework, looks good considering how visually complex and busy a ribbon widget is. I'll take a look at the buttons.
Almog Baku said
at 9:08 am on Jun 22, 2009
wow. thats look good.
Almog Baku said
at 9:11 am on Jun 22, 2009
http://maninblack.info/_work/RibbonLayout/
Carsten Klein said
at 11:41 am on Aug 12, 2009
i have a suggestion to make.
please add the following methods to the ui.ribbon api:
collapse ( tabSetName )
collapses the specified tab and brings whatever other tab was in front back to front
if no parameters are given then all of the tabs will be collapsed
expand ( tabSetName )
expands the specified tab and brings it to front
if no parameters are given then the tab that was last active will be expanded
add the following option to ui.ribbon
auto-collapse (boolean )
when set to true, the ribbon will collapse automatically whenever the mouse leaves the ribbon area
if auto-expand is not specified, then the user needs to click on any of the available tab buttons to once again expand the ribbon
auto-expand (boolean)
when set to true, the ribbon's tabSets will automatically expand whenever the user moves the mouse over any of the available tab buttons
if auto-collapse is not set, then the user must manually click on any of the tab buttons in order to once again collapse the ribbon
this will save us some additional clicks on the tabs ;)
as to ARIA, it should be quite transparent.
sompylasar said
at 10:21 am on Aug 15, 2009
Good ideas, i'll take them into account! The ribbon is a part of my job so I'm currently working on the backend to supply the markup. As soon as I return to frontend, I'll get the things done.
sompylasar said
at 10:45 am on Aug 15, 2009
Sorry, but I don't quite understand the desired behavior on methods... As I think, 'collapse' should apply to the ribbon as a whole, not to a tab.
The described behavior on 'collapse' method can be achieved by simply 'select'ing a tab that should be in front. If the whole ribbon is to be collapsed, then just 'collapse' should be called. Currently selected tab should be then remembered and displayed on expand.
The described 'expand' behavior is achieved by first 'expand'ing the whole ribbon and then (if nessesary) 'select'ing the specified tab.
Am I right?
Carsten Klein said
at 11:44 am on Aug 12, 2009
please also add drag support to the ribbon tabs, so that a user can reorganize the ribbon as to his or her likings or requirements (most used tabs to the left to minimize mouse movement etc.)
sompylasar said
at 10:23 am on Aug 15, 2009
That should not be a problem as the ribbon widget is based on ui.tabs and the new version of the widget supports sorting.
You don't have permission to comment on this page.