jQueryMobileを使ったページで、ページの表示前にHTML部分を書き換えようとdocument.getElementByIdを使ってみたが、上手くいかない。DOMを認識する前に書き換えようとしてしまったり、DOMの戻り値がnullだったりと面倒だ。
そこで素直にhtmlの書き換えをjQueryのhtmlメソッドを使うと上手くいった。
実際の使用例／クリックでリンクします
【写真／2013年3月2日 あと何回食事ができるか？】
jQueryのhtmlメソッドは、
$(“#id名“).html(“<p>書き込む文字列</p>“);
のように使う。
jQueryMobileでは、イベント発火のタイミングが通常とは異なるため、getElementByIdなどでは素直にはいかないようだ。jQueryMobileはもともとjQueryを発展させたものなのだがら、jQueryのhtml書き換え命令であるhtmlメソッドを使えばよかったのだ。郷に入りては郷に従えを思い出した。
ホームページでselectタグのoption項目などが凄く多い場合などは、Javascriptで書き換えたほうが楽なので、jQueryのhtmlメソッドは重宝すると思う。
実際の使用例）
書き換えを行うのJavaScriptプログラムをmain.jsとする場合、まずは
jQuery → main.js → jQueryMobileの順に読み込む
headタグ部分
<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css”/>
<script src=”http://code.jquery.com/jquery-1.7.1.min.js”></script>
<script src=”main.js”></script>
<script src=”http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js”></script>
main.jsでのJavascript部分
htmlメソッドを使う前にループ処理などで数値がカウントアップするような文字列を生成させて変数に読み込み最後にhtmlメソッドで設定
$(function(){ // ページロード時にHTML書き換え
var str = “”;
// 一日の食事回数
for(var i=1; i<=5; i++){
if(i == 3){
str += “<option value='” + i + “‘ selected>” + i + “回</option>”;
continue;
}
str += “<option value='” + i + “‘>” + i + “回</option>”;
}
$(“#count”).html(str);
// 現在の年齢、寿命年齢
str = “”;
for(var i=1; i<=120; i++){
if(i == 30){
str += “<option value='” + i + “‘ selected>” + i + “才</option>”;
continue;
}
str += “<option value='” + i + “‘>” + i + “才</option>”;
}
$(“#nowAge”).html(str);
$(“#age”).html(str);
});
HTMLでのselectタグにidをつけて中身を書き換える場合の例
この場合は、単純にselectタグにidをつけておいて、中身のoptionタグの部分は空にしておくだけである
<section id=”index” data-role=”page” data-title=”あと何回？”>
<div data-role=”header” data-position=”fixed” data-theme=”b”>
<h1>あと何回食事ができるか？</h1>
<a href=”#info” class=”ui-btn-left” data-transition=”fade” data-icon=”info” data-iconpos=”notext”>Info</a>
</div>
<div data-role=”content” data-theme=”c”>
<div data-role=”fieldcontain”>
<!– 食事の回数 –>
<p>１日の食事回数<br>
<select id=”count”>
</select>
</p>
<!– 現在の年齢 –>
<p>現在の年齢<br>
<select id=”nowAge”>
</select>
</p>
<!– 予想する寿命 –>
<p>予想する寿命<br>
<select id=”age”>
</select>
</p>
<p>
<button onclick=”keisan()”>確認する</button>
</p>
<ul data-role=”listview”>
<li id=”result”>? 回</li>
</ul>
</div>
<footer data-role=”footer” data-position=”fixed” data-theme=”b”>
Copyright 2013 mrgarita.net
</footer>
</section>
コメント