このトピックは、Twitter Bootstrap の RWD クラスを用いて igGrid
™ コントロールのレスポンス Web デザイン (RWD) モードを構成する方法について説明します。
以下の表は、このトピックを理解するための前提条件として必要なトピックと記事の一覧です。
igGrid
コントロールの RWD モード機能およびこの機能が提供する機能性について概念的に説明します。igGrid
コントロールでレスポンス Web デザイン (RWD) モードを有効にする方法について説明します。RWD モードのプロファイルに使用される Twitter Bootstrap を構成できます。RWD モード機能 (infragistics.ui.grid.responsive.js) には、 Twitter-Bootstrap-framework-responsive CSS クラスをサポートするクラスがあります。このクラスは $.ig.BootstrapMode
という名前で、 responsiveModes
オプションでアクティブになります。
注: CSS クラス名を使用するには、Twitter Bootstrap CSS ファイルを含める必要があります。
以下はプロセスの概念的概要です。
プロファイルのアクティブ化に Bootstrap の JavaScript ユーティリティ クラスを使用するための RWD モード機能を構成する
Twitter Bootstrap を使用することにより、RWD モードの列の非表示、行および列の テンプレートを構成する
RWD モードのプロファイルで使用するための Twitter Bootstrap を構成するには:
プロファイルのアクティブ化にブートストラップの JavaScript ユーティリティ クラスを使用するための RWD モード機能を構成します。
ブートストラップ プロファイルのアクティブ化は RWD モードの responsiveModes
オプションで構成されます。これは、プロパティを持つオブジェクトで、RWD モードのプロファイルの名前および値は、プロファイルのアクティブ化を実装するクラスの小文字名です (「Mode」のサフィックスは無し)。この場合、1 つのクラスがプロファイルのアクティブ化のすべてを担当するため値はすべてのモード (デスクトップ、タブレット、電話) において「bootstrap」となります。
例:
JavaScript の場合:
responsiveModes: {
desktop: “bootstrap”,
tablet: “bootstrap”,
phone: “bootstrap”
}
Twitter Bootstrap を使用することにより、RWD モードの列の非表示、行および列の テンプレートを構成します。
RWD モード プロファイルに使用する Twitter Bootstrap を構成したら、列の非表示、行および列のテンプレートの機能は Twitter ブートストラップ プロファイルのアクティブ化実装を使用します。
注: 列の非表示のためだけにブートストラップ定義 CSS クラスを使用する計画である場合は、RWD モードの認識をブートストラップのものに切り替える必要はありません。RWD モードの列の非表示において、Twitter Bootstrap CSS ファイルを参照した後、直接
columnSettings.classes
プロパティと共に CSS クラスを使用できます。
以下の表は、Twitter Bootstrap CSS クラスを RWD の各構成に一致させるものです。
クラス | 電話 (最大 767 px) | タブレット (768 ~ 979 px) | デスクトップ (980 px 以上) |
---|---|---|---|
.visible-phone |
Visible | Hidden | Hidden |
.visible-tablet |
Hidden | Visible | Hidden |
.visible-desktop |
Hidden | Hidden | Visible |
.hidden-phone |
Hidden | Visible | Visible |
.hidden-tablet |
Visible | Hidden | Visible |
.hidden-desktop |
Visible | Visible | Hidden |
以下のサンプルは、レスポンシブ Web デザイン モード機能について紹介します。Twitter Bootstrap Framework ユーティリティ クラスを使用してプロファイルをアクティブにします。
オンラインで表示: GitHub