プラグインを作ろう！ (4/4)

■作成したウィジェットを組み込んで使う

では、作成したmywidgetを使ってみましょう。ここでは簡単なサンプルページをあげておきます。下のリスト欄のようにHTMLのソースコードを修正し、アクセスしてみましょう。

ページには、薄いブルーの枠線に青い文字のテキストと、薄い赤の枠線に赤い文字のテキストの２つのテキストが表示されます。これらが、mywidgetのウィジェットを組み込まれた表示です。非常にシンプルな表示ですが、ウィジェットにより表示が変化するサンプルと考えてください。

表示を確認したら、下にある「clear」ボタンをクリックしてみましょう。すると、ウィジェットの表示が消え、ただのテキストに戻ります。このようにウィジェットの表示をクリアすることもできます。

さて、ウィジェットの組み込み部分を見てみましょう。これは以下のような形で行なっていることがわかります。

$(document).ready(function () {
    $('#mywidget1').mywidget({color:'#6666aa', border:'#aaaadd'});
    $('#mywidget2').mywidget({color:'#aa6666', border:'#ddaaaa'});
});

ページを読み込んだ際にウィジェットを割り付けるには、$(document).readyを利用するのがよいでしょう。今回作成したmywidgetは、このようにjQueryオブジェクトとして割りつけるタグを用意し、そのmywidgetメソッドを呼び出すだけです。引数には、設定する各値を連想配列で用意しておきます。

また、ボタンをクリックした時の処理は、doActionとして以下のように用意されています。

$('#content p').mywidget('clear');

ここでは、mywidgetのclearメソッドを呼び出しています。このように、引数に'clear'と指定してmywidgetを呼び出すことで、clearに設定されていた関数が呼び出され実行されます。

ウィジェットの利用は、「ウィジェットを適用する」「各種の設定の用意の仕方」「用意されているメソッド類の呼び出し方」についてそれぞれしっかり理解できれば、だいたい使い方はわかってくるでしょう。今回のサンプルをもとに、それぞれで改良してオリジナルのウィジェットづくりに挑戦してみましょう。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※HTMLのソースコード

<!DOCTYPE html> 
<html> 
<head> 
	<title>My Page</title> 
	<meta http-equiv="Content-Type"
			content="text/html; charset=UTF-8" />
	<meta name="viewport" 
		content="width=device-width, initial-scale=1"> 
	<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"  src="mywidget.js"></script>
	<script type="text/javascript">
	$(document).ready(function () {
		$('#mywidget1').mywidget({color:'#6666aa', border:'#aaaadd'});
		$('#mywidget2').mywidget({color:'#aa6666', border:'#ddaaaa'});
	});
	
	function doAction(){
		$('#content p').mywidget('clear');
	}
	</script>
</head> 

<body> 

	<!-- home page -->
	<div id="home" data-role="page">
		<div data-role="header">
			<h1>Sample</h1>
		</div>
		<div data-role="content">
			<p id="msg">サンプル</p>
			<div id="content">
				<p id="mywidget1">これがコンテンツです。</p> 
				<p id="mywidget2">mywidgetのウィジェットを割り当てています。</p> 
			</div>
			<input type="button" onclick="doAction();" value="clear">
		</div>
	</div>
		
</body>

</html>

<< 前へ　

記事のリストに戻る

PC Site G+ mail