Available in the Full Version
Radial Menu - TypeScript
This sample demonstrates how to create a Radial Menu using TypeScript. The Radial Menu has defined button item, color items, font item and font size item.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
This sample demonstrates how to create a Radial Menu using TypeScript. The Radial Menu has defined button item, color items, font item and font size item.
Code View
Copy to Clipboard
<!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" />
<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>
<script src="/TypeScriptSamples/radial-menu/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 toggleBold() {
$("#htmlEditor").igHtmlEditor("executeAction", "bold");
var cbElement = document.getElementById("cbCloseOnClick");
if (cbElement && (<HTMLInputElement>cbElement).checked) {
$("#radialMenu").igRadialMenu("option", "isOpen", false);
}
}
function toggleItalic() {
$("#htmlEditor").igHtmlEditor("executeAction", "italic");
var cbElement = document.getElementById("cbCloseOnClick");
if (cbElement && (<HTMLInputElement>cbElement).checked) {
$("#radialMenu").igRadialMenu("option", "isOpen", false);
}
}
function setFontSize(_size) {
if (_size == null) return;
$("#htmlEditor").igHtmlEditor("executeAction", "fontsize", _size);
}
function setFontFamily(_font) {
if (_font == null) return;
$("#htmlEditor").igHtmlEditor("executeAction", "fontname", _font);
}
function rgbaToRgb(rgbaColor) {
// remove the "a" from "rgba"
var result = rgbaColor.replace("rgba(", "rgb(");
// remove the alpha channel
result = result.replace(",1)", ")");
return result;
}
function setForeColor(color) {
$("#htmlEditor").igHtmlEditor("executeAction", "forecolor", color);
}
function setBackColor(color) {
$("#htmlEditor").igHtmlEditor("executeAction", "backcolor", color);
}
// create the html editor
$("#htmlEditor").igHtmlEditor({
width: "100%",
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(); }
},
{
type: "numericitem",
header: "Font Size",
iconUri: "/images/samples/radial-menu/Size.png",
value: 8,
items:
[
{
name: "gauge1",
type: "numericgauge",
ticks: "10,12,18,24,36",
value: 12,
smallIncrement: 2,
valueChanged: function (evt, ui) {
if (evt.newValue == 10) setFontSize(2);
else if (evt.newValue == 12) setFontSize(3);
else if (evt.newValue == 18) setFontSize(5);
else if (evt.newValue == 24) setFontSize(6);
else if (evt.newValue == 36) setFontSize(7);
}
}
]
},
{
type: "list",
header: "Font",
iconUri: "/images/samples/radial-menu/Font.png",
items:
[
{
header: "Arial",
name: "Arial",
click: function (evt, ui) { setFontFamily(evt.item.name); }
},
{
header: "Calibri",
name: "Calibri",
click: function (evt, ui) { setFontFamily(evt.item.name); }
},
{
header: "Comic Sans",
name: "Comic Sans MS",
click: function (evt, ui) { setFontFamily(evt.item.name); }
},
{
header: "Consolas",
name: "Consolas",
click: function (evt, ui) { setFontFamily(evt.item.name); }
},
{
header: "Courier New",
name: "Courier New",
click: function (evt, ui) { setFontFamily(evt.item.name); }
},
{
header: "Segoe",
name: "Segoe UI",
click: function (evt, ui) { setFontFamily(evt.item.name); }
},
{
header: "Tahoma",
name: "Tahoma",
click: function (evt, ui) { setFontFamily(evt.item.name); }
},
{
header: "Times",
name: "Times New Roman",
click: function (evt, ui) { setFontFamily(evt.item.name); }
},
{
header: "Verdana",
name: "Verdana",
click: function (evt, ui) { setFontFamily(evt.item.name); }
}
]
},
{
// defining color item 1
type: "coloritem",
header: "Foreground",
iconUri: "/images/samples/radial-menu/FColor.png",
color: "rgba(0,0,0,1)",
colorChanged: function (evt) {
var colValue = evt.newValue;
colValue = rgbaToRgb(colValue);
setForeColor(colValue);
},
// defining color wells as sub-items for color item 1
items:
[
{
type: "colorwell",
color: "#FFFF00"
},
{
type: "colorwell",
color: "#C00000"
},
{
type: "colorwell",
color: "#008000"
},
{
type: "colorwell",
color: "#002060"
},
{
type: "colorwell",
color: "#000000"
},
{
type: "colorwell",
color: "#FFFFFF"
},
]
},
{
// defining color item 2
type: "coloritem",
header: "Background",
iconUri: "/images/samples/radial-menu/BColor.png",
color: "rgba(255,255,255,1)",
colorChanged: function (evt) {
var colValue = evt.newValue;
colValue = rgbaToRgb(colValue);
setBackColor(colValue);
},
// defining color wells as sub-items for color item 2
items:
[
{
type: "colorwell",
color: "#FFFF00"
},
{
type: "colorwell",
color: "#C00000"
},
{
type: "colorwell",
color: "#008000"
},
{
type: "colorwell",
color: "#002060"
},
{
type: "colorwell",
color: "#000000"
},
{
type: "colorwell",
color: "#FFFFFF"
},
]
}
]
});
});