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.

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

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

Microsoft Office、Windows、および Gmail でも使用されているパターンです。コマンド名およびオプションのアイコン、スプリッター、およびドロップダウン矢印があります。表示されるコマンドはデフォルトです。そのボタン部分をクリックすると、そのコマンドを実行します。または、ドロップダウンをクリックし表示されるその他のコマンドから選択、実行することができます。

コードビュー

JsFiddle で表示

クリップボードへコピー

                    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();

                    <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>

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

.ui-igbutton .ui-igbutton-forecolor, .button-split {
    background-image: url('../../igniteui/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('../../igniteui/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('../../igniteui/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('../../igniteui/css/themes/metro/images/igHtmlEditor/html-editor-sprite.png')!important;
    background-size: auto;
}

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

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

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

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

#text-style-button .ui-btn-normal {
    background-image: url('../../igniteui/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('../../igniteui/css/themes/metro/images/igHtmlEditor/html-editor-sprite.png')!important;
    background-position: 0 -496px;
}

#text-style-button .ui-btn-underline {
    background-image: url('../../igniteui/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('../../igniteui/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('../../igniteui/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 */
}

                    <!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2023.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/2023.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2023.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/2023.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/2023.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/2023.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/2023.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/2023.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/2023.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/2023.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/2023.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/2023.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/2023.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/2023.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/2023.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/2023.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 | サンプル

検索結果

分割ボタン - 概要

コード ビュー

コードビュー