OSS で利用できる機能
タイル マネージャー - データ バインディング
このサンプルでは、タイル マネージャー コントロールを JSON データ ソースにバインドする方法を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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" />
<!-- Modernizr/jQuery/jQuery UI -->
<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>
<script src="/data-files/recipes.js"></script>
</head>
<body>
<style type="text/css">
.dashboard {
color: #2b2b2b;
position: relative;
width: 100%;
height: 500px;
margin-top: -10px;
margin-left: -5px;
}
.ui-widget.ui-widget-content.dashboard {
border: 0;
}
.item-inner-container {
width:100%;
height:100%;
background-repeat:no-repeat;
background-position: center center;
background-size: cover;
}
.ig-layout-item, .ui-igtile-inner-container {
padding: 0;
margin: 0;
border: 0;
}
.minimized-title-container {
display: none;
background: rgba(255,255,255,0.75);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2ffffff,endColorstr=#b2ffffff);
position:absolute;
bottom: 0;
width: 100%;
height: 17%;
}
.max-title-and-ingredients-container, .minimized-title-container {
font-size: 18px;
font-family: Calibri;
overflow: hidden;
}
.minimized-title {
font-weight: bold;
padding-left: 5px;
display: table-cell;
height: 100%;
vertical-align: middle;
}
.ig-layout-item.ui-state-hover .minimized-title-container {
display: table;
}
.max-title-and-ingredients-container {
height: 100%;
background: rgba(255,255,255,0.7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2ffffff,endColorstr=#b2ffffff);
padding: 5px 10px;
box-sizing: border-box;
}
h3 {
font-size: 26px;
}
.ingredients {
list-style-type: none;
padding-top: 2px;
}
.ui-igtilemanager {
overflow: initial;
}
@media all and (max-width: 480px) {
h3 {
font-size: 22px;
}
.max-title-and-ingredients-container, .minimized-title-container {
font-size: 17px;
}
}
@media all and (max-width: 360px) {
.max-title-and-ingredients-container, .minimized-title-container {
font-size: 15px;
}
}
</style>
<div id="dashboard" class="dashboard">
</div>
<script type="text/javascript">
$(function () {
var options = {
width: "100%",
height: "500px",
marginLeft: 10,
marginTop: 10,
dataSource: recipes,
items: [
{ rowIndex: 0, colIndex: 0, rowSpan: 1, colSpan: 1 },
{ rowIndex: 0, colIndex: 1, rowSpan: 2, colSpan: 2 },
{ rowIndex: 1, colIndex: 0, rowSpan: 1, colSpan: 1 },
{ rowIndex: 2, colIndex: 0, rowSpan: 1, colSpan: 1 },
{ rowIndex: 2, colIndex: 1, rowSpan: 1, colSpan: 1 },
{ rowIndex: 2, colIndex: 2, rowSpan: 1, colSpan: 1 }
],
maximizedTileIndex: 1,
maximizedState: $("#maximized-state").html(),
minimizedState: $("#minimized-state").html()
}
$("#dashboard").igTileManager(options);
});
</script>
<script id="maximized-state" type="text/template">
<div class="item-inner-container" style="background-image: url(${picture});
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${picture}',sizingMethod='scale');">
<div class="max-title-and-ingredients-container">
<h3>${name}</h3>
<ul class="ingredients">
{{each ${ingredients} }}
<li>${ingredients.description}</li>
{{/each}}
</ul>
</div>
</div>
</script>
<script id="minimized-state" type="text/template">
<div class="item-inner-container" style="background-image: url(${picture});
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${picture}',sizingMethod='scale');">
<div class="minimized-title-container">
<div class="minimized-title">
${name}
</div>
</div>
</div>
</script>
</body>
</html>
var recipes = [
{
name: "Penne Arrabiata",
picture: "../../images/samples/tile-manager/Penne_Arrabiata.jpg",
ingredients: [
{ description: "400g penne pasta" },
{ description: "1/3 cup extra-virgin olive oil" },
{ description: "1 crushed garlic clove" },
{ description: "1 finely chopped onion" },
{ description: "800g can diced tomatoes" },
{ description: "1 chopped red chilly" },
{ description: "2 tablespoons small basil leaves" },
{ description: "2 teaspoons sugar" }
]
},
{
name: "Lamb Chops",
picture: "../../images/samples/tile-manager/Lamb_Chops.jpg",
ingredients: [
{ description: "8 lamb chops" },
{ description: "2 large crushed garlic cloves" },
{ description: "1 tablespoon fresh rosemary leaves" },
{ description: "1 teaspoon fresh thyme leaves" },
{ description: "3 tablespoons olive oil" },
{ description: "1 pinch cayenne pepper" },
{ description: "pink Himalayan salt" }
]
},
{
name: "Tomato Soup",
picture: "../../images/samples/tile-manager/Tomato_Soup.jpg",
ingredients: [
{ description: "1 kilogram plum tomatoes" },
{ description: "1 tablespoon tomato paste" },
{ description: "1 cup chopped onions" },
{ description: "1/2 cup chopped celery" },
{ description: "1 tablespoon sliced fresh basil" },
{ description: "salt and black pepper" },
{ description: "crème fraiche and fresh basil for decoration" }
]
},
{
name: "Caesar Salad",
picture: "../../images/samples/tile-manager/Caesar_Salad.jpg",
ingredients: [
{ description: "1 large lettuce" },
{ description: "2 skinless, boneless chicken breasts" },
{ description: "1 ciabatta loaf" },
{ description: "4 tablespoons olive oil" },
{ description: "1 garlic clove" },
{ description: "5 tablespoons mayonnaise" },
{ description: "1 tablespoon white wine vinegar" },
{ description: "2 tablespoons grated parmesan" },
]
},
{
name: "Strawberry Sorbet",
picture: "../../images/samples/tile-manager/Strawberry_Sorbet.jpg",
ingredients: [
{ description: "2 kilograms quartered, hulled strawberries " },
{ description: "2 cups water" },
{ description: "2 cups sugar" },
{ description: "1/4 cup fresh lime juice" },
{ description: "1/4 cup light corn syrup" },
{ description: "mint leaves for decoration" }
]
},
{
name: "Tiramisu",
picture: "../../images/samples/tile-manager/Tiramisu.jpg",
ingredients: [
{ description: "6 egg yolks" },
{ description: "4 tablespoons sugar" },
{ description: "1 package mascarpone cheese" },
{ description: "2 cups cooled strong espresso" },
{ description: "1 package ladyfingers" },
{ description: "3 tablespoons of unsweetened cocoa" }
]
}
];
<!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>
<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>
<script src="/js-data/recipes"></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 { IgTileManagerComponent } from 'igniteui-angular-wrappers';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
declare var jQuery: any;
declare var northwindProducts: any[];
@Component({
selector: 'my-app',
template: `
<ig-tile-manager widgetId="dashboard" [(options)]="options">
</ig-tile-manager>
<script id="maximized-state" type="text/template">
<div class="item-inner-container" style="background-image: url(${picture});
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${picture}',sizingMethod='scale');">
<div class="max-title-and-ingredients-container">
<h3>${name}</h3>
<ul class="ingredients">
{{each ${ingredients} }}
<li>${ingredients.description}</li>
{{/each}}
</ul>
</div>
</div>
</script>
<script id="minimized-state" type="text/template">
<div class="item-inner-container" style="background-image: url(${picture});
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${picture}',sizingMethod='scale');">
<div class="minimized-title-container">
<div class="minimized-title">
${name}
</div>
</div>
</div>
</script>
`
})
export class AppComponent {
private options: IgTileManager;
constructor() {
this.options = {
width: "100%",
height: "500px",
marginLeft: 10,
marginTop: 10,
dataSource: recipes,
items: [
{ rowIndex: 0, colIndex: 0, rowSpan: 1, colSpan: 1 },
{ rowIndex: 0, colIndex: 1, rowSpan: 2, colSpan: 2 },
{ rowIndex: 1, colIndex: 0, rowSpan: 1, colSpan: 1 },
{ rowIndex: 2, colIndex: 0, rowSpan: 1, colSpan: 1 },
{ rowIndex: 2, colIndex: 1, rowSpan: 1, colSpan: 1 },
{ rowIndex: 2, colIndex: 2, rowSpan: 1, colSpan: 1 }
],
maximizedTileIndex: 1,
maximizedState: $("#maximized-state").html(),
minimizedState: $("#minimized-state").html()
};
}
}
@NgModule({
bootstraps: [AppComponent],
declarations: [AppComponent, IgTileManagerComponent],
imports: [BrowserModule]
})
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/recipes"></script>
<!-- Ignite UI for jQuery ReactJS Files -->
<script src="https://unpkg.com/igniteui-react@1.0.1/igniteui-react.js"></script>
</head>
<body>
<div id="app">
<script type="text/babel">
var App = React.createClass({
render: function() {
var options = {
width: "100%",
height: "500px",
marginLeft: 10,
marginTop: 10,
dataSource: recipes,
items: [
{ rowIndex: 0, colIndex: 0, rowSpan: 1, colSpan: 1 },
{ rowIndex: 0, colIndex: 1, rowSpan: 2, colSpan: 2 },
{ rowIndex: 1, colIndex: 0, rowSpan: 1, colSpan: 1 },
{ rowIndex: 2, colIndex: 0, rowSpan: 1, colSpan: 1 },
{ rowIndex: 2, colIndex: 1, rowSpan: 1, colSpan: 1 },
{ rowIndex: 2, colIndex: 2, rowSpan: 1, colSpan: 1 }
],
maximizedTileIndex: 1,
maximizedState: $("#maximized-state").html(),
minimizedState: $("#minimized-state").html()
}
return (
<div><IgTileManager id="dashboard" options={options} /></div>
);
}
});
ReactDOM.render(
<App />,
document.getElementById("app")
);
</script>
<script id="maximized-state" type="text/template">
<div class="item-inner-container" style="background-image: url(${picture});
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${picture}',sizingMethod='scale');">
<div class="max-title-and-ingredients-container">
<h3>${name}</h3>
<ul class="ingredients">
{{each ${ingredients} }}
<li>${ingredients.description}</li>
{{/each}}
</ul>
</div>
</div>
</script>
<script id="minimized-state" type="text/template">
<div class="item-inner-container" style="background-image: url(${picture});
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${picture}',sizingMethod='scale');">
<div class="minimized-title-container">
<div class="minimized-title">
${name}
</div>
</div>
</div>
</script>
</div>
</body>
</html>