コンポーネントをダイナミックに操作する (3/5)
作成:2011-06-20 08:20
更新:2012-03-29 10:27
更新:2012-03-29 10:27
■セレクトメニューの操作
セレクトメニューは、ちょっと特殊なコンポーネントです。これは、１つのコンポーネントでありながら、２つのコンポーネントの組み合わせになっています。
HTMLのタグにおいては、<select>タグと<option>タグの組み合わせで構成されている、ということは誰しもわかっているでしょう。が、jQuery Mobileの場合はそれだけではありません。実際に表示されるコンポーネントも、ボタンのように選択された項目が表示されている状態のものと、クリックして画面に表示される、選択項目がずらりと並ぶリストの２つから構成されていることが分かります。
従って、「セレクトメニューを操作する」と一口にいっても、これまでのように「イネーブル状態や属性を操作する」というだけでなく、もっと幅広い操作が必要となることはわかるでしょう。――では、順に整理していきましょう。まずはイネーブル状態などの基本からです。
○イネーブル状態、リフレッシュ関係
セレクトメニュー用に用意されているメソッドは「selectmenu」という物になります。やはり、引数に「enable」「disable」「refresh」といったものを渡して呼び出すことで、コンポーネントのイネーブル状態を変更したり、表示を更新したりできます。
○メニューを開く／閉じる
「メニューを開く」というのは、メニューのボタンをタッチして、画面にリストが表示された応対にすることです。また「メニューを閉じる」は、表示されたリストを消して、もとのボタンの状態に表示を戻すことです。これらもselectmenuメソッドを使って行うことができます。
○メニューの項目を追加・削除する
これは、実は用意されていません。というより、これは専用のメソッドなど無くとも、標準的なJavaScriptの機能だけで行うことができますから。つまり、<select>メニューに<option>タグを作って追加したり、組み込まれている<option>タグを削除したりすることで、メニューの項目を操作できるわけです。
ただし！ これも、ただ操作するだけではいけません。これだけでは、jQuery Mobileのセレクトリストの項目は変化しません。なぜなら、<option>タグや<select>タグを操作しても、セレクトメニューの表示が変わるわけではないからです。操作をしたら、必ずselectmenu('refresh')で表示を更新します。これを忘れないで下さい。
下のリスト欄に、簡単なサンプルをあげておきました。入力フィールドにテキストを書いてボタンを押すと、その項目をメニューに追加してからメニューを開きます。ここでは、メニューへの項目追加を以下のように行なっています。
後は、メニューをselectmenu('refresh')で更新し、selectmenu('open')で開きます。開いたときには、ちゃんと追加した項目が増えている、というわけです。
HTMLのタグにおいては、<select>タグと<option>タグの組み合わせで構成されている、ということは誰しもわかっているでしょう。が、jQuery Mobileの場合はそれだけではありません。実際に表示されるコンポーネントも、ボタンのように選択された項目が表示されている状態のものと、クリックして画面に表示される、選択項目がずらりと並ぶリストの２つから構成されていることが分かります。
従って、「セレクトメニューを操作する」と一口にいっても、これまでのように「イネーブル状態や属性を操作する」というだけでなく、もっと幅広い操作が必要となることはわかるでしょう。――では、順に整理していきましょう。まずはイネーブル状態などの基本からです。
○イネーブル状態、リフレッシュ関係
$(コンポーネント指定).selectmenu('enable');
$(コンポーネント指定).selectmenu('disable');
$(コンポーネント指定).selectmenu('refresh');セレクトメニュー用に用意されているメソッドは「selectmenu」という物になります。やはり、引数に「enable」「disable」「refresh」といったものを渡して呼び出すことで、コンポーネントのイネーブル状態を変更したり、表示を更新したりできます。
○メニューを開く／閉じる
$(コンポーネント指定).selectmenu('open');
$(コンポーネント指定).selectmenu('close');「メニューを開く」というのは、メニューのボタンをタッチして、画面にリストが表示された応対にすることです。また「メニューを閉じる」は、表示されたリストを消して、もとのボタンの状態に表示を戻すことです。これらもselectmenuメソッドを使って行うことができます。
○メニューの項目を追加・削除する
これは、実は用意されていません。というより、これは専用のメソッドなど無くとも、標準的なJavaScriptの機能だけで行うことができますから。つまり、<select>メニューに<option>タグを作って追加したり、組み込まれている<option>タグを削除したりすることで、メニューの項目を操作できるわけです。
ただし！ これも、ただ操作するだけではいけません。これだけでは、jQuery Mobileのセレクトリストの項目は変化しません。なぜなら、<option>タグや<select>タグを操作しても、セレクトメニューの表示が変わるわけではないからです。操作をしたら、必ずselectmenu('refresh')で表示を更新します。これを忘れないで下さい。
下のリスト欄に、簡単なサンプルをあげておきました。入力フィールドにテキストを書いてボタンを押すと、その項目をメニューに追加してからメニューを開きます。ここでは、メニューへの項目追加を以下のように行なっています。
var str = $('#txt').val();
var opt = $('<option/>').val(str).text(str);
opt.appendTo($('#select'));いずれもjQueryの機能を利用しています。まず、valメソッドで入力フィールドのテキストを取得し、$('<option/>')で新しい<option>タグのオブジェクトを生成して、valとtextでvalueと表示テキストを設定します。そして、appendToを使い、<select>の中にオブジェクトを組み込みます。jQueryの機能を利用することで、こんな具合にけっこう簡単に項目の追加ができるのです。後は、メニューをselectmenu('refresh')で更新し、selectmenu('open')で開きます。開いたときには、ちゃんと追加した項目が増えている、というわけです。
(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">
$('#home').live('pagecreate',function(){
$('#btn').bind('tap',doAction);
$('#select').bind('change',doAction2);
});
function doAction(){
var str = $('#txt').val();
var opt = $('<option/>').val(str).text(str);
opt.appendTo($('#select'));
$('#select').selectmenu('refresh');
$('#select').selectmenu('open');
}
function doAction2(){
$('#msg').text('"' + $('#select').val() + '"を選びました。');
}
</script>
</head>
<body>
<!-- home page -->
<div id="home" data-role="page">
<div data-role="header">
<h1>Hello</h1>
</div>
<div data-role="content">
<p id="msg">※サンプル。</p>
<div data-role="fieldcontain">
<label for="select"Select:</label>
<select name="select" id="select"
data-native-menu="false">
<option>Menu</option>
</select>
</div>
<div data-role="fieldcontain">
<input type="text" name="txt" id="txt" />
<input type="button" name="btn" id="btn"
value="click" />
</div>
</div>
</div>
</body>
</html>
※関連コンテンツ
「jQuery Mobileによるスマートフォン用Webサイト作成入門」に戻る