Available in the OSS Version
Split Button - Basic Use

This sample demonstrates how a user can combine the split button and the color picker.
- Change shape
- Change color
- Change text alignment
- Change text style
- Change font color
- Change background color
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
You can change the shape of the three figures with the split button, or change their color with the colorpickersplitbutton.
Code View

Show In JsFiddle
Copy to Clipboard
HTML
                    <!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" />

    <!-- Used to style the API Viewer and Explorer UI -->
    <link href="/css/apiviewer.css" rel="stylesheet" type="text/css" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>
    <!-- Used to add markup and provide logging
        functionality for the API Explorer and API Viewer UI -->
    <script src="/js/apiviewer.js"></script>

    <style>
        .ui-button {
            width: 18px;
            height: 18px;
            padding: 3px;
        }

        .ui-igbutton .ui-igbutton-forecolor, .button-split {
            background-image: url('http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/images/ui-icons_888888_256x240.png')!important;
            background-size: 384px 370px;
        }

        #color-picker-shape .ui-igbutton .ui-igbutton-forecolor, .button-circle.ui-icon {
            background-position: -123px -230px;
            background-image: url('http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/images/ui-icons_888888_256x240.png')!important;        }

        #font-color-picker .ui-igbutton .ui-igbutton-forecolor {
            background-position: 0 -448px;
            background-image: url('http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/metro/images/igHtmlEditor/html-editor-sprite.png')!important;
            background-size: auto;
        }

        #background-color-picker .ui-igbutton .ui-igbutton-backcolor {
            background-position: 0 -464px;
            background-image: url('http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/metro/images/igHtmlEditor/html-editor-sprite.png')!important;
            background-size: auto;
        }

        #text-align-button .ui-btn-justifyleft {
            background-image: url('http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/metro/images/igHtmlEditor/html-editor-sprite.png')!important;
            background-position: 0 -384px;
        }

        #text-align-button .ui-btn-justifycenter {
            background-image: url('http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/metro/images/igHtmlEditor/html-editor-sprite.png')!important;
            background-position: 0 -400px;
        }

        #text-align-button .ui-btn-justifyright {
            background-image: url('http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/metro/images/igHtmlEditor/html-editor-sprite.png')!important;
            background-position: 0 -416px;
        }

        #text-align-button .ui-btn-justifyfull {
            background-image: url('http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/metro/images/igHtmlEditor/html-editor-sprite.png')!important;
            background-position: 0 -432px;
        }

        #text-style-button .ui-btn-normal {
            background-image: url('http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/metro/images/igHtmlEditor/html-editor-sprite.png')!important;
            background-position: 0 -528px;
        }

        #text-style-button .ui-btn-bold {
            background-image: url('css/themes/metro/images/igHtmlEditor/html-editor-sprite.png') !important;
            background-position: 0 -480px;
        }

        #text-style-button .ui-btn-italic {
            background-image: url('http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/metro/images/igHtmlEditor/html-editor-sprite.png')!important;
            background-position: 0 -496px;
        }

        #text-style-button .ui-btn-underline {
            background-image: url('http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/metro/images/igHtmlEditor/html-editor-sprite.png')!important;
            background-position: 0 -512px;
        }

        #color-picker-triangle .ui-igbutton .ui-igbutton-forecolor,
        #split-button-shape .button-triangle,
        #split-button-triangle .button-triangle,
        #split-button-square .button-triangle.ui-icon {
            background-position: -98px -8px;
            background-image: url('http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/images/igGrid/filter-icons-333333.png')!important;
            background-size: 606px 32px;
        }

        #color-picker-square .ui-igbutton .ui-igbutton-forecolor, .button-square.ui-icon {
            background-position: -148px -254px;
            background-image: url('http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/images/ui-icons_888888_256x240.png')!important;
        }

        .ui-splitbutton .ui-igtoolbarbutton.ui-button {
            margin: 0;
            border: none !important; /* Needed to prevent various jquery ui interaction state scenarios */
        }
    </style>
