jQuery Mobile Slider 在对话框中未正确呈现

Question

我在 JQM 对话框 中使用了 jQuery 移动滑块，但它没有正确呈现，它在 safari 和 chrome 中最明显。它在标准 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 的链接说明了这个问题，如果您单击“打开对话框”按钮，滑块不会正确呈现，但如果您单击“作为页面打开”，它就会正确呈现。

我尝试在pageshow 事件中调用.slider() 和.slider(‘refresh’)，但似乎没有什么不同。

Answer 1

有一种更简单的方法可以解决这个问题：

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

它是数字类型，但具有范围数据类型。通过玩弄代码弄明白了。
到目前为止工作正常！

反正最新版本 1.0.1 已经修复了！

Answer 2

好吧，我解决了这个问题，虽然解决方案不是很漂亮而且有点破解。

我意识到问题只是当滑块在对话框上时，所以我正在做的是将我想要作为对话框的页面的data-role 设置为page，然后在我的 JavaScript 中调用dialog() 该页面上的方法将其初始化为对话框小部件。问题是当你切换到下一个页面时，角落里的 x（关闭按钮）没有被渲染，所以我手动为它创建样式和标记。

这是我正在使用的代码

 $('#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 的下一个版本中得到修复。

Answer 3

我也在寻求解决方案。我在对话框中有两个滑块。

下面的代码不是解决方案，而是我为我的问题所做的解决方法。希望它可以帮助某人。

问题出在 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"  />

我并不为此感到自豪，但至少现在它看起来和行为就像对话框外的滑块。

期待更好的解决方案。