Как изменить текстовую метку относительно ползунка в JQM?

Я использую Jquerymobile. У меня есть ползунок и текстовое поле, соответствующее этому. Поскольку функциональность по умолчанию задана, значение отображается в текстовом поле, когда мы перемещаем ползунок в соответствии с определенным нами диапазоном. Но я хочу показать текст вместо чисел. Это больше похоже на проблемы серьезности. т. е.: когда значение ползунка достигает 30, в текстовом поле должно отображаться «менее серьезное», а когда оно достигает 50, текст должен измениться на «более серьезное».

Я сделал все исследования и разработки, но не смог ничего найти. Предоставьте мне решение.

Спасибо


ios slider html jquery-mobile jquery-ui-slider
person Fabre    schedule 20.11.2012    source источник
comment
Если вы опубликуете свой код или jsbin.com того, что у вас есть, это очень поможет.   -  person Jeemusu    schedule 20.11.2012
comment
‹div data-role=content data-theme=e› ‹label for=slider-a›Elegirgravedad:‹/label› ‹тип ввода=имя диапазона=id ползунка=slider-a data-theme=b data-track- тема=e значение=0 мин=0 макс=100 /› ‹/div›   -  person Fabre    schedule 20.11.2012
comment
это мой код слайдера..   -  person Fabre    schedule 20.11.2012

Ответы (2)


arrow_upward
2
arrow_downward

решение @Jeemusu не работало для меня во всех случаях ... поэтому я изменил его, используя эта информация:

<script>
$(document).bind('pageinit', function () {
  //depending on the device we have a touch or a mouse event
  var supportTouch = jQuery.support.touch,
      touchStartEvent = supportTouch ? "touchstart" : "mousedown",
      touchStopEvent  = supportTouch ? "touchend"   : "mouseup",
      touchMoveEvent  = supportTouch ? "touchmove"  : "mousemove";

  //the event is bound to the .ui-slider inside of the input type range
  $('#slider-a').siblings('.ui-slider').bind(touchStopEvent,function(){
    var sliderVal = $("#slider-a").attr('value');

    if(sliderVal <= 30) {
      $('#slider-phrase').html('normal');
    } else if(sliderVal >= 30 && sliderVal < 50) {
      $('#slider-phrase').html('less severe');
    } else if(sliderVal >= 50) {
      $('#slider-phrase').html('more severe');
    }
  });
});
</script>

см. рабочий пример здесь

person Taifun    schedule 20.11.2012

arrow_upward
1
arrow_downward

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

$(document).ready(function() {

var sliderAnchor = $("#slider-a").closest('div').children('div').children('a');

  sliderAnchor.bind('tap',function(e){

    var sliderVal = $("#slider-a").attr('value');

    if(sliderVal <= 30) {
       $('#slider-phrase').html('normal');
    } else if(sliderVal >= 30 && sliderVal < 50) {
       $('#slider-phrase').html('less severe');
    } else if(sliderVal >= 50) {
       $('#slider-phrase').html('more severe');
    }

  });

});

Рабочий пример: http://jsbin.com/igugac/1/.

person Jeemusu    schedule 20.11.2012
comment
+1 это решение дало мне хорошую отправную точку для моего решения, спасибо! - person Taifun; 21.11.2012