Событие изменения JQuery Mobile Slider - PullRequest
Новая
       8

Событие изменения JQuery Mobile Slider

8 голосов
/ 31 марта 2011

У меня есть мобильный слайдер jquery на простой странице.Когда я перетаскиваю ползунок, значение обновляется, как и ожидалось, в текстовом поле.Я посмотрел, но не могу найти, где эта логика происходит.

Что я хотел бы, это передать значение в функцию JavaScript.Как я могу связать событие изменения с моей функцией?

Приветствия

Майк.

Код ниже - пожалуйста, игнорируйте некоторые неприятные хаки: 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>jQuery Mobile Docs - Forms</title>
        <link rel="stylesheet" href="fader/jquery.mobile-1.0a3.css" />
        <script type="text/javascript" src="fader/jquery-1.5.js"></script>
        <script type="text/javascript" src="fader/jquery.mobile-1.0a3.js"></script>
        <script>
            $('#slider-1').changed(function () {
                alert("Test");
            });
        </script>
        <style type="text/css">
            .toolbar {
                -webkit-box-sizing: border-box;
                border-bottom: 1px solid #000;
                padding: 10px;
                height: 45px;
                background: url(fader/Resources/Themes/JQT/img/toolbar.png) #000000 repeat-x;
                position: relative;
            }
            .toolbar > h1 {
                position: absolute;
                overflow: hidden;
                left: 50%;
                top: 10px;
                line-height: 1em;
                margin: 1px 0 0 -75px;
                height: 40px;
                font-size: 20px;
                width: 150px;
                font-weight: bold;
                text-shadow: rgba(0, 0, 0, 1) 0 -1px 1px;
                text-align: center;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: #fff;
            }
            .button, .back, .cancel, .add {
                position: absolute;
                overflow: hidden;
                top: 8px;
                right: 10px;
                margin: 0;
                border-width: 0 5px;
                padding: 0 3px;
                width: auto;
                height: 30px;
                line-height: 30px;
                font-family: inherit;
                font-size: 12px;
                font-weight: bold;
                color: #fff;
                text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0;
                text-overflow: ellipsis;
                text-decoration: none;
                white-space: nowrap;
                background: none;
                -webkit-border-image: url(fader/Resources/Themes/JQT/img/button.png) 0 5 0 5;
            }
            body > * {
                background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1e1f21), to(#272729));
            }
            .back {
                left: 6px;
                right: auto;
                padding: 0;
                max-width: 55px;
                border-width: 0 8px 0 14px;
                -webkit-border-image: url(fader/Resources/Themes/JQT/img/back_button.png) 0 8 0 14;
            }
            .back.active {
                -webkit-border-image: url(Fader%20Test%20-%20Trade%20show/img/back_button_clicked.png) 0 8 0 14;
                color: #aaa;
            }
            h1, h2 {
                font: bold 18px Helvetica;
                text-shadow: rgba(255, 255, 255, .2) 0 1px 1px;
                color: #FFF;
                margin: 10px 20px 5px;
            }
            body {
                background: #000;
                color: #ddd;
            }
        </style>
    </head>

    <body>
        <div class="ui-body-a" data-role="page">
            <div class="toolbar">
                 <h1>Input</h1>

                 <A class="back" HREF="javascript:javascript:history.go(-1)">Home</A

                    ></div>





  <form action="#" method="get">


            <div class="ui-body-a" data-role="fieldcontain">

              <h1>Lighting Intensity</h1>
              <input type="range" name="slider-1" id="slider-1" value="0" min="0" max="100" data-theme="b" data-track-theme="a" orientation="vertical" />



            </div>

    </form>

    </div><!-- /content -->
</div><!-- /page -->

</body>
</html>

Ответы [ 10 ]

23 голосов
/ 14 апреля 2011

Майкл.Попробуйте окружить слайдер другим элементом: 

<div id="div-slider">
  <input type="range" id="slider-1" />
</div>

И вы можете получить событие при изменении: 

$("#div-slider").change(function() {
  var slider_value = $("#slider-1").val();
  // do something..
});
7 голосов
/ 05 июля 2012

Проблема с вашим кодом заключается в том, что javascript, связывающий событие изменения с элементами, оценивается до , в котором они фактически были созданы в html, поэтому ни один элемент не будет привязан к событию изменения, как вы указали.

Попробуйте это: 

$('#slider-1').live('change', function(){
  doYourStuffHere();
});

Вкратце, live означает, что JQuery будет продолжать связывать события с элементами, соответствующими указанному селектору, даже если они не присутствовали во время оценки JS для привязки,поэтому этот код будет связывать все существующие и элементы будущего html, которые соответствуют селектору # slider-1 с правильным обратным вызовом изменения.

Другой альтернативой является использование привязки JQuery 'on', которая действует немногопо-другому, но все еще может сделать работу.Посмотрите документацию для 'on' здесь .

3 голосов
/ 23 ноября 2013

Я настоятельно рекомендую ознакомиться с учебником w3schools по этому вопросу.

http://www.w3schools.com/jquerymobile/jquerymobile_events_intro.asp

Важный фрагмент кода, который вам не хватает: 

$(document).on("pageinit","#pageone",function(){
    // PLACE ALL YOU EVENTS CODE HERE e.g.
    $( "#slider" ).on( 'slidestop', function( event ) { 
        alert ('hi');  
    });
}

Убедитесьваш контент имеет префикс: 

<div data-role="page" id="pageone">
<div data-role="content">
<input type="range" name="slider" id="slider" value="10" min="0" max="100">
</div>
</div>
1 голос
/ 13 ноября 2012

У меня была такая же проблема, слишком много проблем с событием слайдера. Наконец-то я нашел событие «Slidestop», которое прекрасно работает. Это код: 

$( "#slider-1").on('slidestop', function( event ) {
   var slider_value=$("#slider-1").slider().val();
   alert('Value: '+slider_value);
});

Я надеюсь, что эта работа для вас

1 голос
/ 22 апреля 2012

Документация, по-видимому, отсутствует. После долгого поиска я обнаружил, что для получения нового значения в обработчике события необходимо что-то вроде $(this).slider().val() (дополнительная slider(), являющаяся частью, опущена почти везде): 

$("#div-slider").change(function() {
  var slider_value = $(this).slider().val();
  // do something..
});
1 голос
/ 12 февраля 2012

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

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

        });
    }
});

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

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

0 голосов
/ 18 августа 2014

Я использую этот код, и он работает в JQuery Mobile 1.4.3. 

$(".ui-slider").on('change', function(event) { 
    var valuenow = $(this).find(".ui-slider-handle").attr("aria-valuenow");
    console.log(valuenow);
});
0 голосов
/ 14 апреля 2013

Самый короткий и функциональный.

$('body').change(function() {
    var slider_value = $('#slider-1').val();
    if(slider_value == 4000){   
        alert("Holy smoke!");
    }
}
0 голосов
/ 09 июля 2011

попробуйте это: 

var self = this;
this.sliderTouchUp = function() {
    var currentVal = $('#slider-1').val();
    console.log("val change to " + currentVal);
};
$('.ui-slider').live('mouseup', self.sliderTouchUp);
$('.ui-slider').live('touchend', self.sliderTouchUp);
0 голосов
/ 31 марта 2011

Я не слишком знаком с jquery mobile, но добавление обработчика изменений в исходный элемент ввода должно сделать: 

$('#slider-1').change(function(){
    var slider_value = $(this).val()
    console.log(slider_value)
    // do whatever you want with that value...
})

Надеюсь, эта помощь,

Martin

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...