2011-10-20 91 views
0

工作我想在jQuery Mobile的滑塊控件,以及剛剛從文檔中複製的代碼:滑塊不是在jQuery Mobile的

<div data-role="fieldcontain"> 
     <label for="slider">Input slider:</label> 
     <input type="range" name="slider" id="slider" value="0" min="0" max="100"/> 
    </div> 

不過像所有預期這不起作用。當我在Safari中拖動滑塊時,數字幾乎隨機變化。他們從0增加到9,然後在最右邊的滑塊它回到0,然後當我滑回它之間來回0和9 ...

我做錯了什麼?

我在CodeIgniter應用程序中使用這個。

編輯:

我剛剛發現,它的實際工作現場時,在iPhone上,而不是在Safari瀏覽器在桌面上。這仍然很奇怪,因爲首先我需要它在桌面上進行開發,其次,它在jQuery Mobile演示站點上工作......我試着查看該代碼,甚至完全拷貝它,但仍然是它在我的頁面上不起作用。

我已經更新到RC2,而演示頁面上的腳本仍然是beta 2,可以這樣嗎?

編輯2:

不,不......我已經檢查了舊文檔,但與最新版本中的新文檔的例子他們的演示頁面上工作的罰款也是如此。所以這是別的。

回答

0

自己找到答案的種類。當我在Safari瀏覽器中查看jQuery Mobile樣式表時,已將輸入字段的寬度設置爲50px。如果我把它增加到70px,我注意到這些值實際上正在增加,這只是我之前只看到了左邊的數字。奇怪的是,即使使用了相同的樣式表,它們似乎仍然可以在演示網站上正常工作!無論如何,我通過覆蓋該規則並將其設置爲70px來實現它。

+1

對不起,我不理解樣式表是如何導致滑塊中隨機數字增加(變化)的問題? –

+0

那麼,我發現他們並沒有隨機改變,它只是出現這種方式,因爲只有左側的數字是可見的。所以它從1-9開始增加,然後回到1(看起來,但實際上是10-11,20-21 ......等等),最後回到最右側(100)。爲什麼寬度不適用於我的網站,但在演示網站上我不知道。我甚至沒有一個自定義的CSS可能導致它... – Anders

+0

你使用什麼視口? 是什麼建議 –

0

嗯不知道還有什麼在你的代碼是怎麼回事,這裏有一個例子:

滑塊文檔:

HTML

<div data-role="page" id="slider-test"> 
    <div data-role="content"> 

     <label for="slider-0">Input slider:</label> 
     <input type="range" name="slider-1" id="slider-0" value="2" min="0" max="10" /> 
     <br /> 
     <div data-role="fieldcontain"> 
      <label for="slider">Input slider:</label> 
      <input type="range" name="slider" id="slider" value="0" min="0" max="100"/> 
     </div> 

    </div> 
</div> 

順便說一句在Ubuntu 10.04上使用Chrome的話,這可能是Safari桌面的問題。請嘗試使用其他瀏覽器,因爲您的代碼對我來說看起來很好

10

請記住,jqueryMobile的版本1.0.1與jquery 1.7.1不完全兼容,這使得滑塊在某些瀏覽器上無法正常工作。 嘗試降級了jQuery 1.6.4版本和滑塊應該開始工作

+0

謝謝JackNova,我降級到jQuery 1.6.4並開始工作。 –

+0

謝謝,您的解決方案有效。應該注意的是,jQuery Mobile 1.1.0-rc1與jQuery 1.7.1協同工作,但它也改變了一些控件以具有新的默認外觀(例如翻轉開關)。 – x10

0

我已經注意到這個同樣的問題,但我相信這是由於使用的實驗滾動視圖...如果我註釋掉我的滾動視圖腳本翻轉開關滑塊再次工作。