Author

中村＠アールテクニカ

アールテクニカの中村です。
jQuery Mobileは、静的HTMLの記述だけでもネイティブアプリライクなGUIが簡単に作成できますが、ユーザ操作に応じてGUIパーツを追加したり、Web APIから取得したデータをGUIに反映さるためには、JavaScriptでの実装が必要となります。
今回は、jQuery Mobileで動的にGUIを作成するにはどうすればよいかを解説します。

静的HTMLによるGUI作成

まずは静的なHTMLでのGUI作成を見てみましょう。
jQueryおよびjQuery MobileのJavaScriptとすスタイルシートを読み込んでおけばあとは、下記のようにHTMLを記述すれば自動的にjQuery Mobileの初期化関数が実行され、jQuery Mobileで定義されたスタイルが適用された状態となります。

ソースコード

<!-- ボタン -->
<input class="button" type="button" value="Button"/>

<!-- チェックボックス -->
<label><input type="checkbox" class="checkbox" name="checkbox ">Check-1</label>

<!-- ラジオボタン -->
<label><input type="radio" class="radio" name="radio ">radio-1</label>
<label><input type="radio" class="radio" name="radio ">radio-2</label>

<!-- リストビュー -->
<ul class="listview" data-role="listview">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>

<!-- ナビバー -->
<div class="navbar" data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>

実行結果

f:id:artteknika_nakamura:20160929165743p:plain

動的にGUI作成する

これと同じHTMLをJavaScriptで動的に追加すると、スタイルの当たっていない素のGUIになってしまいます。

ソースコード

// ボタンを追加
$('.ui-content')
.append('<input class="button" type="button" value="Button"/>');

// チェックボックスを追加
$('.ui-content')
.append('<label><input type="checkbox" class="checkbox" name="checkbox ">Check-1</label>');

// ラジオボタンを追加
$('.ui-content')
.append('<label><input type="radio" class="radio" name="radio ">radio-1</label>')
.append('<label><input type="radio" class="radio" name="radio ">radio-2</label>');

// リストビューを追加
$('.ui-content')
.append(
'<ul class="listview" data-role="listview">'
+ '<li>Item1</li>'
+ '<li>Item2</li>'
+ '<li>Item3</li>'
+ '</ul>'
);

// ナビバーを追加
$('.ui-content')
.append(
'<div class="navbar" data-role="navbar">'
+ '<ul>'
+ '<li><a href="#" class="ui-btn-active">One</a></li>'
+ '<li><a href="#">Two</a></li>'
+ '<li><a href="#">Three</a></li>'
+ '</ul>'
+ '</div>'
);

実行結果(初期化関数呼び出し無し)

f:id:artteknika_nakamura:20160929165747p:plain

各GUIパーツに対し、以下の様に初期化関数を呼んであげればjQuery Mobileのスタイルが適用されます。

// ボタンの動的初期化
$('.button').button();

// チェックボックスの動的初期化
$('.checkbox').checkboxradio();

// ラジオボタンの動的初期化
$('.radio').checkboxradio();

// リストビューの動的初期化
$('.listview').listview();

// ナビバーの動的初期化
$('.navbar').navbar();

実行結果(初期化関数呼び出しあり)

f:id:artteknika_nakamura:20160929192935p:plain

注意点

リストビューの項目追加

リストビュー自体は、listview()で初期化済みの状態でリスト項目を追加した場合は、listview()を呼んでも追加した項目に対してはスタイルが適用されません。

f:id:artteknika_nakamura:20160929183012p:plain

以下の様に、listview('refresh')を呼び出す必要があります。

$('.listview').listview('refresh');

aタグのボタン

inputタグで作成したボタンは、button()を呼び出す必要がありますが、aタグで作成したボタンは、クラス設定のみでボタンの外見のスタイルが適用されるため、button()を呼び出す必要がありません。
逆に呼び出してしまうと、aタグの外側にボタン状のdivタグが追加され、以下の様にボタンの中にボタンが入った様な表示になってしまいます。
f:id:artteknika_nakamura:20160929182957p:plain