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">
ul {
list-style-type: none;
font-family: Verdana;
}
#layout {
position: relative;
}
.ig-layout-item {
font-size: 20px;
}
@media all and (max-width: 480px) {
.ig-layout-item {
font-size: 16px;
}
}
</style>
</head>
<body>
<div id="layout"></div>
<script src="/TypeScriptSamples/layout-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" />
$(function () {
$('#layout').on("iglayoutmanageritemrendered", function (event, args) {
args.item.append("<ul><li>colspan: " + args.itemData.colSpan + "</li><li>rowspan: " + args.itemData.rowSpan + "</li></ul></span>");
// get the element
if (args.itemData.colSpan == 2 && args.itemData.rowSpan == 2) {
args.item.css("background-color", "#eee");
args.item.css("color", "#555");
} else if (args.itemData.rowSpan == 1 && args.itemData.colSpan == 1) {
if (args.itemData.rowIndex == 0) {
args.item.css("background-color", "#2CBDF9");
args.item.css("color", "#FFF");
} else {
args.item.css("background-color", "#FFA72D");
args.item.css("color", "#FFF");
}
} else {
args.item.css("background-color", "#2CBDF9");
args.item.css("color", "#FFF");
}
});
$('#layout').igLayoutManager({
layoutMode: "grid",
width: "100%",
height: "600px",
gridLayout: {
cols: 3,
rows: 3
},
items: [
{
rowSpan: 2,
colSpan: 2,
colIndex: 0,
rowIndex: 0
},
{
rowSpan: 1,
colSpan: 1,
rowIndex: 0,
colIndex: 2
},
{
rowSpan: 1,
colSpan: 1,
rowIndex: 1,
colIndex: 2
},
{
rowSpan: 1,
colSpan: 3,
colIndex: 0,
rowIndex: 2
}
]
});
});