製品版のみの機能
ラジアル ゲージ - API の使用
ボタンおよび API ビューアーは igRadialGauge の針のメソッドを紹介します
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
| 針値の入力/設定: | 針値の設定 |
| 現在の針値の取得: | 針値の取得 |
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
ボタンをクリックすると、ランタイムで針の値を変更するか、針の現在値を取得できます。
コード ビュー
クリップボードへコピー
<!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" />
<!-- Used to style the API Viewer and Explorer UI -->
<link href="/css/apiviewer.css" rel="stylesheet" type="text/css" />
<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.dv.js"></script>
<!-- Used to add markup and provide logging
functionality for the API Explorer and API Viewer UI -->
<script src="/js/apiviewer.js"></script>
</head>
<body>
<style type="text/css">
.apiButton {
text-align: center;
padding: 0px 0.5em 0px 0.5em;
margin: 0.1em !important;
display: inline-block;
cursor: pointer;
background: #f0f0f0;
border: 1px solid #a0a0a0;
}
.apiButton:hover {
background: #d0d0f0;
border: 1px solid #505090;
}
.apiInput {
width: 3em;
margin: 0.1em;
border: 1px solid #a0a0a0;
}
</style>
<!-- Target element for the igRadialGauge -->
<div id="radialGauge"></div>
<div class="api-explorer">
<table style="width: 100%;">
<tr>
<td><span>針値の入力/設定: </span></td>
<td style="text-align: right;">
<input type="text" id="needleValue" name="format" value="" class="apiInput"/>
<span class="apiButton ui-corner-all" id="changeNeedleValue">針値の設定</span>
</td>
</tr>
<tr style="height:10px"></tr>
<tr>
<td><span>現在の針値の取得: </span></td>
<td style="text-align: right;">
<span class="apiButton ui-corner-all" id="getNeedleValue">針値の取得</span>
</td>
</tr>
</table>
</div>
<div class="api-viewer"></div>
<script type="text/javascript">
$(function () {
// Used to show output in the API Viewer at runtime,
// defined in external script 'apiviewer.js'
var apiViewer = new $.ig.apiViewer();
/*----------------- Method & Option Examples -------------------------*/
// process events of buttons
$("#changeNeedleValue").on({
click: function (e) {
var needleValue = parseFloat($("#needleValue").val());
if (!needleValue || isNaN(needleValue)) {
needleValue = 0;
}
needleValue = Math.min(Math.max(needleValue, 0), 100);
$("#radialGauge").igRadialGauge("option", "value", needleValue);
$("#needleValue").val(needleValue);
}
});
var prevValue = null;
$("#getNeedleValue").on({
click: function (e) {
var needleValue = $("#radialGauge").igRadialGauge("option", "value");
if (prevValue == null || prevValue != needleValue) {
apiViewer.log("現在の針値: " + needleValue);
prevValue = needleValue;
}
}
});
/*----------------- Instantiation -------------------------*/
$("#radialGauge").igRadialGauge({
height: "500px",
transitionDuration: "1500",
width: "100%"
});
function isAndroid() {
return navigator.userAgent.match(/Android/i) ? true : false;
}
$("#radialGauge").igRadialGauge("option", "value", 0);
$("#needleValue").val(0);
});
</script>
</body>
</html>