製品版のみの機能
ラジアル メニュー - 数値項目
このサンプルでは、igRadialMenu で数値項目を定義する方法を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このサンプルでは、igRadialMenu で数値項目を定義する方法を紹介します。
コード ビュー
クリップボードへコピー
<!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>
<script>
$(function () {
function setFontSize(_size) {
if (_size == null) return;
$("#htmlEditor").igHtmlEditor("executeAction", "fontsize", _size);
}
function setFontFamily(_font) {
if (_font == null) return;
$("#htmlEditor").igHtmlEditor("executeAction", "fontname", _font);
}
// 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",
minWedgeCount: 1,
items:
[
{
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); }
}
]
},
]
});
});
</script>
</body>
</html>