レンジスライダー使用時に注意すべき点
ここで注意しなければならないのは、2つ並べて書くinput要素の「min」と「max」で指定するスライダーの最小値・最大値は共に同じ数値にしなければなりません。
最大値ハンドルの方だけ、input要素内で「max="250"」と指定したコードを以下に示します。
［リスト2］最大値ハンドルのmax数値を変更したもの（改変部のみ）（jQuery_Mobile_sample1_1.html）
<!--8.レンジスライダーの設定-->
<div data-role="rangeslider">
<label for="slider_min">身長の範囲（cm）</label>
<input type="range" name="slider_min" id="slider_min" min="100" max="200" value="150">
<label for="slider_max">身長の範囲（cm）</label>
<input type="range" name="slider_max" id="slider_max" min="100" max="250" value="180">
</div>
最小値のハンドルと最大値のハンドルを重ねた状態の図を以下に示します。このようにハンドルが重なっているにもかかわらず、最小値ハンドルでは200、最大値ハンドルでは250という数値を指し示してしまっています。これだと数値範囲の指定が極めて分かりづらくなるので、input要素内の「min」と「max」は同じ値にする必要があります。
図3 最小値と最大値のハンドルが重なっているのに、違う値を示している状態
画面幅に応じたテーブルの表示
jQuery Mobile 1.3.0より「レスポンシブルテーブル」という画面幅に応じたテーブルの表示が可能になりました。「レスポンシブルテーブル」には2つのタイプがあります。1つは画面幅が広い時はすべての列項目を表示し、画面幅が狭い時は一部の列だけを表示し、他の列項目を見たい場合はボタンで選択させるタイプです。もう一つのタイプは、画面幅が広い時のすべての列項目を、画面幅が狭い時は行項目にして表示するタイプです。2つのタイプをそれぞれ紹介します。
画面幅が狭い時、一部の列だけを表示するタイプ
画面幅が狭い時、一部の列だけを表示するタイプのレスポンシブルテーブルをパソコンで表示した画面は以下のとおりです。画面幅が広いので、すべての項目が表示されています。
図4 パソコンで見たjQuery Mobile サンプル（2）画面
しかしスマートフォンを縦にした状態でこのサンプルを見ると、一部の列しか表示されていません。
図5 スマートフォンを縦にした状態で見たjQuery Mobile サンプル（2）画面
