libro
www.tuyano.com
jQuery Mobileによるスマートフォン用Webサイト作成入門

より高度なGUI部品を使おう！ (4/5)

作成:2011-05-30 09:44
更新:2012-03-29 10:21

■jQuery UIの機能を使ってしまおう！

jQuery Mobileは、jQueryのプラグインです。ということは、jQueryの機能も基本的には使えることになります。jQuery Mobileに用意されているGUI部品だけじゃたりないな……と思うなら、jQueryから借りてくればいいのです。

jQueryには、リッチなGUIを提供する「jQuery UI」という拡張ライブラリが用意されています。これを利用することで、jQuery用のGUIを使えるようになります。jQuery UIの中のGUI部品ですから、モバイル用に作られているわけではないので、ものによってはスマートフォンでは使いにくかったりするものもありますが、使い方によってはずいぶんとGUIのバリエーションが広がります。

jQuery UIを使うためには、jQuery UIのライブラリと、そのためのスタイルシートを読み込ませる必要があります。2011年８月現在、最新のStable版は1.8.16となっているようです。このバージョンのライブラリとスタイルシートは、CDNで公開されており、タグを書くだけで利用することができます。
<link rel="stylesheet" 
    href="http://code.jquery.com/ui/1.8.16/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>
これは、デフォルトのテーマによるjQuery UIを読み込むためのタグ例です。jQuery UIでは、jQuery Mobileのようにテーマが色々と用意されています。とりあえず、基本のテーマを使ってみることにしましょう。

実際の利用例を下のリスト欄に掲載しておきました。ここでは、「Date Picker」というGUI部品を画面に配置しています。これは、「カレンダー」のGUIです。これは、以下のようなタグとして用意してあります。
<div id="datepicker">Date Picker</div>
何の変哲もない、ただの<div>タグですね。これ自体は、特別なものは何もありません。重要なのは、その後にある<script>タグです。
$('#datepicker').datepicker();
これが、Date Pickerを作成している部分です。datepickerメソッドを呼び出すことで、そのタグにカレンダーを組み込むようになっているのです。実際にスマートフォンの画面にカレンダーがパッと出てくると、けっこう感動しますよ！

（……実をいえば、jQuery Mobile用にDate Pickerは移植版が作られていたりするのですが、ここでは「jQuery UIを使う」というサンプルとして考えてください）

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">

	<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<title>Sample</title>
		
	<link rel="stylesheet" 
		href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
	<script type="text/javascript" 
		src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" 
		src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

	<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.16/themes/base/jquery-ui.css" />
	<script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>
	</head>
	
	<body>

		<div id="home" data-role="page">
			<div data-role="header">
				<h1>Hello</h1>
			</div>
			<div data-role="content">
				<div id="datepicker">Date Picker</div>
			</div>
			<script type="text/javascript">
			$('#datepicker').datepicker();
			</script>
		</div>
		
	</body>
</html>
※関連コンテンツ

「jQuery Mobileによるスマートフォン用Webサイト作成入門」に戻る