-2
와 모바일 웹 응용 프로그램 개발 :jQuery를 모바일 슬라이더 이벤트
- jQuery를 1.7.1
- JQuery와 모바일 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>
감사합니다. Caio! – umio
".on()"및 "pageinit"이벤트와 함께 작동합니다. '$ (문서) CSTE 연구진 ("pageinit"함수 (E) { \t $ ("#의 user_target_wakeup_time"). ("변경"기능 (E)에 { \t $ ("스팬 # 1 wake_up_time_display") .text (Math.floor ($ (this) .val()/60) + ":"+ ($ this) .val() % 60 <10? "0": "") + $ (this). val() % 60); }); });' – umio