製品版のみの機能

ラジアルメニュー - 概要

このサンプルでは、ボタン項目を含む igRadialMenu を定義する方法を紹介します。

オプション

ラジアルメニューの幅:	300


ラジアルメニューの高さ:	300


項目を選択した後にメニューを閉じる

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

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

igRadialMenu は、Microsoft OneNote ラジアルメニュースタイルのツールおよび機能を提供します。ドロップダウンのネストされた階層の代わりに円形のメニューを提供します。コンテキストメニューとして使用できます。igRadialMenu で関連するサブメニュー項目にドリルダウン、その後メインレベルのメニュー項目に戻る機能も提供されます。

コードビュー

JsFiddle で表示

クリップボードへコピー

                    function toggleBold() {
    $("#htmlEditor").igHtmlEditor("executeAction", "bold");
    var cbElement = document.getElementById("cbCloseOnClick");
    if (cbElement && cbElement.checked) {
        $("#radialMenu").igRadialMenu("option", "isOpen", false);
    }
}

function toggleItalic() {
    $("#htmlEditor").igHtmlEditor("executeAction", "italic");
    var cbElement = document.getElementById("cbCloseOnClick");
    if (cbElement && cbElement.checked) {
        $("#radialMenu").igRadialMenu("option", "isOpen", false);
    }
}

// create the html editor
$("#htmlEditor").igHtmlEditor({
    width: "98%",
    height: "450px"
});

$("#htmlEditor").igHtmlEditor("setContent", "ラジアル メニュー コントロールは、中央ボタンの周りに項目を表示するコンテキスト メニューです。項目を円形に配置することで項目をすばやく選択できます。各項目は中央に対して均等に配置されます。ラジアル メニューは、数値、色値、または操作を実行する項目タイプをサポートします。サブ項目もサポートします。<br/>デフォルトで、ラジアル メニューの中央ボタンのみを表示します。ユーザーが中央ボタンをクリックすると、ラジアル メニューが開き、ルート レベルのメニュー項目を表示します。ルート レベル項目が表示されたときに中央ボタンをクリックすると、ラジアル メニューが閉じます。サブ項目に移動するには、外部リングの矢印をクリックし対応するサブ項目グループを表示します。サブ項目グループが表示されたときに中央ボタンをクリックすると、以前のレベルの項目を表示します。", "html");

// create the radial menu
$("#radialMenu").igRadialMenu({
    width: "300px",
    height: "300px",
    items:
    [
        {
            name: "button1",
            header: "太字",
            iconUri: "../../images/samples/radial-menu/Bold.png",
            click: function () { toggleBold(); }
        },
        {
            name: "button2",
            header: "イタリック",
            iconUri: "../../images/samples/radial-menu/Italic.png",
            click: function () { toggleItalic(); }
        },
    ]
});

// create slider for the horizontal radial menu sizing
$("#sliderWidth").slider({
    min: 100,
    max: 500,
    value: 300,
    step: 1,
    slide: function (evt, ui) {
        $("#radialMenu").igRadialMenu("option", "width", ui.value);
        $("#labSliderWidth").text(ui.value);
    }
});

// create slider for the vertical radial menu sizing
$("#sliderHeight").slider({
    min: 100,
    max: 500,
    value: 300,
    step: 1,
    slide: function (evt, ui) {
        $("#radialMenu").igRadialMenu("option", "height", ui.value);
        $("#labSliderHeight").text(ui.value);
    }
});

                    <div>
    <!-- Target element for the igHtmlEditor -->
    <div id="htmlEditor"></div>

    <div style="position:absolute; left:300px; top:90px; z-index:1; visibility:hidden">
        <!-- Target element for the igRadialMenu -->
        <div id="radialMenu"></div>
    </div>
</div>

<fieldset>
    <legend>オプション</legend>
    <table>
        <tr>
            <td>ラジアル メニューの幅:</td>
            <td><label id="labSliderWidth">300</label></td>
        </tr>
        <tr>
            <td colspan="2"><div id="sliderWidth" style="width:100px"></div></td>
        </tr>
        <tr><td>&nbsp;</td></tr>
        <tr>
            <td>ラジアル メニューの高さ:</td>
            <td><label id="labSliderHeight">300</label></td>
        </tr>
        <tr>
            <td colspan="2"><div id="sliderHeight" style="width:100px"></div></td>
        </tr>
        <tr><td>&nbsp;</td></tr>
        <tr>
           <td colspan="2"><input type="checkbox" id="cbCloseOnClick" checked=""></input> 項目を選択した後にメニューを閉じる</td>
        </tr>
    </table>
