ui.igSplitButton

ui.igSplitButton_image

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.util.jquery.js
infragistics.ui.shared.js
infragistics.ui.toolbarbutton.js

Inherits

  • 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) {...}
                });
                //Delegate
                $(document).delegate(".selector", "igsplitbuttonclick", 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) {...}
                });
                //Delegate
                $(document).delegate(".selector", "igsplitcollapsed", 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) {...}
                });
                //Delegate
                $(document).delegate(".selector", "igsplitcollapsing", 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) {...}
                });
                //Delegate
                $(document).delegate(".selector", "igsplitexpanded", 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) {...}
                });
                //Delegate
                $(document).delegate(".selector", "igsplitexpanding", function (evt, ui) {
                    // return reference to the igSplitButton
                    ui.owner
                    // return type of the event
                    evt.type
                });
                 
  • 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.

Copyright © 1996 - 2022 Infragistics, Inc. All rights reserved.