wijribbon jQuery Widget

Create a toolbar UI with a full ribbon or a simple ribbon to save screen real estate.

Syntax

Javascript (Usage)
Javascript (Specification)

$(function () {
    var options; // Type:  wijmo.ribbon.wijribbon.options
     
    $(".selector").wijribbon(options);
});

function wijribbon() : any;

Options

	Name	Description
	compactMode	Default value: false If the compactMode option is true and ribbon is not simple,it will show compact mode.
	data	Default value: null Using this option to create customize ribbon: ribbon tabs, groups, buttons. Can define the ribbon data like this: var ribbonData = []; // format tab definition ribbonData[0] = { id: "format", text: "format", groups:[ // Actions group definition { id:"Actions", text: "Actions", css: "wijmo-wijribbon-actions", // group's buttons definition buttons:[ //big button definition: save { name: "save", tip: 'Save', text: 'Save Button', css: "wijmo-wijribbon-save", buttonType: "bigButton", action: function (e) { alert("Save"); } }, //redo and undo in one set [ { name: "undo", tip: 'Undo', css: "wijmo-wijribbon-undo", buttonType: "button" }, { name: "redo", tip: 'Redo', css: "wijmo-wijribbon-redo", buttonType: "button" } ], //preview and cleanup in one set [ { name: "preview", tip: 'Preview', css: "wijmo-wijribbon-preview" }, { name: "cleanup", tip: 'Clean up', css: "wijmo-wijribbon-cleanup" } ] ] }]; Now the supported button's type is: "button", "buttonWithText", "bigButton", "checkbox", "dropdownButton", "radio", "splitButton". User can define button's text, tooltip, class and click function; if some buttons in one group, put them in array. Some details refer the customizeribbonbydata.html and customizesimpleribbonbydata.html.

Name

Description

compactMode

Default value: false

If the compactMode option is true and ribbon is not simple,it will show compact mode.

data

Default value: null

Using this option to create customize ribbon: ribbon tabs, groups, buttons. Can define the ribbon data like this: var ribbonData = []; // format tab definition ribbonData[0] = { id: "format", text: "format", groups:[ // Actions group definition { id:"Actions", text: "Actions", css: "wijmo-wijribbon-actions", // group's buttons definition buttons:[ //big button definition: save { name: "save", tip: 'Save', text: 'Save Button', css: "wijmo-wijribbon-save", buttonType: "bigButton", action: function (e) { alert("Save"); } }, //redo and undo in one set [ { name: "undo", tip: 'Undo', css: "wijmo-wijribbon-undo", buttonType: "button" }, { name: "redo", tip: 'Redo', css: "wijmo-wijribbon-redo", buttonType: "button" } ], //preview and cleanup in one set [ { name: "preview", tip: 'Preview', css: "wijmo-wijribbon-preview" }, { name: "cleanup", tip: 'Clean up', css: "wijmo-wijribbon-cleanup" } ] ] }]; Now the supported button's type is: "button", "buttonWithText", "bigButton", "checkbox", "dropdownButton", "radio", "splitButton". User can define button's text, tooltip, class and click function; if some buttons in one group, put them in array. Some details refer the customizeribbonbydata.html and customizesimpleribbonbydata.html.

Top

Methods

	Name	Description
	destroy	Remove the functionality completely. This will return the element back to its pre-init state.
	registerButtonInformation	The method used to push the custom button to button collection.
	ribbonClick	The custom button trigger ribbon click
	setButtonChecked	Sets a ribbon button as checked or not checked.
	setButtonDisabled	The method sets the chosen button as enabled or disabled according to the command name.
	setButtonsChecked	The method sets sets the buttons as checked or not checked.
	setButtonsDisabled	The method sets the ribbon buttons as enabled or disabled according to the command name.
	setTabPageVisible	Sets a ribbon tab page as visible or not.
	widget	Returns a jQuery object containing the original element or other relevant generated element.

Top

Events

	Name	Description
	click	The wijRibbonClick event is a function that is called when the ribbon command button is clicked.

Top

Widgets

Ribbon

Reference

wijribbon jQuery Widget