Having trouble rendering the HTML5 Slider vertically
I am using JQuery Mobile to render a Slider and it works great. However, I am having trouble getting it to show up vertically. The specs say (at least my reading of them) that the slider figures out whether to show up vertically or horizontally based on the height/width, but it's not working in my case. What am I doing wrong?
<!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>
Here's how to force the slider in vertical mode for Webkit browsers (Chrome & Safari):
#wheel1speed {
-webkit-appearance: slider-vertical;
}
I have looked through JQM documentation (latest) and found no info about a slider being able to display vertically
I also found this: http://forum.jquery.com/topic/is-there-a-vertical-slider-for-jquery-mobile
I came across this approach which I like:
#wheel1speed {
transform: rotate(270deg);
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
}
加载中,请稍侯......
精彩评论