OSS で利用できる機能

テンプレートエンジン - 概要

Ignite UI for jQuery® Templating Engine は、HTML 要素のセットにコンテンツテンプレートを適用するための JavaScript ライブラリです。

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

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

このエンジンは条件付きのロジックおよびネストテンプレートをサポートします。サンプルをすべて表示するには、メニューを参照してください。

コードビュー

クリップボードへコピー

                    $("#comboIG").igCombo({
    highlightMatchesMode: "contains",
    responseDataKey: "d.results",
    valueKey: "Name",
    width: "325px",
    closeDropDownOnBlur: false,
    visibleItemsCount: 3,
    dataSource: "https://www.igniteui.com/api/employees?callback=?",
    headerTemplate: "<div id='comboHeaderTemplate' class='comboTemplates'>従業員</div>",
    footerTemplate: "<div id='comboFooterTemplate' class='comboTemplates'>製品の詳細: <a href='https://jp.infragistics.com' target='_blank'>https://jp.infragistics.com</div>",
    itemTemplate: "<div class='comboItemContainer'><div class='empImage'><a href='https://jp.infragistics.com' target='_blank'><img src='${ImageUrl}' width='64px' /></a></div><div class='empInfo'><span class='empName'>${Name}</span><p>${BirthDate}</p><div>${Address}</div></div></div>"
});

                    <div id="comboIG"></div>

                    #comboContainer
{
    margin-bottom: 30px;
}
.comboTemplates
{
    text-align: center;
    padding: 2px;
}
#comboHeaderTemplate
{
    font-size: large;
    font-weight: bold;
    background-color: rgb(185, 9, 11);
    color: White;
}
#comboFooterTemplate
{
    font-size: small;
    background-color: rgb(245, 245, 164);
}
.empImage
{
    float: left;
    width: 64px;
    padding-top: 3px;
}
.empInfo
{
    float: left;
    padding-left: 5px;
    width: 240px;
}
.empName
{
    font-weight: bold;
}
.comboItemContainer
{
    width: 325px;
    white-space: normal;
    height: 70px;
}
li.ui-igcombo-listitem div.empImage a 
{
    border: none
}

.igsb-running-sample > div:first-of-type
{
	        width : 50% !important;
}

                    <!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.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/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>

</head>
<body>

    <style type="text/css">
        #comboContainer
        {
            margin-bottom: 30px;
        }
        .comboTemplates
        {
            text-align: center;
            padding: 2px;
        }
        #comboHeaderTemplate
        {
            font-size: large;
            font-weight: bold;
            background-color: rgb(185, 9, 11);
            color: White;
        }
        #comboFooterTemplate
        {
            font-size: small;
            background-color: rgb(245, 245, 164);
        }
        .empImage
        {
            float: left;
            width: 64px;
            padding-top: 3px;
        }
        .empInfo
        {
            float: left;
            padding-left: 5px;
            width: 240px;
        }
        .empName
        {
            font-weight: bold;
        }
        .comboItemContainer
        {
            width: 325px;
            white-space: normal;
            height: 70px;
        }
        li.ui-igcombo-listitem div.empImage a 
        {
            border: none
        }

        .igsb-running-sample > div:first-of-type
        {
	        width : 50% !important;
        }
    </style>
    
    <div id="comboIG"></div>

    <script>

        $(function () {

            $("#comboIG").igCombo({
                highlightMatchesMode: "contains",
                responseDataKey: "d.results",
                valueKey: "Name",
                width: "325px",
                closeDropDownOnBlur: false,
                visibleItemsCount: 3,
                dataSource: "https://www.igniteui.com/api/employees?callback=?",
                headerTemplate: "<div id='comboHeaderTemplate' class='comboTemplates'>従業員</div>",
                footerTemplate: "<div id='comboFooterTemplate' class='comboTemplates'>製品の詳細: <a href='https://jp.infragistics.com' target='_blank'>https://jp.infragistics.com</div>",
                itemTemplate: "<div class='comboItemContainer'><div class='empImage'><a href='https://jp.infragistics.com' target='_blank'><img src='${ImageUrl}' width='64px' /></a></div><div class='empInfo'><span class='empName'>${Name}</span><p>${BirthDate}</p><div>${Address}</div></div></div>"
            });

        });

    </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" />
	<style type="text/css">
		#comboContainer {
			margin-bottom: 30px;
		}

		.comboTemplates {
			text-align: center;
			padding: 2px;
		}

		#comboHeaderTemplate {
			font-size: large;
			font-weight: bold;
			background-color: rgb(185, 9, 11);
			color: White;
		}

		#comboFooterTemplate {
			font-size: small;
			background-color: rgb(245, 245, 164);
		}

		.empImage {
			float: left;
			width: 64px;
			padding-top: 3px;
		}

		.empInfo {
			float: left;
			padding-left: 5px;
			width: 240px;
		}

		.empName {
			font-weight: bold;
		}

		.comboItemContainer {
			width: 325px;
			white-space: normal;
			height: 70px;
		}

		li.ui-igcombo-listitem div.empImage a {
			border: none;
		}

		.igsb-running-sample > div:first-of-type {
			width: 50% !important;
		}
	</style>

