Возникли проблемы при рендеринге HTML5 Slider по вертикали. - PullRequest
Новая
       4

Возникли проблемы при рендеринге HTML5 Slider по вертикали.

1 голос
/ 10 февраля 2011

Я использую JQuery Mobile для рендеринга слайдера, и он отлично работает. Тем не менее, у меня возникли проблемы с его вертикальным отображением. Спецификации говорят (по крайней мере, мое чтение о них), что ползунок определяет, показывать ли вертикально или горизонтально в зависимости от высоты / ширины, но в моем случае это не работает. Что я делаю не так? 

<!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>

Ответы [ 3 ]

3 голосов
/ 29 июня 2011

Вот как заставить слайдер работать в вертикальном режиме для браузеров Webkit (Chrome & Safari): 

#wheel1speed {
    -webkit-appearance: slider-vertical;
}
1 голос
/ 15 февраля 2011

Я просмотрел документацию по JQM (последняя) и не нашел информации о способности слайдера отображать вертикально

Я также нашел это: http://forum.jquery.com/topic/is-there-a-vertical-slider-for-jquery-mobile

0 голосов
/ 10 июня 2015

Мне попался такой подход, который мне нравится: 

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