OSS で利用できる機能
分割ボタン - 基本使用

このサンプルでは、分割ボタンとカラーピッカーを組み合わせて使用する方法を紹介します。
- 図形の変更
- 色の変更
- テキスト配置の変更
- テキストスタイルの変更
- フォント色の変更
- 背景色の変更
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.
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイルデバイスで画面を回転、フルサイズ表示、またはその他のデバイスにメールで送信します。
3 つの図形の形を分割ボタンで変更、またはカラーピッカーで色を変更できます。
コードビュー

JsFiddle で表示
クリップボードへコピー
HTML
<!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" />

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

    <table>
        <tr>
            <td>
                <div class="manipulator-container">
                    <div id="split-button-shape"></div><span> - 図形の変更</span><br /><br />
                    <div id="color-picker-shape"></div><span> - 色の変更</span><br /><br />
                    <div id="text-align-button"></div><span> - テキスト配置の変更</span><br /><br />
                    <div id="text-style-button"></div><span> - テキスト スタイルの変更</span><br /><br />
                    <div id="font-color-picker"></div><span> - フォント色の変更</span><br /><br />
                    <div id="background-color-picker"></div><span> - 背景色の変更</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 | サンプル

検索結果

分割ボタン - 基本使用

コードビュー

Ignite UI for jQuery | サンプル

検索結果

分割ボタン - 基本使用

コード ビュー

コードビュー
