Available in the Full Version

Radial Menu - Overview

This sample demonstrates how to define an igRadialMenu with button items.

Options

Radial Menu Width:	300


Radial Menu Height:	300


Close Menu on Selecting an Item

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

Inspired by the Microsoft OneNote radial menu, the igRadialMenu provides a circular menu that orients the commands around the user, rather than requiring the user to negotiate a nested hierarchy of drop downs. Most commonly used as a context menu, the igRadialMenu allows you to drill down into related sub-menu items with the ability to navigate back to the main level menu item.

Code View

Show In JsFiddle

Copy to Clipboard

                    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", "The Radial Menu control is essentially a context menu presenting its items in a circular arrangement around a center button. The circular arrangement of the items speeds up items selection, because each item is equally positioned in relation to the center. The Radial Menu supports different item types for choosing numerical values, color values or performs actions. Sub-Items are also supported.<br/>By default the only visible part of the Radial Menu is the center button. When the user click on the center button, the Radial Menu opens and shows the root level menu items. Clicking on the center button when the root level items are shown closes the Radial Menu. To navigate Sub-Items the user should click the arrows in the outer ring and the corresponding sub-items group will be displayed. Clicking on the center button when a sub-items group is shown will display the items on the previous level.", "html");

// create the radial menu
$("#radialMenu").igRadialMenu({
    width: "300px",
    height: "300px",
    items:
    [
        {
            name: "button1",
            header: "Bold",
            iconUri: "../../images/samples/radial-menu/Bold.png",
            click: function () { toggleBold(); }
        },
        {
            name: "button2",
            header: "Italic",
            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>Options</legend>
    <table>
        <tr>
            <td>Radial Menu Width:</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>Radial Menu Height:</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> Close Menu on Selecting an Item</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/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/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.1/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/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>Options</legend>
        <table>
            <tr>
                <td>Radial Menu Width:</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>Radial Menu Height:</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="" /> Close Menu on Selecting an Item</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", "The Radial Menu control is essentially a context menu presenting its items in a circular arrangement around a center button. The circular arrangement of the items speeds up items selection, because each item is equally positioned in relation to the center. The Radial Menu supports different item types for choosing numerical values, color values or performs actions. Sub-Items are also supported.<br/>By default the only visible part of the Radial Menu is the center button. When the user click on the center button, the Radial Menu opens and shows the root level menu items. Clicking on the center button when the root level items are shown closes the Radial Menu. To navigate Sub-Items the user should click the arrows in the outer ring and the corresponding sub-items group will be displayed. Clicking on the center button when a sub-items group is shown will display the items on the previous level.", "html");

            // create the radial menu
            $("#radialMenu").igRadialMenu({
                width: "300px",
                height: "300px",
                items:
                [
                    {
                        name: "button1",
                        header: "Bold",
                        iconUri: "/images/samples/radial-menu/Bold.png",
                        click: function () { toggleBold(); }
                    },
                    {
                        name: "button2",
                        header: "Italic",
                        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 | Samples

Search Results

Radial Menu - Overview

Code View