將jQuery Mobile滑塊轉換爲jQuery UI滑塊並更改內容

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script> 
function changecontent() 
    { 
    if (document.getElementById("slider").value<33) 
     { 
     $("#1").fadeIn("slow"); 
     $("#2").fadeOut("slow"); 
     $("#3").fadeOut("slow"); 
    } else if (document.getElementById("slider").value>33 && document.getElementById("slider").value<66) 
     { 
     $("#1").fadeOut("slow"); 
     $("#2").fadeIn("slow"); 
     $("#3").fadeOut("slow"); 
    } else if (document.getElementById("slider").value>66) 
     { 
     $("#1").fadeOut("slow"); 
     $("#2").fadeOut("slow"); 
     $("#3").fadeIn("slow"); 
     }; 
    }; 
</script> 

<style type="text/css"> 
    .hide {display:none;} 
    .show {display:inherit;} 
</style> 

<input type="range" name="slider" id="slider" value="0" min="0" max="100"/> 
<div id="content"> 
    <div id="1" class="show" style="position:absolute;z-index:0;">A</div> 
    <div id="2" class="hide" style="position:absolute;z-index:1;">B</div> 
    <div id="3" class="hide" style="position:absolute;z-index:2;">C</div> 
</div>

如上面的代碼所示，這將根據滑塊旋鈕的位置創建一個在3個不同div之間淡出的HTML5範圍滑塊。我的問題是，滑塊在IE中看起來很可怕。我需要定製它的外觀，以便在瀏覽器中保持統一。將jQuery Mobile滑塊轉換爲jQuery UI滑塊並更改內容

我試過使用jQuery Mobile，它解決了這個問題。但它會導致與WordPress的二十二個主題中使用的js衝突。我試圖解決這些衝突無濟於事。我已經加載了jQuery UI，並沒有發生衝突。

<div id="slider"></div>

上面的代碼創建UI滑塊，但我一直在閱讀了jQuery API文檔，我不理解如何改變我的腳本來獲得所顯示的內容改變。非常感謝您的專業知識！

來源

2013-10-23 Bryan Hahn

小提琴：http://jsfiddle.net/isherwood/MpT7Z – isherwood

試試這個：

HTML：

<div id="slider"></div> 
<div id="content"> 
    <div id="1" class="show" style="position:absolute;z-index:0;">A</div> 
    <div id="2" class="hide" style="position:absolute;z-index:1;">B</div> 
    <div id="3" class="hide" style="position:absolute;z-index:2;">C</div> 
</div>

JS：

$(function() { 
    $("#slider").slider({ 
     slide: function(event, ui) { 
      if (ui.value < 33) { 
       $("#1").fadeIn("slow"); 
       $("#2").fadeOut("slow"); 
       $("#3").fadeOut("slow"); 
      } 
      else if (ui.value < 66) { 
       $("#1").fadeOut("slow"); 
       $("#2").fadeIn("slow"); 
       $("#3").fadeOut("slow"); 
      } 
      else { 
       $("#1").fadeOut("slow"); 
       $("#2").fadeOut("slow"); 
       $("#3").fadeIn("slow"); 
      } 
     } 
    }); 
});

CSS：

.hide {display:none;} 
.show {display:inherit;}

小提琴：http://jsfiddle.net/NxGZa/

來源

2013-10-23 18:57:48 mayabelle

Mayabelle，你是我的英雄！ –

將jQuery Mobile滑塊轉換爲jQuery UI滑塊並更改內容

回答

相關問題