jQuery移动滑块在对话框中未正确呈现

Question

我在jQuery JQM对话框中使用了一个移动滑块，但是渲染不正确，在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>

这里有一个指向小提琴的链接来说明这个问题，如果你点击“打开对话框”按钮，滑块就不会正确呈现，但是如果你点击“打开即页”，它就会出现。

我尝试在.slider()事件中调用pageshow和.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"  />

我不为它感到骄傲，但至少现在它看起来和行为就像对话框外面的滑块。

期待更好的解决方案。