1

スライダーの位置に基づいてtxtボックスを表示/非表示にするトグル/フリップスライダーを備えたJQMページを構築しようとしています。JSfiddleテスト ページを参照してください。

HTML -

<div data-role="page">
<div data-role="header" data-theme="b">
    <label>JQM Slider Toggle test</label>
</div>
<div data-role="container">
    <div data-role="fieldcontain">
        <label for="OnFront">Device Location:</label>
        <select name="OnFront" id="OnFront" data-role="slider" data-theme="b">
            <option value="true">Front</option>
            <option value="false">Rear</option>
        </select>
    </div>
    <div id="DeviceOnFront">
        <div data-role="fieldcontain">
            <label for="FrontPosId">Front Position</label>
            <input type="text" id="FrontPosId" class="input_txt"></input>
        </div>
    </div>
    <div id="DeviceOnRear" hidden="hidden">
        <div data-role="fieldcontain">
            <label for="RearPosId">Rear Position</label>
            <input type="text" id="RearPosId" class="input_txt"></input>
        </div>
    </div>
</div>
<div data-role="footer" data-theme="b">
    <label>Glyn Lewis</label>
</div>

JS -

$('div[data-role="page"]').bind('pageinit', function () {

// debug test to see if events are firing ???
 $("#OnFront").on("start", function () {
     alert("User has started sliding my-slider!");
 });

$("#OnFront").on("stop", function (event) {
     var value = event.target.value;
     alert("User has finished sliding my slider, its value is: " + value);
 });

 // code for changing which txt box is shown
 // based on toggle/flip switch
 $("#OnFront").on("stop", function (event) {
     var value = event.target.value;
     if (value == true) {
         $("#DeviceOnFront").show();
         $("#DeviceOnRear").hide();
     } else {
         $("#DeviceOnFront").hide();
         $("#DeviceOnRear").show();
     };
 });

};

スライダーの「停止」イベントを発生させることができません??

どんな指摘もありがたく受け入れられます。

4

1 に答える 1

1

これがあなたの例から作られた実用的なソリューションです: http://jsfiddle.net/Gajotres/AWyXq/

エラーはほとんどありませんでした。イベントsliderstopとsliderstartは存在しません:

 $("#OnFront").on("sliderstart", function () {
     alert("User has started sliding my-slider!");
 });

正しい名前はslidestartslidestopです:

$('#OnFront').on('slidestart', function(){    
     console.log('Start');
});
于 2013-03-17T21:02:09.487 に答える