Ignite UI API Reference
ui.igColorPickerSplitButton
Code Sample
<!DOCTYPE HTML> <html> <head> <title>Color Picker Split Button Demo</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 () { $("#color-picker-split-forecolor").igColorPickerSplitButton({ items: [{ name: "textColor", label: "Font Color", icon: "ui-igbutton-forecolor" }], defaultItemName: "textColor", selectedTextColor: "red" }); $("#color-picker-split-backcolor").igColorPickerSplitButton({ items: [{ name: "backgroundColor", label: "Background Color", icon: "ui-igbutton-backcolor" }], defaultItemName: "backgroundColor", selectedTextColor: "red" }); }); </script> <style> body { margin-left: 150px; } </style> </head> <body> <div id="color-picker-split-forecolor"></div> <div id="color-picker-split-backcolor"></div> </body> </html>
Dependencies
Inherits
-
defaultColor
- Type:
- string
- Default:
- #000
Default color.
Code Sample
//Initialize $(".selector").igColorPickerSplitButton({ defaultColor: #000 }); //Get var defaultColor = $(".selector").igColorPickerSplitButton("option", "defaultColor"); //Set $(".selector").igColorPickerSplitButton("option", "defaultColor", "#000");
-
- Type:
- string
- Default:
- button1
Default button item.
-
items
- Type:
- array
- Default:
- []
- Elements Type:
- object
Button items.
Code Sample
//Initialize $(".selector").igColorPickerSplitButton({ items: [{ name: "textColor", label: "Font Color", icon: "ui-igbutton-forecolor" }] }); //Get var items = $(".selector").igColorPickerSplitButton("option", "items"); //Set var items = [{ name: "textColor", label: "Font Color", icon: "ui-igbutton-forecolor" }]; $(".selector").igColorPickerSplitButton("option", "items", items);
-
- Type:
- string
- Default:
- ui-icon-gear
Css class to represend the iconClass of the item.
-
- Type:
- string
- Default:
- button 1
Item display label.
-
- Type:
- string
- Default:
- button1
Item name.
-
- 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.
-
- Cancellable:
- false
-
- Cancellable:
- false
Event fired after the button is collapsed.
-
- Cancellable:
- true
Event fired before a button item is collapsed.
-
- Cancellable:
- false
Event fired after the button is expanded.
-
- Cancellable:
- true
Event fired before a button item is expanded.
-
collapse
- .igColorPickerSplitButton( "collapse", e:object );
Collapse the widget.
- e
- Type:object
-
destroy
- .igColorPickerSplitButton( "destroy" );
Destroys the widget.
Code Sample
$(".selector").igColorPickerSplitButton("destroy");
-
expand
- .igColorPickerSplitButton( "expand", e:object );
Expands the widget.
- e
- Type:object
-
setColor
- .igColorPickerSplitButton( "setColor", color:object );
Sets the color of the split button.
- color
- Type:object
Code Sample
$(".selector").igColorPickerSplitButton("setColor", "red");
-
- .igColorPickerSplitButton( "switchToButton", button:object );
Switch to given button.
- button
- Type:object
- . The button to which we are going to switch.
-
- .igColorPickerSplitButton( "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