back
より高度なGUI部品を使おう！ (4/5)
■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で公開されており、タグを書くだけで利用することができます。
実際の利用例を下のリスト欄に掲載しておきました。ここでは、「Date Picker」というGUI部品を画面に配置しています。これは、「カレンダー」のGUIです。これは、以下のようなタグとして用意してあります。
（……実をいえば、jQuery Mobile用にDate Pickerは移植版が作られていたりするのですが、ここでは「jQuery UIを使う」というサンプルとして考えてください）
jQueryには、リッチなGUIを提供する「jQuery UI」という拡張ライブラリが用意されています。これを利用することで、jQuery用のGUIを使えるようになります。jQuery UIの中のGUI部品ですから、モバイル用に作られているわけではないので、ものによってはスマートフォンでは使いにくかったりするものもありますが、使い方によってはずいぶんとGUIのバリエーションが広がります。
jQuery UIを使うためには、jQuery UIのライブラリと、そのためのスタイルシートを読み込ませる必要があります。2011年８月現在、最新のStable版は1.8.16となっているようです。このバージョンのライブラリとスタイルシートは、CDNで公開されており、タグを書くだけで利用することができます。
<link rel="stylesheet"これは、デフォルトのテーマによるjQuery UIを読み込むためのタグ例です。jQuery UIでは、jQuery Mobileのようにテーマが色々と用意されています。とりあえず、基本のテーマを使ってみることにしましょう。
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>
実際の利用例を下のリスト欄に掲載しておきました。ここでは、「Date Picker」というGUI部品を画面に配置しています。これは、「カレンダー」のGUIです。これは、以下のようなタグとして用意してあります。
<div id="datepicker">Date Picker</div>何の変哲もない、ただの<div>タグですね。これ自体は、特別なものは何もありません。重要なのは、その後にある<script>タグです。
$('#datepicker').datepicker();これが、Date Pickerを作成している部分です。datepickerメソッドを呼び出すことで、そのタグにカレンダーを組み込むようになっているのです。実際にスマートフォンの画面にカレンダーがパッと出てくると、けっこう感動しますよ！（……実をいえば、jQuery Mobile用にDate Pickerは移植版が作られていたりするのですが、ここでは「jQuery UIを使う」というサンプルとして考えてください）
(by. SYODA-Tuyano.)
※リストが表示されない場合
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>
| << 前へ | 次へ >> |