OSS で利用できる機能
通知メッセージ - 概要
通知ウィジェットはシステム状態についてより有益なフィードバックを提供します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
メッセージを参照してください
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
ウィジェットは igValidator および igEditors ウィジェットにバインドできます。4 つのメッセージ状態 success、error、warning、info があります。インラインまたはポップオーバー モードで表示できます。自動モードは自動的にモードが選択されます。ポップオーバー モードは上下左右の 4 つの方向を示すこともできます。選択した方向で表示するスペースがない場合、次の方向に表示されます。順序は 上 > 左 > 右 > 下となります。
コード ビュー
クリップボードへコピー
$("#successEditor1").igNotifier({
direction: "right",
locale: {
infoMsg: "情報メッセージ。",
successMsg: "成功メッセージ。",
warningMsg: "警告メッセージ。",
errorMsg: "エラー メッセージ。"
}
}).igNotifier("notify", "success");
$("#state").on("change", function myfunction() {
var state = $(this).find("option:selected").val();
$("#successEditor1").igNotifier("option", "state", state);
});
$("#mode").on("change", function myfunction() {
var mode = $(this).find("option:selected").val();
$("#successEditor1").igNotifier("option", "mode", mode);
});
$("#direction").on("change", function myfunction() {
var direction = $(this).find("option:selected").val();
$("#successEditor1").igNotifier("option", "direction", direction);
});
$("#show").on("click", function myfunction() {
$("#successEditor1").igNotifier("show");
});
$("#hide").on("click", function myfunction() {
$("#successEditor1").igNotifier("hide");
});
<h3>メッセージを参照してください</h3>
<input id="successEditor1"></input>
<br />
<br />
<br />
<div>
<div class="float">
<label>メッセージ状態:</label>
<select id="state">
<option value="success" selected="">成功</option>
<option value="info">情報</option>
<option value="warning">警告</option>
<option value="error">エラー</option>
</select>
</div>
<div class="float">
<label>メッセージ モード:</label>
<select id="mode">
<option value="auto" selected="">自動</option>
<option value="popover">ポップオーバー</option>
<option value="inline">インライン</option>
</select>
</div>
<div class="float">
<label>ポップオーバー方向:</label>
<select id="direction">
<option value="top" selected="">上</option>
<option value="left">左</option>
<option value="right">右</option>
<option value="bottom">下</option>
</select>
</div>
<div class="buttons">
<br>
<br>
<button id="show"> 表示</button>
<button id="hide"> 非表示</button>
</div>
</div>
div.float {
float: left;
margin-right: 10px;
}
div.float label {
display: block;
line-height: 20px;
font-family: 'Open Sans',Arial,sans-serif;
font-size: 13px;
}
select {
width: 150px;
height: 28px;
opacity: 1;
}
div.buttons {
clear:both;
}
.buttons button {
width: 70px;
height: 29px;
opacity: 1;
float:left;
margin-right:20px;
background-color: rgb(226, 226, 226);
}
#successEditor1 {
margin-top: 20px;
margin-bottom: 0px;
}
@media screen and (max-width: 500px) {
div.float { clear: both; }
}
<!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>
</head>
<body>
<style>
div.float {
float: left;
margin-right: 10px;
}
div.float label {
display: block;
line-height: 20px;
font-family: 'Open Sans',Arial,sans-serif;
font-size: 13px;
}
select {
width: 150px;
height: 28px;
opacity: 1;
}
div.buttons {
clear:both;
}
.buttons button {
width: 70px;
height: 29px;
opacity: 1;
float:left;
margin-right:20px;
background-color: rgb(226, 226, 226);
}
#successEditor1 {
margin-top: 20px;
margin-bottom: 0px;
}
@media screen and (max-width: 500px) {
div.float { clear: both; }
}
</style>
<h3>メッセージを参照してください</h3>
<input id="successEditor1"/>
<br />
<br />
<br />
<div>
<div class="float">
<label>メッセージ状態:</label>
<select id="state">
<option value="success" selected>成功</option>
<option value="info">情報</option>
<option value="warning">警告</option>
<option value="error">エラー</option>
</select>
</div>
<div class="float">
<label>メッセージ モード:</label>
<select id="mode">
<option value="auto" selected>自動</option>
<option value="popover">ポップオーバー</option>
<option value="inline">インライン</option>
</select>
</div>
<div class="float">
<label>ポップオーバー方向:</label>
<select id="direction">
<option value="top" selected>上</option>
<option value="left">左</option>
<option value="right">右</option>
<option value="bottom">下</option>
</select>
</div>
<div class="buttons">
<br />
<br />
<button id="show"> 表示</button>
<button id="hide"> 非表示</button>
</div>
</div>
<script>
$(function () {
$("#successEditor1").igNotifier({
direction: "right",
locale: {
infoMsg: "情報メッセージ。",
successMsg: "成功メッセージ。",
warningMsg: "警告メッセージ。",
errorMsg: "エラー メッセージ。"
}
}).igNotifier("notify", "success");
$("#state").on("change", function myfunction() {
var state = $(this).find("option:selected").val();
$("#successEditor1").igNotifier("option", "state", state);
});
$("#mode").on("change", function myfunction() {
var mode = $(this).find("option:selected").val();
$("#successEditor1").igNotifier("option", "mode", mode);
});
$("#direction").on("change", function myfunction() {
var direction = $(this).find("option:selected").val();
$("#successEditor1").igNotifier("option", "direction", direction);
});
$("#show").on("click", function myfunction() {
$("#successEditor1").igNotifier("show");
});
$("#hide").on("click", function myfunction() {
$("#successEditor1").igNotifier("hide");
});
});
</script>
</body>
</html>