jQuery ToolBar API

Name Type Default

disabled Boolean false

Enables or disables the jqxToolBar and all its tools.

Code examples

Set the disabled property.

$('#jqxToolBar').jqxToolBar({ disabled: false });

Get the disabled property.

var disabled = $('#jqxToolBar').jqxToolBar('disabled');

Try it: disabled is set to true

height Number/String 35

Sets or gets the jqxToolBar's height.

Code examples

Set the height property.

$('#jqxToolBar').jqxToolBar({ height: '50px' });

Get the height property.

var height = $('#jqxToolBar').jqxToolBar('height');

Try it: height is set to 50

initTools function null

A callback function where settings can be made to the tools specified in the tools property. The initTools callback function is called twice for each tool. On the first call, the settings are applied to the tool as it appears in the toolbar. On the second call, the settings are applied to the tool when it is minimized. This allows the tool to appear differently in both cases if different settings are applied.

If you wish to disable the minimization of a tool, return { minimizable: false } in initTools. If you wish the tool to be minimizable but not to appear in the minimize pop-up menu, return { menuTool: false }. In these cases, there will only be one call of initTools for this tool.

initTools is passed four parameters:

type - the type of the tool, as specified in tools.
index
tool - a jQuery object representing the tool.
menuToolIninitialization - a boolean value, specifying whether initTools is called for the toolbar tool (false) or the pop-up menu tool (true).

Code example

Set the initTools property.

$("#jqxToolBar").jqxToolBar({ width: "100%", height: 35, tools: 'button | dropdownlist combobox | input',
    initTools: function (type, index, tool, menuToolIninitialization) {
        switch (index) {
            case 0:
                tool.text("Button");
                break;
            case 1:
                tool.jqxDropDownList({ width: 130, source: ["Affogato", "Breve", "Café Crema"], selectedIndex: 1 });
                break;
            case 2:
                tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
                break;
            case 3:
                tool.jqxInput({ width: 200, placeHolder: "Type here..." });
                break;
        }
    }
});

Get the initTools property.

var displayFormat = $('#jqxToolBar').jqxToolBar('initTools');

Try it: initTools is set to a custom function

minimizeWidth Number/String 200

Sets or gets the width of the minimize pop-up menu.

Code example

Set the minimizeWidth property.

$("#jqxToolBar").jqxToolBar({ minimizeWidth: 100 });

Get the minimizeWidth property.

var value = $('#jqxToolBar').jqxToolBar('minimizeWidth');

Try it: minimizeWidth is set to 250

minWidth Number/String null

Sets or gets the minimum width of the jqxToolBar.

Code examples

Set the minWidth property.

$('#jqxToolBar').jqxToolBar({ minWidth: 200 });

Get the minWidth property.

var minWidth = $('#jqxToolBar').jqxToolBar('minWidth');

Try it: minWidth is set to 300

maxWidth Number/String null

Sets or gets the maximum width of the jqxToolBar.

Code example

Set the maxWidth property.

$("#jqxToolBar").jqxToolBar({ maxWidth: 1000 });

Get the maxWidth property.

var maxWidth = $('#jqxToolBar').jqxToolBar('maxWidth');

Try it: maxWidth is set to 1000.

rtl Boolean false

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

Code example

Set the rtl property.

$('#jqxToolBar').jqxToolBar({ rtl : true });

Get the rtl property.

var rtl = $('#jqxToolBar').jqxToolBar('rtl');

Try it: rtl is set to true

tools String ''

Sets or gets the types of tools in the jqxToolBar in the order they appear. The value of tools is a string representing a list of space-separated tool types. Possible tool types are: 'button', 'toggleButton', 'dropdownlist', 'combobox', 'input' and 'custom'. Separators can be added between tools by inserting a '|'.

Code example

Set the tools property.

$("#jqxToolBar").jqxToolBar({ tools: "button button button | toggleButton | dropdownlist combobox | input" });

Get the tools property.

var tools = $('#jqxToolBar').jqxToolBar('tools');

Try it: tools is set to a custom string.

theme String ''

width Number/String null

Sets or gets the jqxToolBar's width.

Code examples

Set the width property.

$('#jqxToolBar').jqxToolBar({ width: 200 });

Get the width property.

