OSS で利用できる機能

タイルマネージャー - 概要

igTileManager は、データをタイルに配置して描画するレイアウトコントロールです。

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

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

タイルはレスポンシブグリッドレイアウトで表示され、コントロールは各タイルに対応するレイアウト構成を提供します。位置 (行スパンと列スパン) およびディメンション (行位置と列位置) を設定します。サンプルをすべて表示するには、メニューを参照してください。

コードビュー

JsFiddle で表示

クリップボードへコピー

                    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);

                    <div id="dashboard" class="dashboard">
    </div>

                    .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;
    }
}

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

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

Ignite UI for jQuery | サンプル

検索結果

タイルマネージャー - 概要

コードビュー

Ignite UI for jQuery | サンプル

検索結果

タイル マネージャー - 概要

コード ビュー

タイルマネージャー - 概要

コードビュー