jQueryのモバイルフォーム
応答テーブル
応答性の設計は、一般的に、ユーザに、モバイルデバイスの様々な適応させるために使用されます。
私たちは、単純なクラス名を使用する必要があり、jQueryのモバイルは、自動的に画面のサイズに合わせてページの内容を調整します。
携帯端末とデスクトップ上のページ内容に応答して、フォームには良い適応を終了します。
リフロー(還流)とカラムスイッチング :応答テーブルには二つのタイプがあります。
逆流フォーム
還流モデルフォームが十分に大きい画面サイズ、画面サイズが十分に小さいが、すべてのデータが垂直になるように、水平方向に表示されています。
データ-役割= "表"と "UI応答性」カテゴリを追加するには、<table>要素でテーブルを作成します。
応答の形式では、<THEAD>と<TBODY>要素を含める必要があります。 ROWSPANやCOLSPAN属性を使用しないでください。応答テーブルは、これらの2つのプロパティでサポートされていません。 |
カラム切り替え
データ幅が十分でないときにカラムスイッチングモデルが非表示になります。
次のようにテーブルのカラムモードスイッチがある作成します。
<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable">
デフォルトでは、jQueryのモバイルは、最初のテーブルの右側の列が非表示になります。 しかし、あなたがテーブルの先頭(<目>)にデータ-priority属性を追加することで、隠された列の順序を指定することができ、データの優先度の値が1(最優先)から6(最低の優先度)にすることができます:
<th>I will never be hidden</th> <th data-priority="1">我是非常重要的列 - 我不会被隐藏</th> <th data-priority="3">我是重要的列 - 我可能被隐藏</th> <th data-priority="5"我是不怎么重要的列 - 我最先被隐藏</th>
あなたが優先順位が表示されていない指定しない場合、列は常に存在し、隠されることはありません。 |
ユーザーは、テーブルを非表示にする列をカスタマイズできるように、カラムスイッチングテーブルを作成するために一緒に上記のコード2枚の組み合わせ:
例
<表データ-役割= "テーブル "データモード= "columntoggle"クラス= "UI応答性" ID = "mytableは">
<THEAD>
<TR>
<番目のデータ優先度= "6 ">得意先</目>
<Thの>のCustomerName </目>
<番目のデータ優先度= "1 ">担当者名</目>
<番目のデータ優先度= "2 "> </目>住所
<データ優先度= "3番目の都市"> </目>
<番目のデータ優先度= "4 ">郵便番号</目>
<番目のデータ優先度= "5 ">国</目>
</ TR>
</ THEAD>
<TBODY>
<TR>
<TD> 1 </ TD>
<TD> Alfreds Futterkiste </ TD>
<TD>マリアアンダース</ TD>
<TD> ObereのStr。57 </ TD>
<TD>ベルリン</ TD>
<TD> 12209 </ TD>
<TD>ドイツ</ TD>
</ TR>
</ TBODY>
</表>
<THEAD>
<TR>
<番目のデータ優先度= "6 ">得意先</目>
<Thの>のCustomerName </目>
<番目のデータ優先度= "1 ">担当者名</目>
<番目のデータ優先度= "2 "> </目>住所
<データ優先度= "3番目の都市"> </目>
<番目のデータ優先度= "4 ">郵便番号</目>
<番目のデータ優先度= "5 ">国</目>
</ TR>
</ THEAD>
<TBODY>
<TR>
<TD> 1 </ TD>
<TD> Alfreds Futterkiste </ TD>
<TD>マリアアンダース</ TD>
<TD> ObereのStr。57 </ TD>
<TD>ベルリン</ TD>
<TD> 12209 </ TD>
<TD>ドイツ</ TD>
</ TR>
</ TBODY>
</表>
»をお試しください
私たちは、スイッチテーブルのテキストを変更するために、データ列-BTN-text属性を使用することができます。
例
<表データ-役割= "テーブル"データ・モードでは、= "columntoggle"クラス= "UI応答性」データ列-BTN-テキスト=" 私はショーをポイントまたは列を非表示に! "ID =" mytableは">
»をお試しください
表のスタイル
私たちは、テーブルに影を追加するには、「UI-影」クラスを使用します。
さらに、表のスタイルを設定するには、CSSを使用します。
背景偶数行を追加するには、<目>要素および追加]ボタンのための
<スタイル>
{番目
border-bottom:1pxの固体#1 d6d6d6;
}
TR:n番目の子(偶数){
背景:#e9e9e9;
}
</スタイル>
{番目
border-bottom:1pxの固体#1 d6d6d6;
}
TR:n番目の子(偶数){
背景:#e9e9e9;
}
</スタイル>
»をお試しください