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-1.9.1.js

jquery.ui.core.js

jquery.ui.widget.js

infragistics.util.js

infragistics.ui.shared.js

infragistics.ui.toolbarbutton.js

Inherits

jQuery.widget

Show Details

defaultItemName

Type:: string
Default:: "button1"

Default button item.

Code Sample

//Initialize
$(".selector").igSplitButton({
    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: "circle",
        label: "circle",
        icon: "button-circle"
    }]
});
 
// Get
var items = $(".selector").igSplitButton("option", "items");
 
// Set
var items = [{
                name: "circle",
                label: "circle",
                icon: "button-circle"
            }];
$(".selector").igSplitButton("option", "items", 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

//Initialize
$(".selector").igSplitButton({
label: "split"
});

// Get
var label = $(".selector").igSplitButton("option", "label");

// Set
$(".selector").igSplitButton("option", "label", "split");
name

Type:

string

Default:

"button1"

Item name.

Code Sample

//Initialize
$(".selector").igSplitButton({
name: "split"
});

// Get
var name = $(".selector").igSplitButton("option", "name");

// Set
$(".selector").igSplitButton("option", "name", "split");

swapDefaultEnabled

Type:

bool

Default:

false

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

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

Code Sample

//Initialize
$(".selector").igSplitButton({
    click: function (evt, ui) {...}
});
 
//Delegate
$(document).delegate(".selector", "igsplitbuttonclick", function (evt, ui) {
    //return reference to igSplitButton object
    ui.owner
    //return type of the event
    evt.type
});

collapsed

Cancellable:: false

Event fired after the button is collapsed.

Code Sample

//Initialize
$(".selector").igSplitButton({
    collapsed: function (evt, ui) {...}
});
 
//Delegate
$(document).delegate(".selector", "igsplitbuttoncollapsed", function (evt, ui) {
    //return reference to igSplitButton object
    ui.owner
    //return type of the event
    evt.type
});   

collapsing

Cancellable:: true

Event fired before a button item is collapsed.

Code Sample

//Initialize
$(".selector").igSplitButton({
    collapsing: function (evt, ui) {...}
});
 
//Delegate
$(document).delegate(".selector", "igsplitbuttoncollapsing", function (evt, ui) {
    //return reference to igSplitButton object
    ui.owner
    //return type of the event
    evt.type
});

expanded

Cancellable:: false

Event fired after the button is expanded.

Code Sample

//Initialize
$(".selector").igSplitButton({
    expanded: function (evt, ui) {...}
});
 
//Delegate
$(document).delegate(".selector", "igsplitbuttonexpanded", function (evt, ui) {
    //return reference to igSplitButton object
    ui.owner
    //return type of the event
    evt.type
});

expanding

Cancellable:: true

Event fired before a button item is expanded.

Code Sample

//Initialize
$(".selector").igSplitButton({
    expanding: function (evt, ui) {...}
});
 
//Delegate
$(document).delegate(".selector", "igsplitbuttonexpanding", function (evt, ui) {
    //return reference to igSplitButton object
    ui.owner
    //return type of the event
    evt.type
});

Show Details

collapse

.igSplitButton( "collapse", e:object );
Collapse the widget.
- e
- Type:object
Code Sample

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

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

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

.igSplitButton( "expand", e:object );
Expands the widget.
- e
- Type:object
Code Sample

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

.igSplitButton( "switchToButton", button:object );
Switch to given button.
- button
- Type:object
- . The button to which we are going to switch.
Code Sample

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

.igSplitButton( "toggle", e:object );
Toggle widget state between collapsed and expanded.
- e
- Type:object
widget

.igSplitButton( "widget" );
Code Sample

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

ui-state-active
ui-splitbutton-arrow
ui-corner-left
ui-corner-right
ui-splitbutton ui-widget ui-state-default

The widget base class css.
ui-state-focus
ui-splitbutton-hover

Ignite UI Home

ui.igSplitButton

Code Sample

Dependencies

Inherits