製品版のみの機能
ラジアル メニュー - ボタン項目
このサンプルでは、ボタン項目を含む 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/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>
<fieldset>
<legend>オプション</legend>
<table>
<tr>
<td>ラジアル メニューの幅:</td>
<td><label id="labSliderWidth">300</label></td>
</tr>
<tr>
<td colspan="2"><div id="sliderWidth" style="width:100px"></div></td>
</tr>
<tr><td> </td></tr>
<tr>
<td>ラジアル メニューの高さ:</td>
<td><label id="labSliderHeight">300</label></td>
</tr>
<tr>
<td colspan="2"><div id="sliderHeight" style="width:100px"></div></td>
</tr>
<tr><td> </td></tr>
<tr>
<td colspan="2"><input type="checkbox" id="cbCloseOnClick" checked="" /> 項目を選択した後にメニューを閉じる</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", "ラジアル メニュー コントロールは、中央ボタンの周りに項目を表示するコンテキスト メニューです。項目を円形に配置することで項目をすばやく選択できます。各項目は中央に対して均等に配置されます。ラジアル メニューは、数値、色値、または操作を実行する項目タイプをサポートします。サブ項目もサポートします。<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(); }
},
]
});
// 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>