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

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

作成:2011-06-20 08:15
更新:2012-03-29 10:26

■コンポーネントの操作と表示のリフレッシュ

jQuery Mobileのコンポーネントは、複数のタグを組み合わせたり、スタイルシートを使ってグラフィックなどを背景に置くなどして構築されています。このため、ベースとしてHTMLのフォームタグや<div>タグなどが用いられていたとしても、「そのタグを操作すれば表示も変わる」というようにはいきません。

属性を操作するということもできないわけではありませんが、その他に「コンポーネントを操作するためのメソッド」というのが用意されており、これを使って操作することもあります。単純に「この設定を変更すればおしまい」とはいかないのが、jQuery Mobileの注意すべき点です。

では、どのようなメソッドがあり、どう表示などの操作を行えばいいのか、順に見ていくことにしましょう。まずは、チェックボックスとラジオボタンからです。

チェックボックス／ラジオボタンは、イネーブル（使用可能）状態に関するものと、表示の更新に関するメソッドが用意されています。以下に整理をしておきましょう。

○イネーブルにする
$(コンポーネント指定).checkboxradio('enable');

○ディスエーブルにする
$(コンポーネント指定).checkboxradio('disable');

○表示をリフレッシュする
$(コンポーネント指定).checkboxradio("refresh");

チェックボックス／ラジオボタン関連のメソッドは、「checkboxradio」という名前で用意されています。このメソッドの引数に、呼び出し対機能の名前を指定することで、その処理が実行されるようになっています。

用意されているのは、「enable」「disable」「refresh」の３つです。enable/disableはわかりますね。コンポーネントの使用可能状態を操作するためのものです。最後のrefreshは、表示をリフレッシュし、最新の状態に更新するためのものです。


■attrによる属性操作

jQuery Mobileのコンポーネントでは、ベースとなっているコンポーネントを操作する場合、その後で「コンポーネントのリフレッシュ」を行う必要があります。――例えば、イネーブル状態についてはcheckboxradioで変更できますが、それ以外の属性などを操作する場合を考えてください。例として「チェックのON/OFF」を行うことを考えてみましょう。これはcheckboxradioには用意されていません。ということは、他の手段を考えなければいけません。

jQueryには「attr」メソッドがあり、これを使って属性の値などを操作することができます。そこで、「attrで、チェックボックスのcheckedを操作すれば、チェック状態を変更できるだろう」と考えるでしょう。が、jQuery Mobileのコンポーネントは複雑ですから、ただ<input type="checkbox">のcheckedを変更したからといって、表示は変わらないのです。

このようなときに、refreshが使われます。attrメソッドでチェックの状態を変更した後、checkboxradio("refresh")することで、コンポーネントをリフレッシュします。これでコンポーネントは最新の状態となり、ちゃんとチェックが変更された状態に変わります。

下のリスト欄に、簡単な利用例を挙げておきました。１つ目のチェックボックスをON/OFFすると、２つ目のチェックボックスのイネーブル状態とチェックがON/OFFします。doActionで、１つ目のチェックの状態に応じて２つ目のチェックボックスを操作していることがわかります。

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

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

●プログラム・リスト●

*program list*
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!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(){
        $('#check1').bind('change',doAction);
        $('#check2').attr("checked",true);
    });
     
    function doAction(){
        var val = $('#check1').attr('checked');
        if (val){
            $('#check2').checkboxradio('enable');
            $('#check2').attr("checked",true);
            $('#check2').checkboxradio("refresh");
        } else {
            $('#check2').checkboxradio('disable');
            $('#check2').attr("checked",false);
            $('#check2').checkboxradio("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">
                <input type="checkbox" name="check1" id="check1" />
                <label for="check1">check box</label>
            </div>
            <div data-role="fieldcontain">
                <input type="checkbox" name="check2" id="check2" />
                <label for="check2">check box</label>
            </div>
        </div>
    </div>
     
    </body>
</html>
※関連コンテンツ

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