back
コンポーネントをダイナミックに操作する (2/5)
■各種コンポーネント用のメソッドについて
チェックボックス／ラジオボタンには、checkboxradioというメソッドが用意されていることがわかりました。
これとほぼ同じようなメソッドというのは、実はその他のコンポーネントにも用意されています。それぞれのコンポーネント名とほぼ同じ名前ですのでそれほど覚えるのも大変ではないでしょう。以下に整理しておきます。
○ボタン用メソッド
○入力フィールド用メソッド
○スライダー用メソッド
とりあえず、これだけ覚えておけばよいでしょう（他、セレクトメニューのものもありますが、これは後で）。見ればわかるように、いずれもenableとdisableが標準で用意されています。またスライダーに関してだけは、refreshも用意されています。スライダーは値を変更するとノブの位置が変わるなどビジュアルが変化しますから、表示の更新が必要となるためでしょう。
これのメソッドの基本的な使い方は、先ほどのcheckboxradioとほぼ同じですからわかりますね。では、実際の利用例を下のリスト欄にあげておきましょう。ボタンをクリックするとスライダーがゼロになり、ボタンもディスエーブル状態になります。スライダーを動かすと、ボタンが再びイネーブル状態に戻ります。
ここでは、ボタンのtapと、スライダーのchangeにそれぞれdoAction/doAction2をバインドしています。ボタンのイネーブル状態はbuttonメソッドだけで操作できますが、スライダーの値は、まずattrでスライダーのvalue属性の値を変更し、それからslider('refresh')でスライダーの表示を更新します。
このように「attrで属性を操作したら、refreshで表示を更新する」という基本手順は、チェックボックスでもスライダーでも同じことがわかりますね。
これとほぼ同じようなメソッドというのは、実はその他のコンポーネントにも用意されています。それぞれのコンポーネント名とほぼ同じ名前ですのでそれほど覚えるのも大変ではないでしょう。以下に整理しておきます。
○ボタン用メソッド
$(コンポーネント指定).button('enable');
$(コンポーネント指定).button('disable');○入力フィールド用メソッド
$(コンポーネント指定).textinput('enable');
$(コンポーネント指定).textinput('disable');○スライダー用メソッド
$(コンポーネント指定).slider('enable');
$(コンポーネント指定).slider('disable');
$(コンポーネント指定).slider('refresh');とりあえず、これだけ覚えておけばよいでしょう（他、セレクトメニューのものもありますが、これは後で）。見ればわかるように、いずれもenableとdisableが標準で用意されています。またスライダーに関してだけは、refreshも用意されています。スライダーは値を変更するとノブの位置が変わるなどビジュアルが変化しますから、表示の更新が必要となるためでしょう。
これのメソッドの基本的な使い方は、先ほどのcheckboxradioとほぼ同じですからわかりますね。では、実際の利用例を下のリスト欄にあげておきましょう。ボタンをクリックするとスライダーがゼロになり、ボタンもディスエーブル状態になります。スライダーを動かすと、ボタンが再びイネーブル状態に戻ります。
ここでは、ボタンのtapと、スライダーのchangeにそれぞれdoAction/doAction2をバインドしています。ボタンのイネーブル状態はbuttonメソッドだけで操作できますが、スライダーの値は、まずattrでスライダーのvalue属性の値を変更し、それからslider('refresh')でスライダーの表示を更新します。
このように「attrで属性を操作したら、refreshで表示を更新する」という基本手順は、チェックボックスでもスライダーでも同じことがわかりますね。
(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);
$('#slider').bind('change',doAction2);
});
function doAction(){
$('#slider').attr('value',0);
$('#slider').slider('refresh');
$('#btn').button('disable');
$('#btn').button('refresh');
}
function doAction2(){
$('#btn').button('enable');
$('#btn').button('refresh');
}
</script>
</head>
<body>
<!-- home page -->
<div id="home" data-role="page">
<div data-role="header">
<h1>Hello</h1>
</div>
<div data-role="content">
<p>※サンプル。</p>
<div data-role="fieldcontain">
<label for="slider"Slider:</label>
<input type="range" name="slider" id="slider"
value="0" min="0" max="100" />
</div>
<div data-role="fieldcontain">
<input type="button" name="btn" id="btn"
value="click" />
</div>
</div>
</div>
</body>
</html>
| << 前へ | 次へ >> |