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

コンポーネントをダイナミックに操作する (2/5)

作成:2011-06-20 08:17
更新:2012-03-29 10:27

■各種コンポーネント用のメソッドについて

チェックボックス／ラジオボタンには、checkboxradioというメソッドが用意されていることがわかりました。

これとほぼ同じようなメソッドというのは、実はその他のコンポーネントにも用意されています。それぞれのコンポーネント名とほぼ同じ名前ですのでそれほど覚えるのも大変ではないでしょう。以下に整理しておきます。

○ボタン用メソッド
$(コンポーネント指定).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で表示を更新する」という基本手順は、チェックボックスでもスライダーでも同じことがわかりますね。

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

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>
※関連コンテンツ

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