OSS で利用できる機能
コンボ ボックス - テンプレート
このサンプルでは、igCombo コントロールのテンプレートを使用する方法を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
igCombo コントロールには 3 つのカスタム テンプレート ポイント (ヘッダー、フッター、項目) があります。ヘッダー テンプレートはドロップダウン リストの上に表示されます。一方、フッター テンプレートはドロップダウン リストの下に表示されます。項目テンプレートは igCombo コントロールの各項目に使用されます。このサンプルでは、ヘッダー テンプレートおよびフッター テンプレートがリストについての詳細な情報を提供する方法、そして項目テンプレートが各項目についての詳細情報を提供する方法について紹介します。このサンプルは Northwind Service 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 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'>従業員</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>"
};
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>