OSS で利用できる機能
タイル マネージャー - TypeScript との連携
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このサンプルでは、リード タイルを定義する構成を持つタイル マネージャー コントロールを TypeScript で使用する方法を紹介します。
リード タイルは新しく選択されるタイルと交換します。タイルの上に配置されるタブで別の分類を選択できます。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html>
<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" />
<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>
<style type="text/css">
body {
font-family: 'Segoe UI', 'Arial', 'Helvetica', 'sans-serif';
}
ul {
text-decoration: none;
padding: 0;
margin: 0;
list-style: none;
}
.ui-igtile-maximized .ui-igtile-inner-container {overflow: hidden;}
#car-tabs {
margin: auto;
}
.dashboard {
font-size: 0.85em!important;
position: relative;
height: 660px;
}
.dashboard img {
width: 100%;
}
.dashboard figure {
margin:0;
}
.dashboard figcaption {
font-size: 1.1em;
background-color: #454545;
color: #fff;
padding: 10px 0 10px 10px;
}
.dashboard .ui-igtile-maximized figcaption {
background-color: #2cbdf9;
-webkit-transition:0.5s;
}
.dashboard div ul {
border: 1px solid #ececec;
padding: 5px 5px 10px 5px;
-webkit-transition:0.5s;
}
.dashboard div ul li:nth-child(n+2):before {
content: "• ";
color: #2cbdf9;
}
.dashboard div ul li:first-child {
color: #2cbdf9;
}
#car-tabs.ui-tabs .ui-tabs-panel, #car-tabs.ui-tabs-nav, #car-tabs.ui-tabs .ui-tabs-nav li.ui-state-default {
border: none;
padding: 0;
}
#car-tabs.ui-tabs .ui-tabs-nav li.ui-state-active a {
background-color: #2cbdf9!important;
}
#car-tabs.ui-tabs .ui-tabs-nav li.ui-state-default a {
background-color: #95defc;
}
#car-tabs.ui-tabs .ui-tabs-nav li.ui-state-hover a {
background-color: #6bd1fb;
}
#car-tabs.ui-tabs-anchor {
text-shadow: none;
color: #fff!important;
}
#car-tabs.ui-tabs-anchor:hover {
text-decoration: underline;
}
#car-tabs.ui-tabs {
border-radius: 0;
}
h1.hOne {
margin: 0;
clear: none;
float: none;
font-size: 2em;
}
</style>
</head>
<body>
<h1 class="hOne">Infragistics 自動車販売代理店</h1>
<h3>自動車メーカーを選択して参照します</h3>
<div id="car-tabs">
<ul>
<li><a href="#magarcedesDashboard">Magarcedes</a></li>
<li><a href="#hoidaDashboard">Hoida</a></li>
<li><a href="#pausheDashboard">Paushe</a></li>
</ul>
<div id="magarcedesDashboard" class="dashboard"></div>
<div id="hoidaDashboard" class="dashboard"></div>
<div id="pausheDashboard" class="dashboard"></div>
</div>
<script src="/TypeScriptSamples/tile-manager/typescript.js"></script>
</body>
</html>
/// <reference path="/js/typings/jquery.d.ts" />
/// <reference path="/js/typings/jqueryui.d.ts" />
/// <reference path="/js/typings/igniteui.d.ts" />
class Info {
description: string
constructor(_description: string) {
this.description = _description;
}
}
class CarData {
name: string;
picture: string;
priceRange: string;
extras: Info[];
constructor(_name: string, _picture: string, _priceRange: string, _extras: Info[]) {
this.name = _name;
this.picture = _picture;
this.priceRange = _priceRange;
this.extras = _extras;
}
addExtra(_extra) {
this.extras.push(_extra);
}
}
var Magarcedes: CarData[] = [];
Magarcedes.push(new CarData("2013 LSL AMG", "/images/samples/tile-manager/car-dealership/shutterstock_139519967.jpg",
"$199,500 - $206,000", [new Info("0-100 - 3.8 秒"), new Info("最大スピード: 317 km/h")]));
Magarcedes.push(new CarData("2013 363 AMG", "/images/samples/tile-manager/car-dealership/shutterstock_38284540.jpg",
"$57,130 - $61,430", [new Info("0-60 - 4.4 秒"), new Info("最大スピード: 250 km/h")]));
Magarcedes.push(new CarData("2013 T350", "/images/samples/tile-manager/car-dealership/shutterstock_25369924.jpg",
"$47,542 - $51,120", [new Info("4MATIC 四輪駆動"), new Info("0-60 - 5.5 秒"), new Info("3.5l v6 エンジン")]));
Magarcedes.push(new CarData("2013 500S", "/images/samples/tile-manager/car-dealership/shutterstock_4417342.jpg",
"$92,350 - $212,000", [new Info("ナイトビュー アシスト"), new Info("駐車距離ヘルパー")]));
Magarcedes.push(new CarData("2013 M350L", "/images/samples/tile-manager/car-dealership/shutterstock_4028761.jpg",
"$47,681 - $51,270", [new Info("3.0L BlueTEC ディーゼル エンジン v6 エンジン"), new Info("4MATIC 四輪駆動")]));
Magarcedes.push(new CarData("2013 CSL", "/images/samples/tile-manager/car-dealership/shutterstock_2564520.jpg",
"$74,500 - $84,556", [new Info("4.6L v8 エンジン"), new Info("0-60 - 5.05 秒")]));
var Hoida: CarData[] = [];
Hoida.push(new CarData("2013 Candy", "/images/samples/tile-manager/car-dealership/shutterstock_57034834.jpg",
"$21,661 - $29,404", [new Info("ガソリン I4 2.5L エンジン"), new Info("高速道路の燃料効率 35 mpg")]));
Hoida.push(new CarData("2013 RA4V 4WD", "/images/samples/tile-manager/car-dealership/shutterstock_117299389.jpg",
"$23,301 - $28,232", [new Info("四輪駆動"), new Info("高速道路の燃料効率 29 mpg")]));
Hoida.push(new CarData("2013 Coralla", "/images/samples/tile-manager/car-dealership/shutterstock_32589022.jpg",
"$16,191 - $20,297", [new Info("ガソリン I4 1.8L エンジン"), new Info("高速道路の燃料効率 34 mpg")]));
Hoida.push(new CarData("2013 Pruis C", "/images/samples/tile-manager/car-dealership/shutterstock_134383163.jpg",
"$19,058 - $23,163", [new Info("ガソリン/電力 I4 1.5L エンジン"), new Info("高速道路の燃料効率 46 mpg")]));
Hoida.push(new CarData("2013 Cruiser", "/images/samples/tile-manager/car-dealership/shutterstock_60821281.jpg",
"$73,676 - $73,676", [new Info("ガソリン V8 5.7L エンジン"), new Info("四輪駆動")]));
Hoida.push(new CarData("2013 TLC", "/images/samples/tile-manager/car-dealership/shutterstock_27395866.jpg",
"$25,566 - $47,651", [new Info("ガソリン V8 5.7L エンジン"), new Info("高速道路の燃料効率 17 mpg")]));
var Paushe: CarData[] = [];
Paushe.push(new CarData("2013 CST", "/images/samples/tile-manager/car-dealership/shutterstock_38288989.jpg",
"$39,095 - $59,090", [new Info("利用可能な 四輪駆動"), new Info("利用可能な タッチ画面の音声認識付きポップアップ ナビゲーション"),
new Info("レザー シート"), new Info("リモート起動")]));
Paushe.push(new CarData("2013 CST-V", "/images/samples/tile-manager/car-dealership/shutterstock_32949850.jpg",
"$64,515 - $74,770", [new Info("0-100 - 4.0 秒"), new Info("左右促進を測定する G メーター")]));
Paushe.push(new CarData("2013 ECS", "/images/samples/tile-manager/car-dealership/shutterstock_7391134.jpg",
"$63,170 - $82,875", [new Info("暖房/冷房付き前座席"), new Info("利用可能な マグネット サスペンション システム")]));
Paushe.push(new CarData("2013 AST", "/images/samples/tile-manager/car-dealership/shutterstock_23082346.jpg",
"$39,095 - $59,090", [new Info("利用可能な 新車 272 HP 2.0L ターボ エンジン"), new Info("利用可能な ナビゲーション")]));
Paushe.push(new CarData("2013 SXR Crossover", "/images/samples/tile-manager/car-dealership/shutterstock_134383139.jpg",
"$37,330 - $58,220", [new Info("利用可能な UltraView サンルーフ"), new Info("利用可能な 四輪駆動")]));
Paushe.push(new CarData("2013 CST-V Wagon", "/images/samples/tile-manager/car-dealership/shutterstock_117299326.jpg",
"$64,515 - $75,345", [new Info("高さメモリー付きパワー リフトゲート"), new Info("バックアップ カメラ")]));
var Cars: CarData[][] = [];
Cars.push(Magarcedes);
Cars.push(Hoida);
Cars.push(Paushe);
$(function () {
var activated: boolean[] = [false, false, false, false],
options: IgTileManager = {
columnWidth: 210,
columnHeight: 210,
marginLeft: 10,
marginTop: 10,
dataSource: Cars,
items: [
{ rowIndex: 0, colIndex: 0, rowSpan: 2, colSpan: 2 },
{ rowIndex: 0, colIndex: 2, rowSpan: 1, colSpan: 1 },
{ rowIndex: 1, colIndex: 2, 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: 0,
maximizedState: '<figure><figcaption>${name}</figcaption><img src="${picture}" title="${Name}" alt="error" /></figure><ul><li>価格: ${priceRange}</li>' +
'{{each ${extras} }}<li>${extras.description}</li>{{/each}}</ul>',
minimizedState: '<figure><figcaption>${name}</figcaption><img src="${picture}" title="${Name}" alt="error" />'
};
// First time initialization of the tab that will be shown on page load
options.dataSource = Cars[0];
activated[0] = true;
$('#magarcedesDashboard').igTileManager(options);
var tabOptions: JQueryUI.TabsOptions = {
activate: function (event, ui) {
var index = ui.newTab.index();
if (!activated[index]) {
options.dataSource = Cars[index];
ui.newPanel.igTileManager(options);
activated[index] = true;
} else {
ui.newPanel.igTileManager('reflow');
}
}
}
$('#car-tabs').tabs(tabOptions);
});