jQuery Mobile Slider在對話框中沒有正確渲染

我在JQM對話框中使用jQuery移動滑塊，但它沒有正確渲染，它在safari和chrome中最引人注目。它在標準的JQM頁面中呈現良好。jQuery Mobile Slider在對話框中沒有正確渲染

<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’)，但它似乎沒有什麼區別。

來源

2011-12-01 Jack

它似乎使Chrome適合我。顯示與http：// jquerymobile相同的內容。com/demos/1.0/docs/forms/forms-all.html。問題是什麼？ – pauloya

只有在對話框中出現問題。在文檔中滑塊位於標準頁面中。看看我鏈接到的jsfiddle。 – Jack

好的，我基本上解決了這個問題，我不能發佈答案，因爲我仍然對所需代表有點缺乏（似乎你需要一個100代表在8小時內自我回答）。 – Jack

還有就是要解決這個問題更簡單的方法：

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

它的一個號碼類型，但與範圍的數據類型。通過玩弄代碼來找出它。
到目前爲止工作正常！

無論如何它已被修復在最新版本1.0.1！

來源

2012-01-27 11:45:10 PakL

謝謝，這絕對比我的解決方案更優雅。很高興知道它將在下一個版本中得到修復。 – Jack

剛剛看到1.0.1昨天發佈，所以我想讓目前的版本。 – Jack

我現在使用1.3.0版本，並在包含範圍輸入的節點上調用觸發器（'create'），實際上並排給出了兩個滑塊（原始的一個與jqm一起）。不知道我在做什麼錯誤（無法通過在javascript控制檯中手動添加滑塊來重現錯誤）。但是，這做了這個工作 – jcage

好的我有點解決了這個問題，雖然解決方案不夠漂亮，有點破解。

我意識到這個問題只有當滑塊上的對話，所以我在做什麼是設置我想作爲一個對話框，以page頁面data-role，然後在我的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>');

如果有人有更好的解決辦法，我很樂意聽到的代碼，在此期間，我只是做到這一點，希望這GET的固定在下一版本的JQM。

來源

2011-12-05 17:17:15 Jack

我也尋求解決方案。我在對話框中有兩個滑塊。

下面的代碼不是解決方案，但解決方法我爲我的問題做了。希望它能幫助別人。

問題是在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" />

我不自豪，但至少現在它看起來和行爲像對話框外的滑塊。

期待更好的解決方案。

來源

2012-01-20 15:16:46 Gaurav

你試過我的解決方法嗎？它也不是最漂亮的，但它似乎在工作，你只需要調用一次代碼（而不是綁定到一個事件）。 – Jack

沒關係，試試PakL的回答。 – Jack

jQuery Mobile Slider在對話框中沒有正確渲染

回答

相關問題