OSS で利用できる機能

分割ボタン - TypeScript との連携

このサンプルでは、TypeScript で分割ボタンとカラーピッカー組み合わせて使用する方法を紹介します。

- 図形の変更:

- 色の変更:

- 図形の変更:

- 色の変更:

- 図形の変更:

- 色の変更:

このサンプルは、より大きい画面サイズのためにデザインされました。

モバイルデバイスで画面を回転、フルサイズ表示、またはその他のデバイスにメールで送信します。

図形の形を分割ボタンで変更したり、カラーピッカーボタンで色を変更したりできます。

コードビュー

クリップボードへコピー

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> - 図形の変更: </span><div id="split-button-circle"></div>
                <span> - 色の変更: </span><div id="color-picker-circle"></div>
            </div>
        </div>

        <div class="element-container">
            <canvas id="triangle"></canvas>
            <div class="manipulator-container">
                <span> - 図形の変更: </span><div id="split-button-triangle"></div>
                <span> - 色の変更: </span><div id="color-picker-triangle"></div>
            </div>
        </div>
        <div class="element-container">
            <canvas id="square"></canvas>
            <div class="manipulator-container">
                <span> - 図形の変更: </span><div id="split-button-square"></div>
                <span> - 色の変更: </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 | サンプル

検索結果

分割ボタン - TypeScript との連携

コードビュー

Ignite UI for jQuery | サンプル

検索結果

分割ボタン - TypeScript との連携

コード ビュー

コードビュー