Available in the OSS Version

Split Button - TypeScript

This sample demonstrates how a user can combine split button and color picker in TypeScript.

- Change shape:

- Change color:

- Change shape:

- Change color:

- Change shape:

- Change color:

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 figures with the split button, and change the color with the color picker button.

Code View

Copy to Clipboard

HTML
TypeScript

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

    <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.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>

    <style>
        #figuresArea {
            margin: 0px 0px 40px 0px;
        }

        #circle, #triangle, #rectangle, #square {
            padding: 0px 0px 0px 60px;
        }

        .manipulator-container {
            border-bottom: 1px solid black;
            padding: 0px 0px 5px 0px;
            width: 300px;
        }

        .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.2/latest/css/themes/infragistics/images/ui-icons_888888_256x240.png')!important;
            background-size: 384px 370px;
        }

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

        #color-picker-triangle .ui-igbutton .ui-igbutton-forecolor, #split-button-circle .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.2/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.2/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>
    <div id="figuresArea">
        <div class="element-container">
            <canvas id="circle"></canvas>
            <div class="manipulator-container">
                <span> - Change shape: </span><div id="split-button-circle"></div>
                <span> - Change color: </span><div id="color-picker-circle"></div>
            </div>
        </div>

        <div class="element-container">
            <canvas id="triangle"></canvas>
            <div class="manipulator-container">
                <span> - Change shape: </span><div id="split-button-triangle"></div>
                <span> - Change color: </span><div id="color-picker-triangle"></div>
            </div>
        </div>
        <div class="element-container">
            <canvas id="square"></canvas>
            <div class="manipulator-container">
                <span> - Change shape: </span><div id="split-button-square"></div>
                <span> - Change color: </span><div id="color-picker-square"></div>
            </div>
        </div>
    </div>
    <script src="/TypeScriptSamples/split-button/typescript.js"></script>
</body>
</html>

/// <reference path="/js/typings/jquery.d.ts" />
/// <reference path="/js/typings/jqueryui.d.ts" />
/// <reference path="/js/typings/igniteui.d.ts" />

$(function () {
    function drawCircle(element) {
        var elementCtx = element.getContext("2d"),
            previousFillStyle = elementCtx.fillStyle;
        elementCtx.clearRect(0, 0, element.width, element.height);
        elementCtx.beginPath();
        elementCtx.arc(60, 80, 50, 0, 2 * Math.PI);
        elementCtx.stroke();
        elementCtx.fillStyle = previousFillStyle;
        elementCtx.fill();
    }

    function drawTriangle(element) {
        var elementCtx = element.getContext("2d"),
            previousFillStyle = elementCtx.fillStyle;
        elementCtx.clearRect(0, 0, element.width, element.height);
        elementCtx.beginPath();
        elementCtx.moveTo(0, 120);
        elementCtx.lineTo(120, 120);
        elementCtx.lineTo(60, 20);
        elementCtx.closePath();
        elementCtx.stroke();
        elementCtx.fillStyle = previousFillStyle;
        elementCtx.fill();
    }

    function drawSquare(element) {
        var elementCtx = element.getContext("2d"),
            previousFillStyle = elementCtx.fillStyle;
        elementCtx.clearRect(0, 0, element.width, element.height);
        elementCtx.beginPath();
        elementCtx.rect(10, 30, 100, 100);
        elementCtx.stroke();
        elementCtx.fillStyle = previousFillStyle;
        elementCtx.fill();
    }

    function firstTimeInit() {

        var circle, triangle, square, circleCtx, triangleCtx, squareCtx;

        circle = document.getElementById("circle");
        circle.getContext("2d").fillStyle = "#205867"
                drawCircle(circle);

        triangle = document.getElementById("triangle");
        triangle.getContext("2d").fillStyle = "#5F497A";
        drawTriangle(triangle);

        square = document.getElementById("square");
        square.getContext("2d").fillStyle = "#E36C09"
                drawSquare(square);
    }
    function changeShape(id, newShape) {
        var elementToChange = document.getElementById(id);
        if (newShape === "circle") {
            drawCircle(elementToChange);
        } else if (newShape === "triangle") {
            drawTriangle(elementToChange);
        } else if (newShape === "square") {
            drawSquare(elementToChange);
        }
    };

    $("#split-button-circle").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, ui) {
            var elementToChangeId = (<HTMLElement>event.target).id.split("-")[2];
            
            var shape = (<HTMLElement>(<Node>event.target).firstChild).id.split("_")[1];
            
            changeShape(elementToChangeId, shape);
        }
    });

    $("#split-button-triangle").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: "triangle",
        swapDefaultEnabled: true,
        click: function (event, ui) {
            var elementToChangeId = (<HTMLElement>event.target).id.split("_")[0].split("-")[2];           
            var shape = (<HTMLElement>(<Node>event.target).firstChild).id.split("_")[1];          
            changeShape(elementToChangeId, shape);
        }
    });

    $("#split-button-square").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: "square",
        swapDefaultEnabled: true,
        click: function (event, ui) {
            var elementToChangeId = (<HTMLElement>event.target).id.split("_")[0].split("-")[2];            
            var shape = (<HTMLElement>(<Node>event.target).firstChild).id.split("_")[1];           
            changeShape(elementToChangeId, shape);
        }
    });

    $("#color-picker-circle").igColorPickerSplitButton({
        items: [{
            name: "circlecolor",
            label: "Circle Color",
            iconClass: "circle ui-igbutton-forecolor circle"
        }],
        defaultItemName: "circlecolor",
        defaultColor: "#205867",
        colorSelected: function (event, color) {
            var circleCanvas = <HTMLCanvasElement>document.getElementById("circle");
            var circleCtx = circleCanvas.getContext("2d");

            circleCtx.fillStyle = color.value;
            circleCtx.fill();
            circleCtx.strokeStyle = "#000";
        }
    });

    $("#color-picker-triangle").igColorPickerSplitButton({
        items: [{
            name: "trianglecolor",
            label: "Triangle Color",
            iconClass: "ui-igbutton-forecolor"
        }],
        defaultItemName: "trianglecolor",
        defaultColor: "#5F497A",
        colorSelected: function (event, color) {                           
            var triangleCanvas = <HTMLCanvasElement>document.getElementById("triangle");
            var triangleCtx = triangleCanvas.getContext("2d");
                      
            triangleCtx.fillStyle = color.value;
            triangleCtx.fill();
            triangleCtx.strokeStyle = "#000";
        }
    });

    $("#color-picker-square").igColorPickerSplitButton({
        items: [{
            name: "squarecolor",
            label: "Square Color",
            iconClass: "ui-igbutton-forecolor"
        }],
        defaultItemName: "squarecolor",
        defaultColor: "#E36C09",
        colorSelected: function (event, color) {               
            var triangleCanvas = <HTMLCanvasElement>document.getElementById("square");
            var squareCtx = triangleCanvas.getContext("2d");
        
            squareCtx.fillStyle = color.value;
            squareCtx.fill();
            squareCtx.strokeStyle = "#000";
        }
    });

    firstTimeInit();
});

Ignite UI for jQuery | Samples

Search Results

Split Button - TypeScript

Code View