Ribbon JS

HTML5, CSS3 and JavaScript Ribbon Bar. State-of-the-art UI. By Martin Ivanov.

Ribbon JS Tools

For better understanding of ribbon's API, use your browser's developer tools. To test a method, just copy the example code into your browser's console and hit enter.

Tools


Use this document as a complete copy/paste reference for a ribbon configuration.

File Tab Menu

Here you can define commands for the optional file tab menu of the ribbon.

// {Object} [optional] file tab menu commands fileTabMenu: [ { hint: "Click to see the file menu", // {String} [optional] hint for the header item name: "file", // {String} [required] menu name label: "File" // {String} [required] header item label },{ name: "save", // {String} [required] menu item command name label: "Save", // {String} [required] menu item command label icon: "save.png"// {String} [optional] menu item command icon },{ name: "save-as", label: "Save As", icon: "save-as.png" },{ name: "Open", label: "Open", icon: "open.png" },{ name: "close", label: "Close", icon: "close.png" },{ name: "print", label: "Print", icon: "print.png" } ]
Quick Launch Toolbar

Use this array to define commands for the optional quick launch toolbar.

// {Object} [optional] quick launch toolbar commands quickLaunchToolbar: [ { name: "save", // {String} [required] command name hint: "Save (Ctrl+S)", // {String} [optional] command hint //label: "Save", // {String} [optional] command label icon: "save.png" // {String} [required] command icon, },{ name: "cut", hint: "Cut (Ctrl+X)", icon: "cut.png" },{ name: "copy", hint: "Copy (Ctrl+C)", icon: "copy.png" },{ name: "paste", hint: "Paste (Paste+V)", icon: "paste.png" },{ name: "undo", hint: "Undo (Ctl+Z)", icon: "undo.png", label: "Undo" },{ name: "redo", hint: "Redo (Ctl+Y)", icon: "redo.png", label: "Redo" },{ name: "repeat", hint: "Repeat", icon: "repeat.png", label: "Repeat" } ]
Buttons

Create strip of buttons. The tool supports two buttons sizes - "small" (16 x 16 pixels icon) and "large" (32 x 32 pixels icon) and size is defined in tool's size property.

