このトピックは、列の非表示やテンプレートの構成など レスポンス Web デザイン (RWD) モードが構成される要素、およびこれらの要素が互いのどのように関係するのかを概念的に説明します。
以下は、このトピックを理解するための前提条件として必要なトピックと記事の一覧です。
igGrid
コントロールの RWD モード機能およびこの機能が提供する機能性について概念的に説明します。igGrid
コントロールでレスポンス Web デザイン (RWD) モードを有効にする方法について説明します。このトピックは、以下のセクションで構成されます。
レスポンス Web デザイン (RWD) モードは、以下の機能を取り扱うよう構成できます。
列の非表示とテンプレートに基づいた構成の機能は、Twitter Bootstrap RWD クラスで使用するよう構成できます。(詳細は、「ブートストラップのサポートの構成 」トピックを参照)
列の 表示は、以下の方法で構成できます。
CSS クラスを利用する - CCS 3 メディア クエリを使用各クラス コレクションは、igGrid API を通して列を表示または非表示するために使用される表示要素を作成するかどうかがテストされます。
注: CSS メディア クエリは、古いブラウザはサポートしません。詳細は、「 CSS メディア クエリ ブラウザのサポート」を参照してください。
CSS クラスは、 columnSettings.classes
プロパティで構成されます。
設定を構成する - 構成の設定は、定義済み RWD モードのプロファイルおよび認識されたアクティブなプロファイルを使用して、列の表示を決定します。 デフォルトでは、構成設定は CSS 3 メディア クエリも使用して RWD モードのプロファイルを決定します。しかし、CSS 3 に依存することを望まない場合は、$.ig.ResponsiveMode
クラスを拡張すればウィンドウのサイズ変更イベントを使用できます。
関連トピック
列 RWD モードテンプレートは columnSettings.configuration
オプションを使用して構成されます。この構成オプションは、responsiveModes
オプションで構成された名前などプロパティ付きオブジェクト リテラルを受け付けます。値は、テンプレート文字列を含むテンプレートとしての名前のついた単一のプロパティを持つオブジェクト リテラルです。
1 つの列のテンプレートはそれぞれ構成された profile で作成されます。プロファイルがアクティブ化されると、グリッドはプロファイル テンプレートに従ってレンダリングされます。
関連トピック
RWD モードには、デスクトップ、タブレットおよび電話など、定義済みのプロファイルがあります。それに加えて、カスタム プロファイルを作成できます。カスタム プロファイルは、responsiveModes
オプションでインラインで、または $.ig.ResponsiveMode
クラスを拡張することにより作成できます。
関連トピック
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
列非表示の構成 (igGrid、RWD モード): このトピックでは、コード例を用いて、レスポンス Web デザイン (RWD) モードで igGrid
コントロール用に列を非表示にする方法について説明します。
行および列テンプレートの構成 (igGrid、RWD モード): このトピックは、コード例を用いて igGrid
コントロールの各 レスポンス Web デザイン (RWD) モード プロファイルに対して行と列を定義する方法、およびアクティブな RWD モードの切り替え時のテンプレートの自動変更を構成する方法について説明します。
カスタム レスポンス Web デザイン (RWD) プロファイルの作成 (igGrid): このトピックは、コード例を使用して、igGrid
コントロールのカスタム レスポンシブ Web デザイン (RWD) モード プロファイルを作成する方法について説明します。
ブートストラップ サポートの構成 (igGrid、RWD モード): このトピックは、Twitter Bootstrap の RWD クラスを用いて igGrid
コントロールの レスポンス Web デザイン (RWD) モードを構成する方法について説明します。
オンラインで表示: GitHub