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的链接，如果单击“打开对话框”按钮，滑块无法正确呈现，但如果单击“打开为页面”则为。

我尝试在.slider()事件中调用.slider(‘refresh’)和pageshow，但似乎没有任何区别。

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"  />

我并不为此感到骄傲，但至少现在它的外观和行为就像对话框外的滑块。

期待更好的解决方案。

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

3 个答案: