バージョン

レスポンス Web デザイン (RWD) モード構成の概要 (igGrid)

トピックの概要

目的

このトピックは、列の非表示やテンプレートの構成など レスポンス Web デザイン (RWD) モードが構成される要素、およびこれらの要素が互いのどのように関係するのかを概念的に説明します。

前提条件

以下は、このトピックを理解するための前提条件として必要なトピックと記事の一覧です。

このトピックの内容

このトピックは、以下のセクションで構成されます。

レスポンス Web デザイン (RWD) 設計の構成の概要

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 モード テンプレートの構成

列 RWD モードテンプレートは columnSettings.configuration オプションを使用して構成されます。この構成オプションは、responsiveModes オプションで構成された名前などプロパティ付きオブジェクト リテラルを受け付けます。値は、テンプレート文字列を含むテンプレートとしての名前のついた単一のプロパティを持つオブジェクト リテラルです。

1 つの列のテンプレートはそれぞれ構成された profile で作成されます。プロファイルがアクティブ化されると、グリッドはプロファイル テンプレートに従ってレンダリングされます。

関連トピック

カスタム RWD モードの構成

RWD モードには、デスクトップ、タブレットおよび電話など、定義済みのプロファイルがあります。それに加えて、カスタム プロファイルを作成できます。カスタム プロファイルは、responsiveModes オプションでインラインで、または $.ig.ResponsiveMode クラスを拡張することにより作成できます。

関連トピック

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

オンラインで表示: GitHub