Ignite UI™ API Documentation

ui.igSplitButton

Code Sample

<!DOCTYPE HTML>
<html>
<head>
    <title>Split Button Demos</title>
     
    <!-- Infragistics Combined CSS -->
    <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
    <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
     
    <!-- jQuery Core -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <!-- jQuery UI -->
    <script src="js/jquery-ui.js" type="text/javascript"></script>
     
    <!-- Infragistics Combined Scripts -->
    <script src="js/infragistics.core.js" type="text/javascript"></script>
    <script src="js/infragistics.lob.js" type="text/javascript"></script>
 
    <script type="text/javascript">
        $(function() {
            $("#split-button-list").igSplitButton({
                items: [{
                    name: "InsertUnorderedList",
                    label: "Bullets",
                    icon: "ui-igbutton-unorderedlist"
                }, {
                    name: "InsertOrderedList",
                    label: "Numbering",
                    icon: "ui-igbutton-orderedlist"
                }],
                defaultItemName: "InsertUnorderedList"
            });
 
            $("#split-button-indent").igSplitButton({
                items: [{
                    name: "indent",
                    label: "Indent",
                    icon: "ui-igbutton-indent"
                }, {
                    name: "outindent",
                    label: "Out intent",
                    icon: "ui-igbutton-removeindent"
                }],
                defaultItemName: "indent"
            });
        }
        });
    </script>
</head>
<body>
    <div id="split-button-list"></div>
 
    <div id="split-button-indent"></div>
</body>
</html>
    

Dependencies

jquery.js

jquery.ui.core.js

jquery.ui.widget.js

infragistics.util.js

infragistics.util.jquery.js

infragistics.ui.shared.js

infragistics.ui.toolbarbutton.js

Inherits

jQuery.widget

Show Details

defaultItemName

Type:: string
Default:: "button1"

Default button item name.

Code Sample

// Initialize
$(".selector").igColorPickerSplitButton({
    defaultItemName: "SplitButton",
});
// Get
var defaultItemName = $(".selector").igSplitButton("option", "defaultItemName");
// Set
$(".selector").igSplitButton("option", "defaultItemName", "SplitButton");

items

Type:: array
Default:: []
Elements Type:: object

Button items.

Code Sample

// Initialize
$(".selector").igSplitButton({
    items: [{
        name: "textColor",
        label: "Font Color",
        iconClass: "ui-igbutton-forecolor"
    }]
});
// Get
var items = $(".selector").igSplitButton("option", "items");

iconClass

Type:

string

Default:

"ui-icon-gear"

Css class to represent the iconClass of the item.
label

Type:

string

Default:

"Button 1"

Item display label.

Code Sample

Moved to GitHub
name

Type:

string

Default:

"button1"

Item name.

Code Sample

Moved to GitHub

swapDefaultEnabled

Type:: bool
Default:: false

Specifies whether the default button will be switched when another button is selected.

Code Sample

//Initialize
$(".selector").igSplitButton({
    swapDefaultEnabled: true
});
// Get
var swapDefaultEnabled = $(".selector").igSplitButton("option", "swapDefaultEnabled");
// Set
$(".selector").igSplitButton("option", "swapDefaultEnabled", true);

For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.

Note: Calling API methods programmatically does not raise events related to their operation unless specifically stated otherwise by the corresponding API documentation; those events are only raised by their respective user interaction.

Show Details

click

Cancellable:: false

Event fired when the button is clicked.

Function takes arguments evt and ui.
Use ui.item to get a reference the igSplitButton element.

Code Sample

//Initialize
$(".selector").igSplitButton({
    click: function (evt, ui) {...}
});
//Bind after initialization
$(document).on("igsplitbuttonclick", ".selector", function (evt, ui) {
    // return reference to the igSplitButton element
    ui.item
    // return type of the event
    evt.type
});

collapsed

Cancellable:: false

Event fired after the button is collapsed.

Function takes arguments evt and ui.
Use ui.owner to get a reference the igSplitButton.

Code Sample

//Initialize
$(".selector").igSplitButton({
    collapsed: function (evt, ui) {...}
});
//Bind after initialization
$(document).on("igsplitcollapsed", ".selector", function (evt, ui) {
    // return reference to the igSplitButton
    ui.owner
    // return type of the event
    evt.type
});

collapsing

Cancellable:: true

Event fired before a button item is collapsed.

Function takes arguments evt and ui.
Use ui.owner to get a reference the igSplitButton.

Code Sample

//Initialize
$(".selector").igSplitButton({
    collapsing: function (evt, ui) {...}
});
//Bind after initialization
$(document).on("igsplitcollapsing", ".selector", function (evt, ui) {
    // return reference to the igSplitButton
    ui.owner
    // return type of the event
    evt.type
});

expanded

Cancellable:: false

Event fired after the button is expanded.

Function takes arguments evt and ui.
Use ui.owner to get a reference the igSplitButton.

Code Sample

//Initialize
$(".selector").igSplitButton({
    expanded: function (evt, ui) {...}
});
//Bind after initialization
$(document).on("igsplitexpanded", ".selector", function (evt, ui) {
    // return reference to the igSplitButton
    ui.owner
    // return type of the event
    evt.type
});

expanding

Cancellable:: true

Event fired before a button item is expanded.

Function takes arguments evt and ui.
Use ui.owner to get a reference the igSplitButton.

Code Sample

//Initialize
$(".selector").igSplitButton({
    expanding: function (evt, ui) {...}
});
//Bind after initialization
$(document).on("igsplitexpanding", ".selector", function (evt, ui) {
    // return reference to the igSplitButton
    ui.owner
    // return type of the event
    evt.type
});

Show Details

collapse

.igSplitButton( "collapse", [e:object] );

Return Type:

object

Return Type Description:

Returns reference to the curent igSplitButton.
Collapse the widget.
- e
- Type:object
- Optional
- Indicates the browser event which triggered this action (not API).
Code Sample

$(".selector").igSplitButton("collapse", evt);
destroy

.igSplitButton( "destroy" );
Destroy the widget.
Code Sample

$(".selector").igSplitButton("destroy");
expand

.igSplitButton( "expand", [e:object] );

Return Type:

object

Return Type Description:

Returns reference to the curent igSplitButton.
Expands the widget.
- e
- Type:object
- Optional
- Indicates the browser event which triggered this action (not API).
Code Sample

$(".selector").igSplitButton("expand", evt);
switchToButton

.igSplitButton( "switchToButton", button:object );
Switch to given igToolbar button.
- button
- Type:object
- . The button jQuery element.
Code Sample

$(".selector").igSplitButton("switchToButton", $element);
toggle

.igSplitButton( "toggle", e:object );

Return Type:

object

Return Type Description:

Returns reference to the curent igSplitButton.
Toggle widget state between collapsed and expanded.
- e
- Type:object
- The igSplitButton to be expanded/collapsed.
Code Sample

$(".selector").igSplitButton( "toggle", e:object );
widget

.igSplitButton( "widget" );
Code Sample

$(".selector").igSplitButton("widget");

ui-state-active

The widget base element active css.
ui-splitbutton-arrow

The widget arrow css.
ui-corner-left

The widget left div element css.
ui-corner-right

The widget right div element css.
ui-splitbutton ui-widget ui-state-default

The widget base class css.
ui-state-focus

The widget base element focus css.
ui-splitbutton-hover

The widget base element hover css.

Ignite UI for jQuery | API Reference

ui.igSplitButton

Code Sample

Dependencies

Inherits