<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"></link>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(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");
}
}
});
});
</script>
<div id="slider"></div>
<div id="content" >
<div id="1" style="position:absolute;z-index:0;">A</div>
<div id="2" style="position:absolute;z-index:1;display:none;">B</div>
<div id="3" style="position:absolute;z-index:2;display:none;">C</div>
</div>
上面的代码使用 jQuery UI 创建一个滑块。滑块在 3 个不同 div 的内容之间淡出。该代码在计算机上很棒,但它创建的滑块在手机上却不能滑动。在移动设备上可以正常工作的方法如下:
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"></link>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.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<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>
<input type="range" name="slider" id="slider" value="0" min="0" max="100" onchange="changecontent()"/>
<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>
上面的代码在所有浏览器(移动设备或非移动设备)上都“工作”,但不允许样式选项,并且在每个浏览器上看起来都不同。我对它在移动设备上的显示方式很好,但讨厌它在 IE 上的外观,讨厌它在 Firefox 上的功能。
是否有足够熟练的 JS/jQuery 大师将这些结合起来,以便网站可以根据屏幕分辨率/查看它的设备来选择其中的一种?我也对其他选择持开放态度。但由于 JS 与我正在使用的模板冲突,我无法使用 jQuery Mobile。jQuery UI 工作正常。