基本的なGUIを使いこなそう (4/5)
作成:2011-05-25 08:16
更新:2012-03-29 10:18
更新:2012-03-29 10:18
■<select>メニューと複数項目の選択処理
続いて、<select>タグによるメニューや一覧リストについてです。jQuery Mobileでは、<select>タグによるGUIも、独自の表示を利用することができます。ただし、これもやっぱり、ちょっとだけjQuery Mobileの味付けをしてやる必要があります。
まずはサンプルを見てもらいましょう。下のリスト欄のコードは、複数項目を選択できる<select>の利用例です。アクセスすると、やはりチェックボックスなどと同様に、プッシュボタンのような形でメニューの項目が現れます。
このボタンをタッチすると画面に選択する項目のリストがポップアップして現れます。ここで選択したい項目をチェックしてから閉じ、「Click」ボタンを押すと、選択した項目がすべてメッセージに表示されます。
ここでは、まず<select>タグにちょっとした記述が用意されています。よくみると、タグにdata-native-menu="false"という属性が用意されていますね。data-native-menuは、<select>タグで表示されるネイティブなメニュー（HTML本来のメニュー）を使うかどうかを示すものです。これをfalseにすると、標準のメニューではなく、jQuery Mobile独自に用意したリストを使って項目を表示するようになります。
さて、このリストの選択状態を調べるスクリプト部分を見てみましょう。ここでは、選択されている項目をすべて取り出すのに、以下のような記述をしています。
では、取り出したオブジェクト類はどのように処理をさせるか。それは、その後にある続きの部分になります。
まずはサンプルを見てもらいましょう。下のリスト欄のコードは、複数項目を選択できる<select>の利用例です。アクセスすると、やはりチェックボックスなどと同様に、プッシュボタンのような形でメニューの項目が現れます。
このボタンをタッチすると画面に選択する項目のリストがポップアップして現れます。ここで選択したい項目をチェックしてから閉じ、「Click」ボタンを押すと、選択した項目がすべてメッセージに表示されます。
ここでは、まず<select>タグにちょっとした記述が用意されています。よくみると、タグにdata-native-menu="false"という属性が用意されていますね。data-native-menuは、<select>タグで表示されるネイティブなメニュー（HTML本来のメニュー）を使うかどうかを示すものです。これをfalseにすると、標準のメニューではなく、jQuery Mobile独自に用意したリストを使って項目を表示するようになります。
さて、このリストの選択状態を調べるスクリプト部分を見てみましょう。ここでは、選択されている項目をすべて取り出すのに、以下のような記述をしています。
var sels = $('#sel1 option:selected')……'#sel1 option:selected'というのは、"sel1"というIDの項目内に組み込まれている<option>タグで、selected属性がtrueであるものすべてを指定するためのものです。これで、複数の項目が選択されていたとしても、それらすべてをとり出し処理することができます。では、取り出したオブジェクト類はどのように処理をさせるか。それは、その後にある続きの部分になります。
…….each(これ、何をやっているのかわかるでしょうか。eachというメソッドを呼び出しているのですが、その引数に関数を渡しているのです。つまり、こういうことですね。
function(){ value += $(this).val() + "・"; });
$(○○).each(function(){……});これで、$(○○)で取り出されたそれぞれの項目に対し、eachの引数に指定した関数が実行されます。eachで取り出されたオブジェクトは、$(this)で得ることができます。ここでは、value += $(this).val() + "・";という文を実行していますが、これで<option>のvalueの値を変数valueに追加していたのです。(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>
<script type="text/javascript">
function doAction(){
var value = "";
var sels = $('#sel1 option:selected').each(
function(){ value += $(this).val() + "・"; });
$('#dlog_content').text('あなたは、' + value + 'ユーザーですね。');
$.mobile.changePage("#dialog", {transition: "pop"});
}
</script>
</head>
<body>
<div id="home" data-role="page">
<div data-role="header">
<h1>Hello</h1>
</div>
<div data-role="fieldcontain">
<label for="sel1">select</label>
<select id="sel1" name="sel1" data-native-menu="false" multiple>
<option value="Windows">Windows</option>
<option value="Mac OS X">Mac OS X</option>
<option value="Linux">Linux</option>
<option value="TRON">TRON</option>
</select>
</div>
<input type="button" value="Click" onclick="doAction();" />
</div>
</div>
<div id="dialog" data-role="dialog">
<div data-role="header">
<h1 id="dlog_title">Message</h1>
</div>
<div data-role="content">
<p id="dlog_content">コンテンツ。</p>
</div>
</div>
</body>
</html>
※関連コンテンツ
「jQuery Mobileによるスマートフォン用Webサイト作成入門」に戻る