Latest web development tutorials

jQueryのモバイルフォーム

応答テーブル

応答性の設計は、一般的に、ユーザに、モバイルデバイスの様々な適応させるために使用されます。

私たちは、単純なクラス名を使用する必要があり、jQueryのモバイルは、自動的に画面のサイズに合わせてページの内容を調整します。

携帯端末とデスクトップ上のページ内容に応答して、フォームには良い適応を終了します。

リフロー(還流)カラムスイッチング 応答テーブルには二つのタイプがあります


逆流フォーム

還流モデルフォームが十分に大きい画面サイズ、画面サイズが十分に小さいが、すべてのデータが垂直になるように、水平方向に表示されています。

データ-役割= "表"と "UI応答性」カテゴリを追加するには、<table>要素でテーブルを作成します。

<表データ-役割= "テーブル "クラス= "UI応答性">

»をお試しください
ノート 応答の形式では、<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>
</表>

»をお試しください

私たちは、スイッチテーブルのテキストを変更するために、データ列-BTN-text属性を使用することができます。

<表データ-役割= "テーブル"データ・モードでは、= "columntoggle"クラス= "UI応答性」データ列-BTN-テキスト=" 私はショーをポイントまたは列を非表示に! "ID =" mytableは">

»をお試しください

表のスタイル

私たちは、テーブルに影を追加するには、「UI-影」クラスを使用します。

影を追加します

<表データのロール= "テーブル"データモード= "columntoggle"クラス= "UI応答性UI-影" ID = "mytableは">

»をお試しください

さらに、表のスタイルを設定するには、CSSを使用します。

すべての行の下に罫線を追加

<スタイル>
TR {
border-bottom:1pxの固体#1 d6d6d6;
}
</スタイル>

»をお試しください

背景偶数行を追加するには、<目>要素および追加]ボタンのための

<スタイル>
{番目
border-bottom:1pxの固体#1 d6d6d6;
}

TR:n番目の子(偶数){
背景:#e9e9e9;
}
</スタイル>

»をお試しください