OSS で利用できる機能
ポップオーバー - TypeScript
このサンプルでは、TypeScript で単一の要素のポップオーバー、および複数のターゲット要素のポップオーバーを紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
Infragistics ソーシャル ネットワーク
Bing Maps の入力ビューアー
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
単一ターゲットのポップオーバーは、インフラジスティックス ロゴのクリックで表示されます。複数ターゲット要素のポップオーバーは任意の入力フィールドをクリックして表示します。
コード ビュー
クリップボードへコピー
<!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>
<style type="text/css">
.ui-igpopover > .ui-widget-content {
padding: 5px;
}
.mapsInput {
width: 200px;
}
.spanText {
margin-left: 5px;
font-family: "Segoe UI", Arial, sans-serif;
outline: none;
font-size: 1.1em;
}
</style>
</head>
<body>
<script id="contactUs-template" type="text/html">
<ul>
<li>
<a href="http://www.facebook.com/infragistics" target="_blank">
<img src='https://www.igniteui.com/images/samples/popover/facebook.jpg' />
<span class="spanText">Facebook</span>
</a>
</li>
<li>
<a href="http://twitter.com/infragistics" target="_blank">
<img src='https://www.igniteui.com/images/samples/popover/twitter.jpg' />
<span class="spanText">Twitter</span>
</a>
</li>
<li>
<a href="http://www.youtube.com/user/infragistics" target="_blank">
<img src='https://www.igniteui.com/images/samples/popover/youtube.jpg' />
<span class="spanText">YouTube チャネル</span>
</a>
</li>
</ul>
</script>
<h4>Infragistics ソーシャル ネットワーク</h4>
<img id="IGlogo" src='https://www.igniteui.com/images/samples/popover/IGLogo.jpg' />
<br />
<br />
<h4>Bing Maps の入力ビューアー</h4>
<br />
<div id="popoverTooltip">
<input class="mapsInput" title="Sofia, Bulgaria" value="Sofia, Bulgaria" />
<br />
<input class="mapsInput" title="Cranbury, USA" value="Cranbury, USA" />
<br />
<input class="mapsInput" title="Montevideo, Uruguay" value="Montevideo, Uruguay" />
<br />
<input class="mapsInput" title="Southbank, Australia" value="Southbank, Australia" />
<br />
<input class="mapsInput" title="Tokyo, Japan" value="Tokyo, Japan" />
<br />
<input class="mapsInput" title="Uxbridge, United Kingdom" value="Uxbridge, United Kingdom" />
<br />
</div>
<script src="/TypeScriptSamples/popover/typescript.js"></script>
</body>
</html>
/// <reference path="/js/typings/jquery.d.ts" />
/// <reference path="/js/typings/jqueryui.d.ts" />
/// <reference path="/js/typings/igniteui.d.ts" />
declare var mapHelper;
$(function () {
function contentFunction() {
var location = (<HTMLLIElement>$(this)[0]) ? (<HTMLLIElement>$(this)[0]) : "Sofia,Bulgaria";
var imgTemplate = "<img class='map' alt='${value}' src='https://dev.virtualearth.net/REST/V1/Imagery/Map/AerialWithLabels/${value}?mapSize=250,250&format=jpeg&key=${bingKey}'>";
var data = [{ value: (<HTMLLIElement>$(this)[0]).value, bingKey: mapHelper.bingData() }];
return $.ig.tmpl(imgTemplate, data);
}
$('#IGlogo').igPopover({
direction: "right",
position: "start",
closeOnBlur: false,
animationDuration: 150,
maxHeight: null,
maxWidth: null,
contentTemplate: $('#contactUs-template').html(),
headerTemplate: {
closeButton: true,
title: "ソーシャル"
},
showOn: "click"
});
var popOver = $('#popoverTooltip').igPopover({
direction: "right",
position: "start",
headerTemplate: {
closeButton: true,
title: "Bing Maps を使用して市の位置を表示します。"
},
closeOnBlur: false,
animationDuration: 0,
maxHeight: null,
maxWidth: 250,
contentTemplate: contentFunction,
selectors: "[title]",
showOn: "focus"
});
});