</head>
<body>

	<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 -->
	<script src="/igniteui/js/infragistics.core.js"></script>
	<script src="/igniteui/js/infragistics.lob.js"></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-usage.ts' ).then( null, console.error.bind( console ) );
	</script>
</body>
</html>

             import { Component, NgModule } from '@angular/core';
import { IgComboComponent } from 'igniteui-angular-wrappers';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic }	from '@angular/platform-browser-dynamic';

declare var jQuery: any;

@Component({
	selector: 'my-app',
	templateUrl: `<ig-combo widgetId="comboIG" [options]="combo.options"></ig-combo>`
})

export class AppComponent {
	public combo: any;

	constructor() {
		this.combo = {
			options: {highlightMatchesMode: "contains", responseDataKey: "d.results", valueKey: "Name", width: "325px", closeDropDownOnBlur: false, visibleItemsCount: 3, dataSource: "https://www.igniteui.com/api/employees?callback=?", headerTemplate: "<div id='comboHeaderTemplate' class='comboTemplates'>Employees</div>", footerTemplate: "<div id='comboFooterTemplate' class='comboTemplates'>More information at <a href='https://www.infragistics.com' target='_blank'>https://www.infragistics.com</div>",
                itemTemplate: "<div class='comboItemContainer'><div class='empImage'><a href='https://www.infragistics.com' target='_blank'><img src='${ImageUrl}' width='64px' /></a></div><div class='empInfo'><span class='empName'>${Name}</span><p>${BirthDate}</p><div>${Address}</div></div></div>"}
		};
	}
}

@NgModule({
	imports:	  [ BrowserModule ],
	declarations: [ AppComponent, IgComboComponent ],
	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>
</head>
<body>

	<style type="text/css">
		#comboContainer {
			margin-bottom: 30px;
		}

		.comboTemplates {
			text-align: center;
			padding: 2px;
		}

		#comboHeaderTemplate {
			font-size: large;
			font-weight: bold;
			background-color: rgb(185, 9, 11);
			color: White;
		}

		#comboFooterTemplate {
			font-size: small;
			background-color: rgb(245, 245, 164);
		}

		.empImage {
			float: left;
			width: 64px;
			padding-top: 3px;
		}

		.empInfo {
			float: left;
			padding-left: 5px;
			width: 240px;
		}

		.empName {
			font-weight: bold;
		}

		.comboItemContainer {
			width: 325px;
			white-space: normal;
			height: 70px;
		}

		li.ui-igcombo-listitem div.empImage a {
			border: none;
		}

		.igsb-running-sample > div:first-of-type {
			width: 50% !important;
		}
	</style>

	<div id="app"></div>

	<script type="text/babel">
		var App = React.createClass({
			render: function() {
				let comboControl = {
						highlightMatchesMode: "contains",
						responseDataKey: "d.results",
						valueKey: "Name",
						width: "325px",
						closeDropDownOnBlur: false,
						visibleItemsCount: 3,
						dataSource: "https://www.igniteui.com/api/employees?callback=?",
						headerTemplate: "
						<div id='comboHeaderTemplate' class='comboTemplates'>$$(employees)</div>",
						footerTemplate: "
						<div id='comboFooterTemplate' class='comboTemplates'>$$(more_info) <a href='$$(more_info_url)' target='_blank'>$$(more_info_url)</div>",
						itemTemplate: "
						<div class='comboItemContainer'><div class='empImage'><a href='$$(more_info_url)' target='_blank'>
							<img src='${ImageUrl}' width='64px' /></a></div><div class='empInfo'>
							<span class='empName'>${Name}</span><p>${BirthDate}</p><div>${Address}</div></div></div>"
					};

					return (
						<IgCombo id="igCombo" highlightMatchesMode={comboControl.highlightMatchesMode} 
							 responseDataKey={comboControl.responseDataKey} 
							 valueKey={comboControl.valueKey} 
							 width={comboControl.width} 
							 closeDropDownOnBlur={comboControl.closeDropDownOnBlur} 
							 visibleItemsCount={comboControl.visibleItemsCount} 
							 dataSource={comboControl.dataSource} 
							 headerTemplate={comboControl.headerTemplate} 
							 footerTemplate={comboControl.footerTemplate} 
							 itemTemplate={comboControl.itemTemplate} />
					);
			}
		});

		ReactDOM.render(
		<App />, document.getElementById("app"));
	</script>

</body>
</html>

Ignite UI for jQuery | サンプル

検索結果

テンプレートエンジン - 概要

コードビュー

Ignite UI for jQuery | サンプル

検索結果

テンプレート エンジン - 概要

コード ビュー

テンプレートエンジン - 概要

コードビュー