jQuery Mobile Slider неправильно отображает в диалоге - PullRequest
Новая
       19

jQuery Mobile Slider неправильно отображает в диалоге

2 голосов
/ 01 декабря 2011

Я использую мобильный слайдер jQuery в диалоговом окне JQM , но он не отображается должным образом, это наиболее заметно в сафари и хроме. Он прекрасно отображается на стандартной странице JQM. 

<div data-role="dialog" id="Dialog1"> 
<div data-role="header"> <h1> Dialog</h1> </div>
<div data-role="content">
     <label for="slider-2">Input slider:</label>
     <input type="range" name="slider" id="slider-2" 
                   value="25" min="0" max="100"  />
</div>
<div data-role="footer"><h3>Footer</h3></div>
</div>

Вот ссылка на jsfiddle , иллюстрирующая проблему: если вы нажмете кнопку «Открыть диалоговое окно», ползунок будет отображен неправильно, но если вы нажмете «открыть как страницу», то это будет.

Я пытался дозвониться до .slider() и .slider(‘refresh’) в событии pageshow, но, похоже, это не имеет значения.

Ответы [ 3 ]

7 голосов
/ 27 января 2012

Существует более простой способ исправить это: 

<input type="number" data-type="range" name="slider" id="slider-0" value="0" min="0" max="100">

Тип числа, но с типом данных диапазона. Разобрался, поиграв с кодом.
Пока отлично работает!

В любом случае это исправлено в последней версии 1.0.1!

0 голосов
/ 20 января 2012

Я тоже ищу решение.У меня есть два ползунка в диалоге.

Код ниже - это не решение, а обходной путь, который я сделал для своей проблемы.Надеюсь, что это кому-то поможет.

Проблема в телефонах Android: слева не отображаются поля ввода, показывающие значение ползунка.

Я справился с этим, скрыв слайд исходного типа и добавив текстовое полевыше ползунка.

При смене слайда я изменяю значение текстового поля.И поскольку я не хочу операций с клавиатурой, я отключил текстовое поле.

Код ниже. 

   <script> 
$("#slider-0").change(function(event, ui) {
                $('#thicknessBox').val($(this).val());
    });
</script>
   <label for="slider-1">Thickness:</label>
   <input type="text" id="thicknessBox" name="slider-1" disabled="disabled" ></input>
   <input data-role="none" style="display:none;" type="range" 
    id="slider-0" value="1" min="1" max="10"  />

Я не горжусь этим, но, по крайней мере, теперь он выглядит и ведет себя как слайдер вне диалога.

С нетерпением ждем лучшего решения.

0 голосов
/ 05 декабря 2011

ОК. Я вроде как решил проблему, хотя решение не очень красивое и немного хакерское.

Я понял, что проблема заключается только в том, что ползунок находится в диалоговом окне, поэтому я настраиваю data-role страницы, которую я хочу в качестве диалога, на page, затем в моем JavaScript я вызываю dialog() метод на этой странице, чтобы инициализировать его как диалоговый виджет. Проблема в том, что при переходе на следующую страницу х в углу (кнопка закрытия) не отображается, поэтому я вручную создаю стили и разметку для него.

Вот код, который я использую 

 $('#progWiz').dialog().find('a:first')
  .addClass('ui-btn-left ui-btn ui-btn-up-a' + 
        ' ui-btn-icon-notext ui-btn-corner-all ui-shadow')
    .attr({ 'title': 'close', 'data-theme': 'a' })
     .empty()
     .append('<span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">' +
            ' <span class="ui-btn-text">Close</span>' +
         '<span class="ui-icon ui-icon-delete ui-icon-shadow"></span></span>');

Если у кого-то есть лучшее решение, которое я был бы рад услышать, тем временем я просто сделаю это и, надеюсь, это исправят в следующем выпуске JQM.

...