製品版のみの機能
ラジアル メニュー - 項目の構成
このサンプルでは、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>
<fieldset>
<legend>オプション</legend>
<table>
<tr>
<td>ウェッジの最小数:</td>
<td><div id="minWedgeSlider" style="width:100px"></div></td>
<td><label id="labMinWedgeSlider">8</label></td>
</tr>
<tr>
<td>StartAngleOfWedges:</td>
<td><div id="startAngleSlider" style="width:100px"></div></td>
<td><label id="labStartAngleSlider">-90</label></td>
</tr>
<tr>
<td>ウェッジのインデックス:</td>
<td><input id="inWedgeIndex" /></td>
<td><input type="button" value="設定" onclick="setWedgeIndex(document.getElementById('inWedgeIndex').value);" /></td>
</tr>
<tr>
<td>ウェッジのスパン:</td>
<td><input id="inWedgeSpan" /></td>
<td><input type="button" value="設定" onclick="setWedgeSpan(document.getElementById('inWedgeSpan').value);" /></td>
</tr>
</table>
</fieldset>
<script>
var lastCliked = null;
function setWedgeIndex(_index) {
if (lastCliked == null) return;
if (isNaN(_index)) {
alert("整数値を指定してください。");
return;
}
$("#radialMenu").igRadialMenu("itemOption", lastCliked, "wedgeIndex", _index);
}
function setWedgeSpan(_span) {
if (lastCliked == null) return;
if (isNaN(_span) || _span < -1) {
alert("0 より大きい整数値を指定してください。");
return;
}
$("#radialMenu").igRadialMenu("itemOption", lastCliked, "wedgeSpan", _span);
}
$(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 (evt, ui) {
lastCliked = evt.item.name;
toggleBold();
}
},
{
name: "button2",
header: "イタリック",
iconUri: "/images/samples/radial-menu/Italic.png",
click: function (evt, ui) {
lastCliked = evt.item.name;
toggleItalic();
}
}
]
});
// create slider for the radial menu minimum wedges
$("#minWedgeSlider").slider({
min: 1,
max: 16,
value: 8,
step: 1,
slide: function (evt, ui) {
$("#radialMenu").igRadialMenu("option", "minWedgeCount", ui.value);
$("#labMinWedgeSlider").text(ui.value);
}
});
// create slider for the radial menu start angle of wedges
$("#startAngleSlider").slider({
min: -180,
max: 180,
value: -90,
step: 1,
slide: function (evt, ui) {
$("#radialMenu").igRadialMenu("option", "rotationInDegrees", ui.value);
$("#labStartAngleSlider").text(ui.value);
}
});
});
</script>
</body>
</html>