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