{ type: "buttons", // {String} [required] tool identifier size: "small", // {String} [required] "small" | "large" items: "break", // {String} [optional] "break" | "floated" items flow. default: "floated" commands: [{ name: "cut", // required hint: "Cut (Ctrl+X)", // optional label: "Cut", // optional icon: "cut.png", // required props: { // {Object} [optional] custom tool properties a: 1, b: "cde" } },{ name: "copy", hint: "Copy (Ctrl+C)", label: "Copy", icon: "copy.png" },{ name: "format-painter", hint: "Format painter", label: "Format Painter", icon: "format-painter.png" }] }
Toggle Buttons

Create toggle buttons (as the "bold", "italic", etc in MS Office). The tool supports two buttons sizes - "small" (16 x 16 pixels icon) and "large" (32 x 32 pixels icon) and size is defined in tool's size property.

{ type: "toggle-buttons", // {String} [required] tool identifier size: "small", // {String} [required] "small" | "large" commands: [{ name: "bold", // {String} [required] command identifier hint: "Bold (Ctrl+B)", // [optional] button tooltip //label: "Bold", // {String} [optional] button label icon: "bold.png", // {String} [optional] button icon props: { // {Object} [optional] custom tool properties b: [1, 2, 3], c: { ac: 1, bc: 2 } } },{ name: "italic", hint: "Italic (Ctrl+I)", icon: "italic.png", props: { // {Object} [optional] custom tab properties d: "xyz", e: 123 } },{ name: "underline", hint: "Underline (Ctrl+U)", icon: "underline.png" },{ name: "strikethrough", hint: "Strikethrough", icon: "strikethrough.png" }] }
Exclusive Buttons

Create a strip of mutually exclusive buttons (as the justify commands in MS Office). The tool supports two buttons sizes - "small" (16 x 16 pixels icon) and "large" (32 x 32 pixels icon) and size is defined in tool's size property.

{ type: "exclusive-buttons", // {String} [required] tool identifier size: "small", // {String} "small" | "large" button size commands: [{ // {Array} [required] tool commands name: "align-left", // {String} [required] command identifier hint: "Align Left", // {String} [optional] button hint //label: "Align left", // {String} [optional] button label icon: "align-left.png", // {String} [optional] button icon props: { // {Object} [optional] custom tab properties prop1: 123, prop2: "321" } },{ name: "align-center", icon: "align-center.png", props: { // {Object} [optional] custom tab properties someState: true, anotherState: false } },{ name: "align-right", icon: "align-right.png" },{ name: "align-justify", icon: "align-justify.png" }] }
Split Button

Create a split button tool. The tool supports two buttons sizes - "small" (16 x 16 pixels icon) and "large" (32 x 32 pixels icon) and size is defined in tool's size property. The first item in the commands array is the default selected.

{ type: "split-button", // {String} [required] tool identifier size: "large", // {String} [required] "small" | "large" commands: [{ hint: "Paste Options", // {String} [optional] hint for the default item name: "paste", // {String} [required] command identifier label: "Paste", // {String} [required] item label icon: "paste.png", // {String} [optional] item icon props: { // {Object} [optional] custom tool properties a: 1, b: 2 } },{ name: "paste-special", label: "Paste Special", icon: "paste-special.png", props: { // {Object} [optional] custom tool properties c: 3, d: 4 } },{ name: "paste-from-word", label: "Paste Word", icon: "paste-from-word.png", props: { // {Object} [optional] custom tab properties c: [1, 2, 3], d: { a: [] } } },{ name: "paste-as-hyperlink", label: "Paste Link", icon: "paste-as-hyperlink.png" },{ name: "paste-plain", label: "Paste Plain", icon: "paste-plain.png" }] }
Tab Grouping

The API of Ribbon JS provides two useful methods for creating contextual tabs programmatically - highlightTabsGroup and unhighlightTabsGroup.

window.ribbon1.highlightTabsGroup( ["tab-insert", "tab-page-layout"], "font-tools", "Font Tools", "#f00" );
window.ribbon1.unhighlightTabsGroup("font-tools");
Dropdown

Create a dropdown. The first item in the items array will is selected by default. If the value of the name property is "font-family", Ribbon JS will try to style the items in the dropdown with the fonts, defined in the value property of each item. If the value of the name property is "font-size", Ribbon JS will try to set font size to the items in the dropdown with the sizes, defined in the value property of each item.

{ type: "dropdown", // {String} [required] tool identifier name: "font-family", // {String} [required] command identifier width: 120, // {String|Number} [optional] width of the dropdown in pixels. default: 43 pixels items: [{ // {Array} [required]. the first item will be set as default value: "Arial, Helvetica, Sans-serif", // {String} [required] item value label: "Arial", // {String} [required] item label props: { // {Object} [optional] custom tool properties fontFamily: ["Arial", "Helvetica", "Verdana", "Sans-serif"] } },{ label: "Comic Sans MS", value: "Comic Sans MS" },{ label: "Consolas", value: "Consolas", props: { // {Object} [optional] custom tab properties fontFamily: ["Consolas", "Courier"], isMonospaceFont: true } },{ label: "Cambria", value: "Cambria" },{ label: "Arial Black", value: "Arial Black" },{ label: "Courier", value: "Courier" },{ label: "Courier New", value: "Courier New" },{ label: "Garamond", value: "Garamond" },{ label: "Georgia", value: "Georgia" },{ label: "Segoe UI", value: "Segoe UI" },{ label: "Segoe UI, Light", value: "Segoe UI, Light" },{ label: "Segoe UI Semibold", value: "Segoe UI Semibold" },{ label: "Segoe UI Symbol", value: "Segoe UI Symbol" },{ label: "Sans-Serif", value: "Sans-Serif" },{ label: "Serif", value: "Serif" },{ label: "Times New Roman", value: "Times New Roman" },{ label: "Trebuchet MS", value: "Trebuchet MS" },{ label: "Verdana", value: "Verdana" },{ label: "Arial Rounded MT", value: "Arial Rounded MT" },{ label: "Nueva Roman", value: "Nueva Roman" },{ label: "Helvetica", value: "Helvetica" },{ label: "Calibri", value: "Calibri" },{ label: "Lucida Console", value: "Lucida Console" },{ label: "Calibri Light", value: "Calibri Light" },{ label: "Century Gothic", value: "Century Gothic" },{ label: "Impact", value: "Impact" }] }
Toggle Dropdown

Create a dropdown with checkboxes.

{ type: "toggle-dropdown", // {String} [required] tool type label: "Toggle Dropdown", // {String} [optional] button label icon: "checkbox.png", // {String} [optional] button icon hint: "Toggle dropdown", // {String} [optional] button tooltip name: "toggle-dropdown-1", // {String} [required] tool identifier items: [{ name: "menu-bar", // {String} [required] command identifier label: "Menu Bar", // {String} [required] item label selected: true, // {Boolean} [optional] default: false value: "menu-bar-value", // {String} [optional] item value, default: null props: { // {Object} [optional] custom tool properties a: "b", c: "d" } },{ name: "bookmarks-toolbar", label: "Bookmarks Toolbar", value: "bookmarks-toolbar-value" },{ name: "web-developer-toolbar", label: "Web Developer Toolbar", selected: true, value: "web-developer-toolbar-value", props: { // {Object} [optional] custom tab properties e: "f", g: "h" } }] }
Exclusive Dropdown

Create a dropdown with radio buttons.

{ type: "exclusive-dropdown", // {String} [required] tool identifier label: "Exclusive Menu", // {String} [optional] button label icon: "radio.png", // {String} [optional] button icon name: "exclusive-menu-1", // {String} [required] command identifier hint: "Exclusive menu", // {String} [optional] button tooltip defaultSelectedItem: 1, // {Number} [required] default selected item, default: 0 items: [{ label: "No Style", // {String} [required] item label value: "no-style", props: { // {Object} [optional] custom tab properties someValue: 1, anotherValue: 45, someObject: {} } },{ label: "Basic Page Style", value: "basic-page-style" },{ label: "What?", value: "what", props: { // {Object} [optional] custom tab properties what: "what?" } }] }
Custom Dropdown

Create a custom dropdown with user-defined data, rendered from a client-side template.


The data is the model which should be passed to the view, defined in the templateId. The templateId is the ID of a <script type="html/x-acidjs-ribbon-template" id="my_custom_dropdown_template" /< added to the page and containing the html template, which will be used to render the data.

The client-side template, used to render the html for the "my-custom-dropdown-with-guitars" dropdown in the demos.

Menu

Create a menu. The tool supports two buttons sizes - "small" (16 x 16 pixels icon) and "large" (32 x 32 pixels icon) and size is defined in tool's size property.

{ type: "menu", // {String} [required] tool identifier size: "small", // {String} [required] header icon size "small" | "large" commands: [{ // [required] the first command will be set in the header of the menu name: "change-case", // {String} [required] command identifier hint: "Change case", // {String} [optional] item tooltip icon: "change-case.png", // {String} [required for the first item] menu icon props: { // {Object} [optional] custom tool properties c: [1, 2, 3], d: { a: [] } } },{ name: "sentence-case", label: "Sentence case", props: { // {Object} [optional] custom tab properties c: [4, 5, 6], d: { a: {} } } },{ name: "lower-case", label: "lowercase" },{ name: "uppercase", label: "UPPERCASE" },{ name: "capitalize-each-word", label: "Capitalize Each Word" },{ name: "toggle-case", label: "tOGGLE cASE" }] }
Color Picker

Create a color picker. The tool supports two buttons sizes - "small" (16 x 16 pixels icon) and "large" (32 x 32 pixels icon) and size is defined in tool's size property. The first color value in the colors array will be preselected.

{ type: "color-picker", // {String} [required] tool identifier name: "font-color", // {String} [required] command identifier hint: "Set font color", // {String} [optional] button tooltip icon: "font-color.png", // {String} [required] button icon label: "Font Color", // {String} [optional] button labe; dropdownWidth: 96, // [optional] width in pixels, default: 160 pixels props: { // {Object} [optional] custom tool properties 1: 2, 3: 4, 5: [] }, colors: [ // [required] The first color in the array is the default selected one "#000000", "#1f497d", "#4f81bd", "#c0504d", "#9bbb59", "#8064a2", "#c6d9f0", "#dbe5f1", "#f2dcdb", "#ebf1dd", "#ebf1dd", "#001e4e", "#004d60", "#004a00", "#15992a", "#e56c19", "#b81b1b", "#1b58b8", "#569ce3", "#00aaaa" ] }
Checkbox

Create a checkbox.

{ type: "checkbox", // {String} [required] tool identifier label: "Checkbox 1", // {String} [required] tool label name: "checkbox-1", // {String} [required] tool name hint: "Hint for Checkbox 1", // {String} [optional] tool hint value: "checkbox-1-value", // {String} [optional] tool value checked: true, // {Boolean} [optional] checked state of the tool props: { // {Object} [optional] custom tool properties someNumber: 345, someString: "this is a string" } }
Radios

Create a group of radio buttons.

{ type: "radios", // {String} [required] tool type defaultSelectedItem: 1, // {Number} [optional] default selected item. default: 0 name: "radio-button-group-1", // {String} [required] radio button group name items: [{ label: "Radio 1", // {String} [optional] button label value: "value for radio 1", // {String} [optional] tool value hint: "Hint for radio 1", // {optional} [optional] tool hint props: { // {Object} [optional] custom tool properties 1: 2, 3: 4, a: "b" } },{ label: "Radio 2", value: "value for radio 2", hint: "Hint for radio 2", props: { // {Object} [optional] custom tool properties c: [1, 2, 3], 3: { someArray: ["a", "b", "c"] }, d: "e" } },{ label: "Radio 3", value: "value for radio 3", hint: "Hint for radio 3" }] }
Separator

Add a separator between tools.

{ type: "separator" }
Break

Add break between tools. The tool after the break will be rendered on a new line.

{ type: "break" }
User-defined Tools

Create a user-defined tool, rendered by a client-side template, populated with custom data object.


The data is the model which should be passed to the view, defined in the templateId. The templateId is the ID of a <script type="html/x-acidjs-ribbon-template" id="styles_custom_tool_template" /< added to the page and containing the html template, which will be used to render the data.

The client-side template, used to render the html for the "my-custom-styles-command" tool in the demos.



Use this document as a complete copy/paste reference for a ribbon configuration.

Continue to the API section or go back to the docs home.