OSS で利用できる機能
コンボ ボックス - キーボード ナビゲーション
このサンプルは、igCombo コントロールのキーボード ナビゲーションを紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
キーボード ナビゲーション サポートによりコンボがより速く、使いやすく、そしてデータにアクセスしやすくなります。このサンプルでは、基本のキーボード ナビゲーション シナリオを紹介します。キーボード ナビゲーション サポートの完全なリストは、ヘルプのキーボード ナビゲーションをご覧ください。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html>
<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>
</head>
<body>
<style>
.combo-label {
margin-bottom: .5em;
}
.tooltipStyle {
max-width: 400px;
}
.glowing-border {
outline: none !important;
border-color: #8dff71 !important;
box-shadow: 0 0 10px #8dff71 !important;
background-color: #CBFF99;
}
.normal {
border: 1px solid #bcbcbc;
background-color: #ffffff;
box-shadow: 0 0 5px #bcbcbc !important;
}
</style>
<h4 class="combo-label">世界の高い山トップ 10</h4>
<div id="combo"></div>
<a id="tooltip" title="Message"></a>
<script src="/data-files/top-10-mountain-tops.js"></script>
<script type="text/javascript">
$(function () {
var tipIndex = 0;
$("#combo").igCombo({
width: "270px",
textKey: "MountainName",
valueKey: "ID",
dataSource: mountainTops,
multiSelection: {
enabled: true
},
dropDownOpened: function (evt, ui) {
if ((evt.keyCode == 40) && (tipIndex == 1)) {
showWellDoneMessage();
}
},
dropDownClosed: function (evt, ui) {
if ((evt.keyCode == 38) && (tipIndex == 4)) {
showWellDoneMessage();
}
//Close the drop down when there are selected items
if (evt.keyCode == 27 && tipIndex == 7 && $("#combo").igCombo("selectedItems")) {
showWellDoneMessage();
}
},
selectionChanged: function (evt, ui) {
if (evt.keyCode == 16 && (tipIndex == 6)) {
showWellDoneMessage();
}
}
});
$("#tooltip").tooltip({
position: { of: ".ui-igcombo-buttonicon", my: "left+55 center", at: "right center" },
open: function (event, ui) {
$("#tooltip").tooltip("option", "content", getTip(tipIndex++));
},
tooltipClass: "tooltipStyle"
});
setTimeout(function () {
startExample();
}, 1500);
$(document).keydown(function (e) {
if (e.keyCode == 36 && e.ctrlKey && tipIndex == 3) {
var ddOpened = $("#combo").igCombo("dropDownOpened");
if (ddOpened) {
showWellDoneMessage();
} else {
showMessage("ドロップダウンを開いてください。");
}
}
if (e.keyCode == 35 && e.ctrlKey && tipIndex == 2) {
var ddOpened = $("#combo").igCombo("dropDownOpened");
if (ddOpened) {
showWellDoneMessage();
} else {
showMessage("ドロップダウンを開いてください。");
}
}
//Clear the input when Esc is pressed
if (e.keyCode == 27 && tipIndex == 5) {
showWellDoneMessage();
}
});
function startExample() {
$("#combo").igCombo("clearInput");
$("#combo").igCombo("closeDropDown");
$('#tooltip').tooltip('open');
$(".ui-igcombo-field").focus();
}
function showMessage(message) {
var currentContent = $("#tooltip").tooltip("option", "content");
$("#tooltip").tooltip("option", "content", currentContent + "<br /><b>" + message + "</b>");
setTimeout(function () {
$("#tooltip").tooltip("option", "content", currentContent);
}, 2000);
}
function showWellDoneMessage() {
var content = $("#tooltip").tooltip("option", "content");
$("div[role='tooltip']").switchClass("normal", "glowing-border", 1000);
$("#tooltip").tooltip("option", "content", content + " <span style='display: inline-block' class='ui-icon ui-icon-check'></span>");
setTimeout(function () {
$("#tooltip").tooltip("close");
setTimeout(function () {
if (tipIndex == 7) $("#tooltip").tooltip("close");
else {
$("#tooltip").tooltip("open");
$("#tooltip").tooltip("option", "position", { of: ".ui-igcombo-buttonicon", my: "left+55 center", at: "right center" });
}
}, 500);
}, 1500);
}
function getTip(idx) {
var tips = [
"ドロップダウンが閉じたときに<b>下矢印</b>を押すとドロップダウンが開きます。開いたら次の項目に移動します。",
"ドロップダウンが開いているときに <b>Ctrl</b> + <b>End</b> キーを押すと最後の項目に移動します。",
"ドロップダウンが開いているときに <b>Ctrl</b> + <b>Home</b> キーを押すと最初の項目に移動します。",
"ドロップダウンが開いているときに<b>上矢印</b>を押すとドロップダウンは閉じます。または以前の項目に移動します。",
"選択されている項目がない場合に「テキスト」などの値を入力し、<b>Esc キー</b>を押すとコンテンツがクリアされます。",
"<b>Shift</b> + <b>上/下矢印</b> キーを押すと、アクティブ (強調表示) 項目が変更されます。アクティブ項目を選択するには <b>Shift</b> キーを離します。",
"項目が選択されているときにドロップダウンを閉じるには、<b>Esc キー</b>を押します。",
];
return tips[idx];
}
});
</script>
</body>
</html>
var mountainTops = [
{ "ID": 1, "MountainName": "Everest", "Country": "Nepal/Tibet", "Feet2": 29.035 },
{ "ID": 2, "MountainName": "K2 (Mount Godwin Austen)", "Country": "Pakistan/China", "Feet2": 29.250 },
{ "ID": 3, "MountainName": "Kangchenjunga", "Country": "India/Nepal", "Feet2": 28.169 },
{ "ID": 4, "MountainName": "Lhotse", "Country": "Nepal/Tibet", "Feet2": 27.940 },
{ "ID": 5, "MountainName": "Makalu", "Country": "Nepal/Tibet", "Feet2": 27.766 },
{ "ID": 6, "MountainName": "Cho Oyu", "Country": "Nepal/Tibet", "Feet2": 26.906 },
{ "ID": 7, "MountainName": "Dhaulagiri", "Country": "Nepal", "Feet2": 26.795 },
{ "ID": 8, "MountainName": "Manaslu", "Country": "Nepal", "Feet2": 26.781 },
{ "ID": 9, "MountainName": "Nanga Parbat", "Country": "Pakistan", "Feet2": 26.660 },
{ "ID": 10, "MountainName": "Annapurna", "Country": "Nepal", "Feet2": 26.545 }
];