jQueryモバイルテーブル
レスポンシブフォーム
レスポンシブデザインは、ユーザーのさまざまなモバイルデバイスに適応するために一般的に使用されます。
単純なクラス名を使用するだけで、jQuery Mobile が画面のサイズに応じてページのコンテンツを自動的に調整します。
レスポンシブ テーブルを使用すると、ページ コンテンツをモバイル デバイスやデスクトップ デバイスに適切に適応させることができます。
レスポンシブテーブルには、リフローと列切り替えの2種類があります。
リフローフォーム
リフローモデルテーブルは、画面サイズが大きい場合は横方向に表示され、画面サイズが小さい場合はすべてのデータが縦方向に表示されます。
テーブルを作成し、data-role="table" クラスと "ui-sensitive" クラスを <table> 要素に追加します。
|
応答性の高いテーブルの場合は、<thead> を含める必要があります。
<tbody> 要素。 行スパンまたはコルスパンを使用しないでください プロパティ; これら 2 つのプロパティは、レスポンシブ テーブルではサポートされていません。 |
|---|
カラム切り替え
列切り替えモデルは、幅が十分でない場合にデータを非表示にします。
カラムスイッチングのテーブル作成方法は以下のとおりです。
リーリーデフォルトでは、jQuery Mobile は最初にテーブルの右側の列を非表示にします。ただし、テーブル ヘッダー (
|
|
列の優先順位を指定しない場合、その列は常に存在し、非表示にはなりません。 |
|---|
上記の 2 つのコードを組み合わせると、列を切り替えられるテーブルを作成できるため、ユーザーはテーブルのどの列を非表示にするかをカスタマイズできます。
data-column-btn-text 属性を使用して、スイッチング テーブルのテキストを変更できます。
テーブルスタイル
「ui-shadow」クラスを使用してテーブルに影を追加します。
CSS を使用してテーブルをさらにスタイル設定します。
