製品版のみの機能
ラジアル メニュー - TypeScript
このサンプルでは、TypeScript を使用してラジアル メニューを作成する方法を紹介します。ラジアル メニューにボタン項目、色項目、フォント項目、およびフォント サイズ項目が定義されます。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このサンプルでは、TypeScript を使用してラジアル メニューを作成する方法を紹介します。ラジアル メニューにボタン項目、色項目、フォント項目、およびフォント サイズ項目が定義されます。
コード ビュー
クリップボードへコピー
<!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", "ラジアル メニュー コントロールは、中央ボタンの周りに項目を表示するコンテキスト メニューです。項目を円形に配置することで項目をすばやく選択できます。各項目は中央に対して均等に配置されます。ラジアル メニューは、数値、色値、または操作を実行する項目タイプをサポートします。サブ項目もサポートします。<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(); }
},
{
type: "numericitem",
header: "フォント サイズ",
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: "フォント",
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: "前景",
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: "背景",
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"
},
]
}
]
});
});