var width = $('#jqxToolBar').jqxToolBar('width');

Try it: width is set to 700

close Event

This event is triggered when the minimize pop-up menu is closed.

Code examples

Bind to the close event by type: jqxToolBar.

$('#jqxToolBar').on('close', function(){ // type your code here. });

Try it: Bind to the close event by type: jqxToolBar.

open Event

This event is triggered when the minimize pop-up menu is opened.

Code examples

Bind to the open event by type: jqxToolBar.

$('#jqxToolBar').on('open', function(){ // type your code here. });

Try it: Bind to the open event by type: jqxToolBar.

addTool Method

Adds a tool to the jqxToolBar.

List of parameters:

Type - the new tool's type. Possible values are: 'button', 'toggleButton', 'dropdownlist', 'combobox', 'input' and 'custom'.
Position - where to insert the tool. Possible values are 'first' and 'last'.
Separator - whether to include a separator after the new tool. Possible values are true and false.
Initialization callback function - a function to be called after the new tool has been initialized. It is passed three parameters:
- type - the type of the tool.
- tool - a jQuery object representing the tool.
- menuToolIninitialization - a boolean value, specifying whether the callback is called for the toolbar tool (false) or the pop-up menu tool (true).

Parameter	Type	Description
type	String	Possible values are: 'button', 'toggleButton', 'dropdownlist', 'combobox', 'input' and 'custom'
position	String	Possible values are 'first' and 'last'
separator	Boolean
menuToolIninitialization	Function	It is passed three parameters: type - the type of the tool. tool - a jQuery object representing the tool. menuToolIninitialization - a boolean value, specifying whether the callback is called for the toolbar tool (false) or the pop-up menu tool (true).

Return Value
None

Code examples

Invoke the addTool method.

$("#jqxToolBar").jqxToolBar("addTool", "button", "last", true, function (type, tool, menuToolIninitialization) {
    var width = 100;
    if (menuToolIninitialization === true) {
        width = "100%";
    }
    tool.text("New button");
    tool.jqxButton({ width: width });
});

Try it: adds a tool

disableTool Method

Disables a tool.

List of parameters:

Index - the tool's index.
Disable - whether to disable or enable the tool. Possible values are true (disables the tool) and false (enables the tool).

Parameter	Type	Description
index	Number
disable	Boolean

Return Value
None

Code examples

Invoke the disableTool method.

$('#jqxToolBar').jqxToolBar('disableTool', 9, true);

Try it: disables a tool

destroy Method

Destroys the toolbar and all its tools.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the destroy method.

$('#jqxToolBar').jqxToolBar('destroy');

Try it: destroys the jqxToolBar

destroyTool Method

Destroys a tool.

Parameter	Type	Description
index	Number

Return Value
None

Code examples

Invoke the destroyTool method.

// @param int. The expected parameter is the tool index.

$('#jqxToolBar').jqxToolBar('destroyTool', 0);

Try it: destroys a tool

getTools Method

Returns an array of all tools in the jqxToolBar.

Each tool is represented by an object with the following fields:

type - String. Returns the type of the tool.
tool - Object. Returns a jQuery object representing the tool.
separatorAfterWidget - Boolean. Returns whether there is a separator after the tool.
minimizable - Boolean. Returns whether the tool is minimizable.
minimized - Boolean. Returns whether the tool is currently minimized.
menuTool - Object. Returns a jQuery object representing the minimized tool in the pop-up menu. If the minimized tool is disabled, returns false.
menuSeparator - Object. Returns a jQuery object representing the separator after the minimized tool in the pop-up menu. If there is no separator after the tool, returns false.

Parameter	Type	Description
None

Return Value
Array

Code examples

Invoke the getTools method.

var tools = $('#jqxToolBar').jqxToolBar('getTools');

Try it: get all tools

render Method

Renders the widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the render method.

$('#jqxToolBar').jqxToolBar('render');

Try it: renders the jqxToolBar

refresh Method

Refreshes the widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the refresh method.

$('#jqxToolBar').jqxToolBar('refresh');

Try it: refreshes the jqxToolBar

Properties

Code examples

Code examples

Code example

Code example

Code examples

Code example

Code example

Code example

Code examples

Events

Code examples

Code examples

Methods

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples