Ignite UI API Reference

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">
                $("#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

Inherits

  • 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 represend 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
            });

  • 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);

  • 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

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

#