Question

我使用JQuery Mobile渲染Slider，效果很好。但是，我无法让它垂直显示。规格说（至少我读它们）滑块根据高度/宽度计算出是垂直还是水平显示，但在我的情况下不起作用。我做错了什么？

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8" /> 
        <title>jQuery Mobile Docs - Forms</title> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />  

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script> 

        <style type="text/css">
            #wheel1Speed { height: 300px; width: 100px;}    
        </style>        

    </head> 
<body> 

<div data-role="page">  
    <div data-role="content"> 
        <input type="range" name="wheel1speed" id="wheel1speed" 
            value="0" min="-100" max="100" data-theme="b" data-track-theme="a"  /> 
    </div><!-- /content --> 
</div><!-- /page --> 

</body> 
</html>

Answer 1

以下是如何在Webkit浏览器（Chrome和Safari）的垂直模式下强制滑块：

#wheel1speed {
    -webkit-appearance: slider-vertical;
}

Answer 2

我查看了JQM文档（最新），发现没有关于滑块能够垂直显示的信息

我也发现了这个： http://forum.jquery.com/topic/is-there-a-vertical-slider-for-jquery-mobile

Answer 3

我偶然发现了这种方法：

#wheel1speed {
  transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
}

无法垂直呈现HTML5滑块

3 个答案: