OSS で利用できる機能
タイル マネージャー - カスタム サイズ タイル
このサンプルは、各列に特定の幅および高さを指定してタイル マネージャーをインスタンス化する方法を紹介します。
このサンプルは 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/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>
<script src="/data-files/js-controls.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/philosophers.js"></script>
</head>
<body>
<style type="text/css">
#philosophers {
margin-top: -10px;
margin-left: -5px;
}
.item-container {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.maximized-container {
height: 100%;
position: relative;
}
.item-name {
margin: 0;
color: #FAFAFA;
font-size: 20px;
text-shadow: 2px 2px 4px #424242;
margin-left: 5px;
}
.item-quote {
color: #424242;
font-size: 30px;
background: rgba(255,255,255,0.8);
position: absolute;
bottom: 0;
padding: 10px;
}
.item-name-maximized {
font-size: 30px;
}
.ig-tile-minimize-button {
position: relative;
}
.ig-layout-item {
padding: 0;
border: none;
}
.ui-igtile-inner-container:hover {
background-color: #EEEEEE;
}
</style>
<div id="philosophers">
</div>
<script type="text/javascript">
$(function () {
$("#philosophers").igTileManager({
width: "100%",
height: "620px",
marginLeft: 10,
marginTop: 10,
dataSource: philosophers,
columnHeight: ["200px", "150px", "*"],
columnWidth: ["30%", "*", "250px"],
items: [
{ rowIndex: 0, colIndex: 0, rowSpan: 1, colSpan: 1 },
{ rowIndex: 0, colIndex: 1, rowSpan: 2, colSpan: 1 },
{ rowIndex: 0, colIndex: 2, rowSpan: 1, colSpan: 1 },
{ rowIndex: 1, colIndex: 0, rowSpan: 2, colSpan: 1 },
{ rowIndex: 1, colIndex: 2, rowSpan: 1, colSpan: 1 },
{ rowIndex: 2, colIndex: 1, rowSpan: 1, colSpan: 2 }
],
maximizedState: $("#maximized-state").html(),
minimizedState: $("#minimized-state").html()
});
});
</script>
<script id="maximized-state" type="text/template">
<div class="item-container" style="background-image: url(${picture});">
<div class="maximized-container">
<h3 class="item-name item-name-maximized">${name}</h3>
<div class="item-quote">${quote}</div>
</div>
</div>
</script>
<script id="minimized-state" type="text/template">
<div class="item-container" style="background-image: url(${picture});">
<h3 class="item-name">${name}</h3>
</div>
</script>
</body>
</html>
var controls = [
{
name: "igGrid",
description: "igGrid は jQuery グリッドです。業務用機能、タッチ サポート、およびレスポンシブ web デザイン機能を提供します。 igGrid を JSON、XML、HTML テーブル、.NET コレクション、.NET DataTable などのデータ ソースにバインドできます。 igGrid は、KnockoutJS、History.js、JsRender、および Bootstrap などの人気のあるオープン ソース ライブラリと操作します。"
},
{
name: "igHierarchicalGrid",
description: "igHierarchicalGrid は igGrid に基づいて実装されます。階層データ セットを表示する機能を提供します。 igHierarchicalGrid を JSON、XML、.NET コレクション、.NET DataSet などのデータ ソースにバインドできます。 ロードオンデマンド機能を使用すると、ビューの必要なデータのみを動的にダウンロードします。"
},
{
name: "igTreeGrid",
description: "igTreeGrid コントロールはデータをツリーのような表構造に表示する jQuery ウィジェットです。コントロールは igHierarchicalGrid のように階層データを表示します。igTreeGrid の子レイアウトはルート レイアウトと同じ列定義があります。階層データを同じ列と描画すると、ツリー グリッドの描画速度が速くなり、メモリおよび DOM フットプリントは低くなります。"
},
{
name: "igDataChart",
description: "igDataChart は HTML5 チャート コントロールです。大きいデータ セットを描画し、ツールチップ、十字線、グラデーション、強調表示、アニメーションなどの機能を提供します。"
},
{
name: "igPieChart",
description: "igPieChart は、HTML5 による Web アプリケーションで円グラフを描画するチャート作成用コントロールです。これはウェブ ページに円グラフをプロットする際に新しい HTML5 canvas タグを使用します。 igPieChart の主な機能には、凡例、テンプレートに従ったツール チップ、円の大きさのコントロール、ラベル位置のコントロール、開始角度、拡がりの方向、飛び出たスライスとその中心からの位置といったものがあります。サンプルをすべて表示するには、メニューを参照してください。"
},
{
name: "igDoughnutChart",
description: "igDoughnutChart は円チャートに似たデータを表示し、共通の中心部の周りに複数のデータ セットを表示できます。 igDoughnutChart の凡例を作成し、カテゴリ、ラベル、およびツールチップを定義できます。"
},
{
name: "igFunnelChart",
description: "igFunnelChart コントロールは igPieChart のようです。別のカテゴリに関連する値を表示します。igFunnelChart の表示される値の合計は、1 つのエンティティの合計である必要がありません。ファンネル スライスは、通常、最大から最小へ、または最小から最大へ値を並び替えて表示します。 igFunnelChart はスライス選択、ツールチップ、ベジエ曲線の描画をサポートします。サンプルをすべて表示するには、メニューを参照してください。"
},
{
name: "igRadialGauge",
description: "igRadialGauge コントロールは、ゲージを表示するデータ ビジュアライゼーション ツールです。スケール、目盛り、ラベル、針、および範囲などの複数の視覚要素を含むことができます。 minimumValue および maximumValue 値を設定してスケールを作成し、value プロパティを設定すると、針の値を設定します。 ゲージは、スケールの視覚的な合図である範囲もサポートします。サンプルをすべて表示するには、メニューを参照してください。"
},
{
name: "igSparkline",
description: "スパークライン チャート コントロールは、データのトレンド、変更、パターンをコンパクトで分かりやすいチャートで表示します。 以下のチャート タイプをサポートします: 折れ線、柱状、エリア、および Win-Loss。マーカー、ツールチップ、標準範囲、およびトレンドラインを使用して詳細を表示します。 サンプルをすべて表示するには、メニューを参照してください。"
},
{
name: "igHtmlEditor",
description: "igHtmlEditor コントロールは、標準 HTML 編集機能を備えた jQuery HTML エディター コントロールです。書式設定オプションは、フォント フェイス、フォント サイズ、テキスト、イメージの調整機能があり、リンクとテーブルをサポートしています。ツールバーおよびボタンをカスタマイズし、インターフェイスに機能を追加できます。 サンプルをすべて表示するには、メニューを参照してください。"
},
{
name: "igTree",
description: "igUpload は、あらゆるタイプのファイルをアップロードし、ブラウザーからサーバーへファイルを送信できるようにするコントロールです。 単一のアップロード (デフォルト) または同期の複数のファイル アップロードを処理します。 サーバー側の構成を使用し、igUpload はファイル アップロード操作で進行状況を表示します。"
},
{
name: "igNotifier",
description: "Notification ウィジェットは、システム状態に関連する情報を表示します。また、igValidator および igEditors ウィジェットにバインドできます。 4 つのメッセージ状態があります: success、error、warning、および info。メッセージが inline または popover モードで表示できます。auto モードは自動的にモードを選択します。popover モードで top、left、right、または bottom の 4 つの方向にメッセージを表示できます。選択した方向で表示するスペースがない場合、次の方向に表示されます。順序は top > left > right > bottom です。"
}
];