OSS で利用できる機能
タイル マネージャー - 縮小可能なスプリッター
このサンプルはスプリッター コントロールの展開/縮小機能を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このコントロールは、タイル マネージャによって使用され、レイアウト操作におけるユーザー エクスペリエンスを向上します。展開/縮小動作は、関連タイル表示のすばやい切り替えが可能で、小さなデバイスにおいて大変便利です。また、追加の CSS を使用して展開/縮小機能をカスタマイズできます。
コード ビュー
クリップボードへコピー
<!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>
</head>
<body>
<style type="text/css">
#dashboard {
border: 1px solid #bcbcbc;
}
#dashboard .ig-layout-item {
z-index: 2;
}
.minimized-state-header {
font-size: 16px;
margin-bottom: 6px;
}
.minimized-state-body {
font-size: 14px;
}
.maximized-state-header {
font-size: 18px;
margin-bottom: 8px;
}
.maximized-state-body {
font-size: 16px;
}
.ui-igtilemanager.ui-igsplitter .ui-igsplitter-splitbar-vertical,
.ui-igsplitter-splitbar-vertical {
width: 6px;
}
.ui-igtilemanager.ui-igsplitter .ui-igsplitter-collapse-single-button,
.ui-igsplitter-collapse-single-button {
z-index: 1;
width: 25px;
height: 25px;
border: 1px solid #bcbcbc;
border-radius: 20px;
margin-left: -11px;
}
.ui-igsplitter-collapse-single-button .ui-icon-triangle-1-w {
background: url(/images/samples/tile-manager/collapsible-splitter/left-arrow-gray.svg) 0px 0px/16px 16px !important;
}
.ui-igsplitter-collapse-single-button.ui-state-hover .ui-icon-triangle-1-w {
background-image: url(/images/samples/tile-manager/collapsible-splitter/left-arrow-white.svg) !important;
}
.ui-igsplitter-collapse-single-button .ui-icon-triangle-1-e {
background: url(/images/samples/tile-manager/collapsible-splitter/right-arrow-gray.svg) 0px 0px/16px 16px !important;
}
.ui-igsplitter-collapse-single-button.ui-state-hover .ui-icon-triangle-1-e {
background-image: url(/images/samples/tile-manager/collapsible-splitter/right-arrow-white.svg) !important;
}
.ui-igsplitter-collapse-single-button .ui-icon:before,
.ui-igsplitter-collapse-single-button.ui-state-hover .ui-icon:before {
content: '';
}
body .ui-igsplitter-splitbar-vertical:last-child .ui-igsplitter-collapse-single-button {
display: none;
}
</style>
<div id="dashboard">
</div>
<script type="text/javascript">
$(function () {
$('#dashboard').igTileManager({
width: "100%",
height: "500px",
columnWidth: 200,
columnHeight: 200,
marginLeft: 20,
marginTop: 20,
animationDuration: 300,
dataSource: controls,
splitterOptions: {
enabled: true,
collapsed: false,
collapsible: true
},
rendered: function (evt, ui) {
ui.owner.maximize(ui.owner.minimizedTiles().first());
},
minimizedState: "<h3 class='minimized-state-header'>${name}</h3><p class='minimized-state-body'>${description}</p>",
maximizedState: "<h3 class='maximized-state-header'>${name}</h3><p class='maximized-state-body'>${description}</p>"
});
});
</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 です。"
}
];