</fieldset>

                    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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" />

    <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>
    <script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.dv.js"></script>
</head>
<body>
    <div>
        <!-- Target element for the igHtmlEditor -->
        <div id="htmlEditor"></div>

        <div style="position:absolute; left:300px; top:90px; z-index:1; visibility:hidden">
            <!-- Target element for the igRadialMenu -->
            <div id="radialMenu"></div>
        </div>
    </div>

    <fieldset>
        <legend>オプション</legend>
        <table>
            <tr>
                <td>ラジアル メニューの幅:</td>
                <td><label id="labSliderWidth">300</label></td>
            </tr>
            <tr>
                <td colspan="2"><div id="sliderWidth" style="width:100px"></div></td>
            </tr>
            <tr><td>&nbsp;</td></tr>
            <tr>
                <td>ラジアル メニューの高さ:</td>
                <td><label id="labSliderHeight">300</label></td>
            </tr>
            <tr>
                <td colspan="2"><div id="sliderHeight" style="width:100px"></div></td>
            </tr>
            <tr><td>&nbsp;</td></tr>
            <tr>
               <td colspan="2"><input type="checkbox" id="cbCloseOnClick" checked="" /> 項目を選択した後にメニューを閉じる</td>
            </tr>
        </table>
    </fieldset>

    <script>
        $(function() {
            function toggleBold() {
                $("#htmlEditor").igHtmlEditor("executeAction", "bold");
                var cbElement = document.getElementById("cbCloseOnClick");
                if (cbElement && cbElement.checked) {
                    $("#radialMenu").igRadialMenu("option", "isOpen", false);
                }
            }

            function toggleItalic() {
                $("#htmlEditor").igHtmlEditor("executeAction", "italic");
                var cbElement = document.getElementById("cbCloseOnClick");
                if (cbElement && cbElement.checked) {
                    $("#radialMenu").igRadialMenu("option", "isOpen", false);
                }
            }

            // create the html editor
            $("#htmlEditor").igHtmlEditor({
                width: "98%",
                height: "450px"
            });

            $("#htmlEditor").igHtmlEditor("setContent", "ラジアル メニュー コントロールは、中央ボタンの周りに項目を表示するコンテキスト メニューです。項目を円形に配置することで項目をすばやく選択できます。各項目は中央に対して均等に配置されます。ラジアル メニューは、数値、色値、または操作を実行する項目タイプをサポートします。サブ項目もサポートします。<br/>デフォルトで、ラジアル メニューの中央ボタンのみを表示します。ユーザーが中央ボタンをクリックすると、ラジアル メニューが開き、ルート レベルのメニュー項目を表示します。ルート レベル項目が表示されたときに中央ボタンをクリックすると、ラジアル メニューが閉じます。サブ項目に移動するには、外部リングの矢印をクリックし対応するサブ項目グループを表示します。サブ項目グループが表示されたときに中央ボタンをクリックすると、以前のレベルの項目を表示します。", "html");

            // create the radial menu
            $("#radialMenu").igRadialMenu({
                width: "300px",
                height: "300px",
                items:
                [
                    {
                        name: "button1",
                        header: "太字",
                        iconUri: "/images/samples/radial-menu/Bold.png",
                        click: function () { toggleBold(); }
                    },
                    {
                        name: "button2",
                        header: "イタリック",
                        iconUri: "/images/samples/radial-menu/Italic.png",
                        click: function () { toggleItalic(); }
                    },
                ]
            });

            // create slider for the horizontal radial menu sizing
            $("#sliderWidth").slider({
                min: 100,
                max: 500,
                value: 300,
                step: 1,
                slide: function (evt, ui) {
                    $("#radialMenu").igRadialMenu("option", "width", ui.value);
                    $("#labSliderWidth").text(ui.value);
                }
            });

            // create slider for the vertical radial menu sizing
            $("#sliderHeight").slider({
                min: 100,
                max: 500,
                value: 300,
                step: 1,
                slide: function (evt, ui) {
                    $("#radialMenu").igRadialMenu("option", "height", ui.value);
                    $("#labSliderHeight").text(ui.value);
                }
            });
        });
    </script>
</body>
</html>

Ignite UI for jQuery | サンプル

検索結果

ラジアルメニュー - 概要

コードビュー

Ignite UI for jQuery | サンプル

検索結果

ラジアル メニュー - 概要

コード ビュー

ラジアルメニュー - 概要

コードビュー