以下を使用したモバイル Web アプリの開発:
- jquery1.7.1
- jquery-mobile 1.1.1
- レール 3.2.1
<span id="wake_up_time_display">
ここでは、スライダーの値の変化に合わせて時間インジケーター ( ) の内容を変更するつもりでした。
以下は、対象の URL を直接呼び出した場合に機能します。
しかし、jQuery モバイルが表示される多くの場合<div data-role="page">
、インジケータは変更されません。(スライダー自体の値が変わります。)
<label class="select" for="daily_record_wakeup_time">
I'll wake up at:
</label>
<span id="wake_up_time_display"> 6:00</span>
<input data-theme="e" data-track-theme="d" id="daily_record_wakeup_time"
max="480" min="240" name="daily_record[wakeup_time]" step="15"
type="range" value="360" />
<script>
$("input[id='daily_record_wakeup_time']").live ("slidercreate", function () {
$("input[id='daily_record_wakeup_time']").bind ("change", function (event) {
$("#wake_up_time_display").text(Math.floor($(this).val() / 60) +
":"+($(this).val() % 60 < 10 ? "0":"")+$(this).val() % 60);
});
});
</script>