OSS で利用できる機能

ポップオーバー - 基本使用

このサンプルでは、単一の要素のポップオーバー、および複数のターゲット要素のポップオーバーを紹介します。

Infragistics ソーシャルネットワーク

Bing Maps の入力ビューアー

このサンプルは、より大きい画面サイズのためにデザインされました。

モバイルデバイスで画面を回転、フルサイズ表示、またはその他のデバイスにメールで送信します。

これは JavaScript でポップオーバーコントロールの基本初期化シナリオです。ポップオーバーコントロールを表示するには、Infragistics ロゴの上にホバーするか、入力フィールドをフォーカスします。

コードビュー

JsFiddle で表示

クリップボードへコピー

                    <!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>

Ignite UI for jQuery | サンプル

検索結果

ポップオーバー - 基本使用

Infragistics ソーシャルネットワーク

Bing Maps の入力ビューアー

コードビュー

Ignite UI for jQuery | サンプル

検索結果

ポップオーバー - 基本使用

Infragistics ソーシャル ネットワーク

Bing Maps の入力ビューアー

コード ビュー

Infragistics ソーシャルネットワーク

コードビュー