OSS で利用できる機能
ポップオーバー - 概要
igPopover コントロールは、マウスまたはタッチ操作でユーザー インターフェイスの要素の上にコンテキスト情報を表示します。サンプルをすべて表示するには、メニューを参照してください。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
Infragistics ソーシャル ネットワーク
Bing Maps の入力ビューアー
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
これは JavaScript でポップオーバー コントロールの基本初期化シナリオです。ポップオーバー コントロールを表示するには、Infragistics ロゴの上にホバーするか、入力フィールドをフォーカスします。
コード ビュー
クリップボードへコピー
<h4>Infragistics ソーシャル ネットワーク</h4>
<img id="IGlogo" src='/images/samples/popover/IGLogo.jpg'></img>
<br />
<br />
<h4>Bing Maps の入力ビューアー</h4>
<br />
<div id="popoverTooltip">
<input class="mapsInput" title="Sofia, Bulgaria" value="Sofia, Bulgaria"></input>
<br>
<input class="mapsInput" title="Cranbury, USA" value="Cranbury, USA"></input>
<br>
<input class="mapsInput" title="Montevideo, Uruguay" value="Montevideo, Uruguay"></input>
<br>
<input class="mapsInput" title="Southbank, Australia" value="Southbank, Australia"></input>
<br>
<input class="mapsInput" title="Tokyo, Japan" value="Tokyo, Japan"></input>
<br>
<input class="mapsInput" title="Uxbridge, United Kingdom" value="Uxbridge, United Kingdom"></input>
<br>
</div>
.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;
}
<!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>
<script id="contactUs-template" type="text/html">
<ul>
<li>
<a href="http://www.facebook.com/infragistics" target="_blank">
<img src='/images/samples/popover/facebook.jpg' />
<span class="spanText">Facebook</span>
</a>
</li>
<li>
<a href="http://twitter.com/infragistics" target="_blank">
<img src='/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='/images/samples/popover/youtube.jpg' />
<span class="spanText">YouTube チャネル</span>
</a>
</li>
</ul>
</script>
</head>
<body>
<script src="/js/map-helper.js" type="text/javascript"></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>
<h4>Infragistics ソーシャル ネットワーク</h4>
<img id="IGlogo" src='/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 type="text/javascript">
$( function ()
{
$( '#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"
} );
} );
function contentFunction()
{
var location = $(this)[0].value ? $(this)[0].value : "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: location, bingKey: mapHelper.bingData() }];
return $.ig.tmpl(imgTemplate, data);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
</head>
<body>
<script src="/js/map-helper.js" type="text/javascript"></script>
<my-app>Loading...</my-app>
<!-- 1. Load libraries -->
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<!-- IE required polyfills, in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<script src="https://unpkg.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="https://unpkg.com/zone.js@0.6.23?main=browser"></script>
<script src="https://unpkg.com/typescript@2.0.2/lib/typescript.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="/igniteui/js/infragistics.core.js"></script>
<script src="/igniteui/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>
<script id="contactUs-template" type="text/html">
<ul>
<li>
<a href="http://www.facebook.com/infragistics" target="_blank">
<img src='/images/samples/popover/facebook.jpg' />
<span class="spanText">Facebook</span>
</a>
</li>
<li>
<a href="http://twitter.com/infragistics" target="_blank">
<img src='/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='/images/samples/popover/youtube.jpg' />
<span class="spanText">YouTube チャネル</span>
</a>
</li>
</ul>
</script>
<script>
System.config({
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'igniteui-angular-wrappers': 'npm:igniteui-angular-wrappers',
'rxjs': 'npm:rxjs'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
rxjs: {
defaultExtension: 'js'
},
'igniteui-angular-wrappers': {
main: './index.js',
defaultExtension: 'js'
}
},
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true }
});
System.import('basic-popover.ts').then(null, console.error.bind(console));
</script>
</body>
</html>
import { Component, NgModule } from '@angular/core';
import { IgPopoverComponent } from 'igniteui-angular-wrappers';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
declare var jQuery: any;
declare var mapHelper;
@Component({
selector: 'my-app',
template: `<h4>Infragistics ソーシャル ネットワーク</h4>
<ig-popover id="IGlogoTooltip" widgetId="IGlogoTooltip" [options]="popoverOptions1">
<img id="IGlogo" src='/images/samples/popover/IGLogo.jpg' />
</ig-popover>
<br />
<br />
<h4>Bing Maps の入力ビューアー</h4>
<br />
<ig-popover widgetId="popoverTooltip" id="popoverTooltip" [options]="popoverOptions2">
<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 />
</ig-popover>`
})
export class AppComponent {
private popoverOptions1: IgPopover;
private popoverOptions2: IgPopover;
constructor() {
this.popoverOptions1 = {
direction: "right",
position: "start",
closeOnBlur: false,
animationDuration: 150,
maxHeight: null,
maxWidth: null,
selectors: "#IGlogo",
contentTemplate: function () {
return jQuery('#contactUs-template').html()
},
headerTemplate: {
closeButton: true,
title: "ソーシャル"
},
showOn: "click"
}
this.popoverOptions2 = {
direction: "right",
position: "start",
headerTemplate: {
closeButton: true,
title: 'Bing Maps を使用して市の位置を表示します。'
},
closeOnBlur: false,
animationDuration: 0,
maxHeight: null,
maxWidth: 250,
contentTemplate: function () {
var location = $(this)[0].value ? $(this)[0].value : "Cranbury, USA";
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: location, bingKey: mapHelper.bingData() }];
return $.ig.tmpl(imgTemplate, data);
},
selectors: "[title]",
showOn: "focus"
}
}
}
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent, IgPopoverComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
<!-- 1. Load libraries -->
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<!-- ReactJS library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="/igniteui/js/infragistics.core.js"></script>
<script src="/igniteui/js/infragistics.lob.js"></script>
<script src="/js-data/nw-products"></script>
<!-- Ignite UI for jQuery ReactJS Files -->
<script src="https://unpkg.com/igniteui-react@1.0.1/igniteui-react.js"></script>
<script id="contactUs-template" type="text/html">
<ul>
<li>
<a href="http://www.facebook.com/infragistics" target="_blank">
<img src='/images/samples/popover/facebook.jpg' />
<span class="spanText">Facebook</span>
</a>
</li>
<li>
<a href="http://twitter.com/infragistics" target="_blank">
<img src='/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='/images/samples/popover/youtube.jpg' />
<span class="spanText">YouTube チャネル</span>
</a>
</li>
</ul>
</script>
</head>
<body>
<script src="/js/map-helper.js" type="text/javascript"></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>
<div id="app">
<!--Sample JSON Data-->
<script type="text/babel">
var App = React.createClass({
render: function () {
function contentFunction () {
var location = $(this)[0].value ? $(this)[0].value : "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: location, bingKey: mapHelper.bingData() }];
return $.ig.tmpl( imgTemplate, data );
}
return
<div>
<h4>Infragistics ソーシャル ネットワーク</h4>
<IgPopover id="IGlogoPopover"
direction="right"
position="start"
closeOnBlur={false}
animationDuration={150}
maxHeight={null}
maxWidth={null}
selectors="#IGlogo"
contentTemplate={$( '#contactUs-template' ).html()}
headerTemplate={{
closeButton: true,
title: "ソーシャル"
}}
showOn="click">
<img id="IGlogo" src='/images/samples/popover/IGLogo.jpg'/>
</IgPopover>
<br />
<br />
<h4>Bing Maps の入力ビューアー</h4>
<br />
<IgPopover id="popoverTooltip"
direction="right"
position="start"
headerTemplate={{
closeButton: true,
title: 'Bing Maps を使用して市の位置を表示します。'
}}
closeOnBlur={false}
animationDuration={0}
maxHeight={null}
maxWidth={250}
contentTemplate={contentFunction}
selectors="[title]"
showOn="focus">
<input className="mapsInput" title="Sofia, Bulgaria" defaultValue="Sofia, Bulgaria"/>
<br />
<input className="mapsInput" title="Cranbury, USA" defaultValue="Cranbury, USA" />
<br />
<input className="mapsInput" title="Montevideo, Uruguay" defaultValue="Montevideo, Uruguay" />
<br />
<input className="mapsInput" title="Southbank, Australia" defaultValue="Southbank, Australia" />
<br />
<input className="mapsInput" title="Tokyo, Japan" defaultValue="Tokyo, Japan" />
<br />
<input className="mapsInput" title="Uxbridge, United Kingdom" defaultValue="Uxbridge, United Kingdom" />
<br />
</IgPopover>
</div>
}
});
ReactDOM.render(
<App />,
document.getElementById("app"));
</script>
</div>
</body>
</html>