Обнаружение события смены выбранного слайдера в jQuery Mobile - PullRequest
Новая
       2

Обнаружение события смены выбранного слайдера в jQuery Mobile

13 голосов
/ 02 августа 2011

Какой надежный способ обнаружить изменение выбранного слайдера в jQuery Mobile? Я пытаюсь привязать обработчик для изменения события самого элемента управления select, но он срабатывает при отображении начальной страницы, а затем запускается несколько раз при щелчках, а иногда даже при наведении курсора (в браузере рабочего стола).

Минимальный рабочий пример такого поведения размещен здесь: http://jsfiddle.net/NPC42/mTjtt/3/

Вероятно, это вызвано тем, что jQuery Mobile добавил больше элементов для стилизации выбора как переключателя, но я не могу найти рекомендуемый способ сделать это.

Любая помощь очень ценится.

Ответы [ 3 ]

8 голосов
/ 02 августа 2011

Возможно, это не лучшее решение, но оно работает http://jsfiddle.net/mTjtt/4/

2 голосов
/ 02 августа 2011

Live Пример:

JS: 

$('#my-slider').change(function(event) {
    event.stopPropagation();
    var myswitch = $(this);
    var show     = myswitch[0].selectedIndex == 1 ? true:false;

    if(show) {            
        $('#show-me').fadeIn('slow');
        $('#first-me').fadeOut();
    } else {            
        $('#first-me').fadeIn('slow');
        $('#show-me').fadeOut();
    }
});

HTML: 

<div data-role="page" id="home" class="type-home"> 
    <div data-role="content"> 
        <div class="content-primary"> 
            <p>The flip toggle switch is displayed like this:</p> 
            <div data-role="fieldcontain"> 
                <label for="slider">Flip switch:</label> 
                <select name="slider" id="my-slider" data-role="slider"> 
                    <option value="off">Off</option> 
                    <option value="on">On</option> 
                </select> 
            </div> 
            <div id="first-me">
                <p>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                </p>  
            </div>
            <div id="show-me" class="hidden">
                <p>
                    Bacon ipsum dolor sit amet bresaola velit laboris bacon eiusmod. Id ex short ribs, dolor dolore rump pork belly beef ad ullamco salami labore aute ut. Jowl et in do, fatback jerky salami reprehenderit irure laboris pork loin commodo qui eu. Chuck tri-tip cupidatat, turkey sunt in anim jerky pork belly exercitation bacon. Eu corned beef qui adipisicing, ground round veniam turkey chicken incididunt deserunt. Proident t-bone chuck, non excepteur biltong elit in anim minim swine short loin magna do. Sint enim nisi, minim nulla tongue ut incididunt ground round.
                </p>  
            </div>
        </div>
    </div>
</div>

ОБНОВЛЕНИЕ:

Я поднял проблему / ошибку с jQM здесь:

1 голос
/ 12 февраля 2012

Используйте этот код, 

$( ".mySliders" ).slider({
    create: function (event, ui) {
        $(this).bind('change', function () {
            ...
            ...
        });
    }
});

! Не помещайте type = "range" в ваши теги ввода, вместо этого ставьте type = "text".

Поскольку вы вызываете функцию слайдера вручную.

...