jQuery Mobile Slider выводит неправильный код - PullRequest
Новая
       7

jQuery Mobile Slider выводит неправильный код

0 голосов
/ 07 января 2012

У меня есть страница с ползунком, который связан с глубоким масштабируемым изображением. Этот слайдер использует плагин слайдера jQuery, и теперь я хотел бы сделать этот слайдер удобным для мобильных устройств. Я начал с добавления статического мобильного слайдера. Я добавил jQuery mobile css и js и вставил input[type="range"] следующим образом: 

<input type="range" id="zoomRange" value="25" min="0" max="100" />

Я не добавил ярлык, поскольку обнаружил, что он не является абсолютно необходимым. И выводимый код в DOM выглядит следующим образом: 

<input type="number" data-type="range" max="100" min="0" value="25" id="zoomRange"
       class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all ui-input-text ui-body-c ui-shadow-inset">
<a href="#" class="ui-slider-handle ui-state-default ui-corner-all ui-link" style="left: 0%;"></a>

Кто-нибудь знаком с тем, что здесь происходит?

1 Ответ

0 голосов
/ 07 января 2012

Из документации jQueryMobile

Фреймворк найдет все входные элементы с типом = "диапазон" и автоматически превращать их в слайдер с сопровождающим вводом

Итак, то, что вы видите, совершенно нормально. Я предполагаю, что вы хотите покончить с этим вертушкой и просто иметь только ползунок. Вы можете сделать это двумя способами.

1) Используйте data-role="none" с типом input. Это скажет платформе jQuery Mobile не улучшать тип ввода, и он будет выглядеть как обычный HTML-слайдер.

2) Скройте счетчик, манипулируя CSS.

Я думаю, точка нет. 2 сделает трюк за вас.

Вот пример кода, который иллюстрирует, о чем я говорю. 

<!DOCTYPE html> 
<html>
<head>
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href=
  "http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" type="text/css">
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js">
</script>
  <script type="text/javascript" src=
  "http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js">
</script>
  <style type="text/css">
       #slider-2{
         display:none;
         }
  </style>
</head>

<body>
  <div data-role="page" id="page1">
    <div data-role="header">
      <h1>Page1</h1>
    </div><!-- /header -->

    <div data-role="content" id="content">
      <div data-role="fieldcontain">
        <label for="slider-0">jQueryMobile Default</label> <input type="range" name=
        "slider" id="slider-0" value="25" min="0" max="100">
      </div>

      <div data-role="fieldcontain">
        <label for="slider-1">data-role='none'</label> <input type="range" name="slider"
        id="slider-1" value="25" min="0" max="100" data-role="none">
      </div>

      <div data-role="fieldcontain">
        <label for="slider-2">Spinner hidden</label> <input type="range" name="slider"
        id="slider-2" value="25" min="0" max="100">
      </div>
    </div><!-- /content -->
  </div><!-- /page -->
</body>
</html>

Демонстрация здесь - http://jsfiddle.net/2SXV6/

Дайте мне знать, если это поможет

...