</head>
<body>

    <table>
        <tr>
            <td>
                <div class="manipulator-container">
                    <div id="split-button-shape"></div><span> - Change shape</span><br /><br />
                    <div id="color-picker-shape"></div><span> - Change color</span><br /><br />
                    <div id="text-align-button"></div><span> - Change text alignment</span><br /><br />
                    <div id="text-style-button"></div><span> - Change text style</span><br /><br />
                    <div id="font-color-picker"></div><span> - Change font color</span><br /><br />
                    <div id="background-color-picker"></div><span> - Change background color</span><br /><br />
                </div>
            </td>
            <td>
                <canvas id="shape-renderer"></canvas>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div class="text-container">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
            </td>
        </tr>
    </table>

    <script>
        $(function () {
            var DEFAULT_COLOR = "#205867",
                canvas = document.getElementById("shape-renderer"),
                context = canvas.getContext("2d");

            $("#split-button-shape").igSplitButton({
                items: [{
                    name: "circle",
                    label: "circle",
                    iconClass: "button-split button-circle"
                }, {
                    name: "triangle",
                    label: "triangle",
                    iconClass: "button-triangle"
                },
                {
                    name: "square",
                    label: "square",
                    iconClass: "button-split button-square"
                }],
                defaultItemName: "circle",
                swapDefaultEnabled: true,
                click: function (event) {
                    var shapeType = event.target.firstChild.id.split("_")[1];
                    changeShape(shapeType);
                }
            });

            function changeShape(shapeType) {
                switch (shapeType) {
                    case "circle":
                        drawCircle();
                        break;
                    case "triangle":
                        drawTriangle();
                        break;
                    case "square":
                        drawSquare();
                        break;
                }
            }

            function drawCircle() {
                var previousFillStyle = context.fillStyle;

                context.clearRect(0, 0, canvas.width, canvas.height);
                context.beginPath();
                context.arc(90, 78, 70, 0, 2 * Math.PI);
                context.stroke();
                context.fillStyle = previousFillStyle;
                context.fill();
            }

            function drawTriangle() {
                var previousFillStyle = context.fillStyle;

                context.clearRect(0, 0, canvas.width, canvas.height);
                context.beginPath();
                context.moveTo(0, 120);
                context.lineTo(120, 120);
                context.lineTo(60, 20);
                context.closePath();
                context.stroke();
                context.fillStyle = previousFillStyle;
                context.fill();
            }

            function drawSquare() {
                var previousFillStyle = context.fillStyle;

                context.clearRect(0, 0, canvas.width, canvas.height);
                context.beginPath();
                context.rect(10, 30, 120, 120);
                context.stroke();
                context.fillStyle = previousFillStyle;
                context.fill();
            }

            $("#color-picker-shape").igColorPickerSplitButton({
                items: [{
                    name: "shape-color",
                    label: "Shape color",
                    iconClass: "ui-igbutton-forecolor circle"
                }],
                defaultItemName: "shape-color",
                defaultColor: DEFAULT_COLOR,
                colorSelected: function (event, color) {
                    context.clearRect(0, 0, canvas.width, canvas.height);
                    context.fillStyle = color.value;
                    context.fill();
                    context.strokeStyle = "#000";
                }
            });

            $("#font-color-picker").igColorPickerSplitButton({
                items: [{
                    name: "shape-color",
                    label: "Shape color",
                    iconClass: "ui-igbutton-forecolor"
                }],
                defaultItemName: "shape-color",
                defaultColor: DEFAULT_COLOR,
                colorSelected: function (event, color) {
                    $(".text-container").css("color", color.value);
                }
            });

            $("#text-align-button").igSplitButton({
                items: [{
                    name: "align-left",
                    label: "left",
                    iconClass: "ui-btn-justifyleft"

                }, {
                    name: "align-center",
                    label: "center",
                    iconClass: "ui-btn-justifycenter"
                },
                {
                    name: "align-right",
                    label: "right",
                    iconClass: "ui-btn-justifyright"
                },
                {
                    name: "align-full",
                    label: "full",
                    iconClass: "ui-btn-justifyfull"
                }],
                defaultItemName: "align-left",
                swapDefaultEnabled: true,
                click: function () {
                    $(".text-container").attr("align", $("#text-align-button > div:first-child").attr("title"));
                }
            });

            $("#text-style-button").igSplitButton({
                items: [{
                    name: "stlye-normal",
                    label: "normal",
                    iconClass: "ui-btn-normal"

                }, {
                    name: "stlye-bold",
                    label: "bold",
                    iconClass: "ui-btn-bold"

                }, {
                    name: "style-italic",
                    label: "italic",
                    iconClass: "ui-btn-italic"
                },
                {
                    name: "style-underline",
                    label: "underline",
                    iconClass: "ui-btn-underline"
                }],
                defaultItemName: "stlye-normal",
                swapDefaultEnabled: true,
                click: function () {
                    changeTextStyle($("#text-style-button > div:first-child").attr("title"));
                }
            });

            function changeTextStyle(value) {
                var $element = $(".text-container");

                $element.css({
                    "font-style": "",
                    "font-weight": "",
                    "text-decoration": ""
                });

                switch (value) {
                    case "normal":
                        $element.css("font-style", "normal");
                        break;
                    case "bold":
                        $element.css("font-weight", "bold");
                        break;
                    case "italic":
                        $element.css("font-style", "italic");
                        break;
                    case "underline":
                        $element.css("text-decoration", "underline");
                        break;
                    default:
                }
            }

            $("#background-color-picker").igColorPickerSplitButton({
                items: [{
                    name: "shape-color",
                    label: "Shape color",
                    iconClass: "ui-igbutton-backcolor"
                }],
                defaultItemName: "shape-color",
                defaultColor: DEFAULT_COLOR,
                colorSelected: function (event, color) {
                    $(".text-container").css("background-color", color.value);
                }
            });

            function intialize() {
                context.fillStyle = DEFAULT_COLOR;
                drawCircle();

                $(".text-container").css("color", DEFAULT_COLOR);
            }

            intialize();
        });
    </script>

</body>
</html>
Ignite UI for jQuery | Samples

Search Results

Split Button - Basic Use

Code View
