はじめに
簡単にスマートフォン向けサイトを作成するために活用できるjQuery Mobileを紹介します。前回に引き続き、今回もjQuery Mobile 1.3.0で登場した新機能を紹介します。
対象読者
- jQuery mobile、スマートフォンに興味があり、使ってみたい方
必要な環境と準備
執筆時点のjQueryの最新版は、2.0.0ですが、現時点でのjQuery MobileはjQuery 1.7～1.9対応を前提としているため、今回のサンプルでは1.9.1を用いています。第1回を参考に、ダウンロードしてください。また、jQueryプラグインの基本的な使い方は、第3回を参照してください。
また、執筆時点でのjQuery Mobileの最新版は、1.3.1です。1.3.0での不具合修正が主で新機能の追加はほぼありません。こちらからzipファイルでダウンロードできます。サンプルでは、htmlファイルと同じ階層にmobileというフォルダを作成しています。zipファイル中のimagesフォルダ（cssファイルが呼び出す画像ファイルが格納されたフォルダ）と、jquery.mobile-1.3.1.min.css（通常使用するcssファイル）とjquery.mobile-1.3.1.min.js（スクリプトファイル）をmobileフォルダに入れています。
レンジスライダーを使ったサイトの作成
まずは、jQuery Mobile 1.3.0から使用できるようになったレンジスライダーを使ったサイトを作成してみます。1.3.0登場以前からあったスライダーは1つの値しか指定できませんでしたが、レンジスライダーはある数値から、ある数値まで、といった数値の範囲を指定できるスライドスイッチです。下記は、実際にレンジスライダーを表示させたところです。
なお、jQuery Mobileはパソコンのブラウザでの表示も対応していますので、パソコンで見るとこうした形になります。
サンプルサイトのスクリプトを以下に示します。
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<!--1.スマートフォン画面での表示方法指定-->
<mata name="viewport" content="width=device-width,initial-scale=1" />
<title>jQuery Mobileサンプル（レンジスライダー）</title>
<!--2.CSSの読み込み-->
<link rel="stylesheet" type="text/css" href="./mobile/jquery.mobile-1.3.1.min.css" />
<!--3.jQueryの読み込み-->
<script language="javascript" type="text/javascript" src="./Scripts/jquery-1.9.1.min.js"></script>
<!--4.jQuery Mobileの読み込み-->
<script language="javascript" type="text/javascript" src="./mobile/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<!--5.ページの設定-->
<div data-role="page">
<!--6.ヘッダーの設定-->
<div data-role="header" data-theme="b">
<h1>jQuery Mobileサンプルページ（レンジスライダー）</h1>
</div>
<!--7.ページ内容の設定-->
<div data-role="content">
<!--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="200" value="180">
</div>
</div>
<!--9.フッターの設定-->
<div data-role="footer" data-theme="b">
<h3>Codezine</h3>
</div>
</div>
</body>
</html>
8.レンジスライダーの設定の中に、jQuery Mobile1.3.0より使用できるようになった「data-role="rangeslider"」という記述があります。単一の数値を指定するスライダーでは「data-role="slider"」ですが、sliderの前に範囲という意味の「range」が付きます。このdivタグの中で、レンジスライダーで動かせる数値の最小値と最大値、そしてハンドルが示す最小値と最大値の既定値を設定します。
単一の数値を指定するスライダーでは、タイトルにlabel要素でラベル付けをして、input要素でスライダーの数値の最小値と最大値、そしてハンドルの既定値を指定しますが、レンジスライダーは指定範囲最小値のハンドルと最大値のハンドルと2つあるので、label要素とinput要素が2セット必要です。
最小値のハンドルを設定するため、「身長の範囲（cm）」というタイトルにlabel要素で「slider_min」というIDでラベル付けをして、input要素で「type="range"」を指定し、name、IDに「slider_min」というlabel要素で設定したIDを指定、あとはスライダーで指定できる最小値を「min="100"」で100と設定、最大値を「max="200"」で200と設定し、最小値ハンドルの既定値を「value="150"」で150に設定します。
そして最大値のハンドルもlabel要素とinput要素で最小値同様に設定します。IDを「slider_max」に変更し、最大値ハンドルの既定値を「value="180"」で180に設定します。
