基本的なGUIを使いこなそう (2/5)
作成:2011-05-25 08:11
更新:2012-03-29 10:17
更新:2012-03-29 10:17
■プッシュボタンでダイアログを表示するには？
ダイアログというのは、ただページを表示するだけで使うことはありません。ユーザーの操作などに応じて、表示するメッセージなどを設定する必要があるでしょう。
メッセージの表示は、実は簡単です。なにしろダイアログといってもタダのHTMLタグですから、用意した<div>タグのDOMオブジェクトを取得して表示テキストを変更すればいいだけです。JavaScriptの基本ですからわかりますね。
ただし、jQuery Mobileは「jQuery」のプラグインですから、当たり前ですがjQueryの機能がすべて使えます。これを利用すれば、document.getElememtById……などと面倒くさいことをしなくとも、もっとシンプルに処理を書くことができます。
では、ごく簡単な例として、「入力フィールドにテキストを書いてプッシュボタンを押す（タッチする）と、その内容をダイアログで表示する」といったものを考えてみましょう。これには、入力フィールドとプッシュボタンのGUIが必要ですね。これらは、フォーム用に用意されているHTMLのタグを使って用意すればよいでしょう。ただし、もちろんjQuery Mobileを使った「味付け」もしておきます。
それ以上に重要になるのが、「JavaScriptのスクリプトから、どのようにダイアログを呼び出すか」です。<a>タグならばhrefにIDを指定するだけで表示を切り替えることができました。が、スクリプトから行う場合、どうすればよいのでしょうか。
下のリスト欄に、ごく簡単なサンプルコードを挙げておきました。テキストを書いてボタンをおすと、ダイアログが現れ、「あなたは、"○○"と書きました。」とメッセージが表示されます。
では、コードをチェックしましょう。まずGUIの部分ですが、これは通常の<input type="text">タグと、<input type="button">タグを使っています。ただし、入力フィールドに着いては以下のように書いていますね。
ここでは、プッシュボタンのonclickにdoAction関数を設定して処理を呼び出しています。この関数では、まず入力されたテキストを、ダイアログのメッセージ表示タグ（id="dlog_content"のタグ）に設定しています。
オプション設定――移動に関する設定情報を連想配列でまとめたものです。
わかりにくいのは、第２引数のオプションの設定でしょう。これはあらかじめjQuery Mobileに用意されている設定を連想配列でまとめます。設定はいろいろとありますが、とりあえず以下の２つだけ覚えておくとよいでしょう。
transition――移動の際に用いられる視覚効果を指定します。ここでは"pop"としてポップアップするようにしています。
reverse――移動の「向き」に関するものです。前に戻る場合は、この値をtrueに設定します。
オプション設定は細かな設定をまとめなければならないため面倒な印象がありますが、ダイアログの表示だけでなく、ページの切り替えなどもこのchangePageで全て行うことができます。jQuery Mobileの基本メソッドとして覚えておきましょう。
メッセージの表示は、実は簡単です。なにしろダイアログといってもタダのHTMLタグですから、用意した<div>タグのDOMオブジェクトを取得して表示テキストを変更すればいいだけです。JavaScriptの基本ですからわかりますね。
ただし、jQuery Mobileは「jQuery」のプラグインですから、当たり前ですがjQueryの機能がすべて使えます。これを利用すれば、document.getElememtById……などと面倒くさいことをしなくとも、もっとシンプルに処理を書くことができます。
では、ごく簡単な例として、「入力フィールドにテキストを書いてプッシュボタンを押す（タッチする）と、その内容をダイアログで表示する」といったものを考えてみましょう。これには、入力フィールドとプッシュボタンのGUIが必要ですね。これらは、フォーム用に用意されているHTMLのタグを使って用意すればよいでしょう。ただし、もちろんjQuery Mobileを使った「味付け」もしておきます。
それ以上に重要になるのが、「JavaScriptのスクリプトから、どのようにダイアログを呼び出すか」です。<a>タグならばhrefにIDを指定するだけで表示を切り替えることができました。が、スクリプトから行う場合、どうすればよいのでしょうか。
下のリスト欄に、ごく簡単なサンプルコードを挙げておきました。テキストを書いてボタンをおすと、ダイアログが現れ、「あなたは、"○○"と書きました。」とメッセージが表示されます。
では、コードをチェックしましょう。まずGUIの部分ですが、これは通常の<input type="text">タグと、<input type="button">タグを使っています。ただし、入力フィールドに着いては以下のように書いていますね。
<div data-role="fieldcontain">data-role="fieldcontain"という属性は、フォームなどの項目を示すためのものです。これを記述することで、１つ１つの項目を整理し表示することができます。表示されたGUIを見ると、入力フィールドとボタンの間にラインが引かれているのが分かるでしょう。複数のGUI項目を用意する際には、このようにしてデザインを整理することができます。
<label for="input1">input:</label>
<input type="text" name="input1" id="input1" />
</div>
ここでは、プッシュボタンのonclickにdoAction関数を設定して処理を呼び出しています。この関数では、まず入力されたテキストを、ダイアログのメッセージ表示タグ（id="dlog_content"のタグ）に設定しています。
var input = $('#input1').val();
$('#dlog_content').text('あなたは、"' + input + '"と書きました。');$('#○○')というのは、jQueryのショートカット関数です。jQueryでは、このように$()の引数にタグのIDを指定することで、そのタグを操作するためのオブジェクトを簡単に作成できます。このタグのvalue属性はval()で、またinnerHTMLでテキストを設定する場合はtext()で、それぞれアクセスできます。非常にシンプルでいいでしょう？$.mobile.changePage("#dialog", {transition: "pop"});そして、これがダイアログを表示している部分です。jQuery Mobileの機能は、$.mobileというオブジェクトの中にまとめられています。そして「changePage」というメソッドが、表示切替を行うためのものになります。これは以下のように引数を指定します。changePage( 移動先 , オプション設定 );移動先――新たに表示するページやダイアログのIDを指定します。
オプション設定――移動に関する設定情報を連想配列でまとめたものです。
わかりにくいのは、第２引数のオプションの設定でしょう。これはあらかじめjQuery Mobileに用意されている設定を連想配列でまとめます。設定はいろいろとありますが、とりあえず以下の２つだけ覚えておくとよいでしょう。
transition――移動の際に用いられる視覚効果を指定します。ここでは"pop"としてポップアップするようにしています。
reverse――移動の「向き」に関するものです。前に戻る場合は、この値をtrueに設定します。
オプション設定は細かな設定をまとめなければならないため面倒な印象がありますが、ダイアログの表示だけでなく、ページの切り替えなどもこのchangePageで全て行うことができます。jQuery Mobileの基本メソッドとして覚えておきましょう。
(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 input = $('#input1').val();
$('#dlog_content').text('あなたは、"' + input + '"と書きました。');
$.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="content">
<p>jQuery Mobileサンプル。</p>
<div data-role="fieldcontain">
<label for="input1">input:</label>
<input type="text" name="input1" id="input1" />
</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サイト作成入門」に戻る