Удалить текстовое поле в слайдере в jQuery Mobile - PullRequest
3 голосов
/ 03 апреля 2012

Я использую этот JQM Links

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"> </script>

Я использовал ползунок в разделе.в более старой версии я использовал свойство class = "ui-hidden-available", чтобы не показывать текстовое поле рядом с ползунком, но в этой версии оно не работает.Как я могу удалить это текстовое поле.Мой код

    <label for="slider" class="ui-hidden-accessible">
                        Input slider:</label>
                    <input type="range" name="slider" id="slidstep" step="25"   value="0" min="1" max="100"/>

enter image description here

я должен использовать другую версию?или любой способ преодолеть эту проблему.

Спасибо

Ответы [ 4 ]

9 голосов
/ 18 апреля 2012
<style type=text/css>
    input.ui-slider-input {
        display : none !important;
    }
</style>

http://the -jquerymobile-tutorial.org / JQuery-мобильный-учебник-CH19.php

Смотри также

скрытие поля ввода ползунка в jquery

7 голосов
/ 18 июля 2013

Удалите это class="ui-hidden-accessible" из label.

Ваш подход правильный.Но вам нужно добавить class="ui-hidden-accessible" к input, а не к label.

Ваш код должен быть таким:

<label for="slider">Input slider:</label>
<input type="range" name="slider" id="slidstep" step="25"  
      value="0" min="1" max="100" class="ui-hidden-accessible"/>

Проверьте это DEMO

1 голос
/ 03 марта 2014

Я поместил свой слайдер в свой собственный контейнер div с определенным классом ("ui-slider-slider"). Тогда в моем CSS у меня есть целевые два дочерних элемента моего div, то есть:

div.ui-slider-slider input.ui-input-text {
    display: none;
}
div.ui-slider-slider div.ui-slider-track {
    margin: 0 15px 0 15px !important;
}

Первое правило скрывает текстовое поле, второе - ползунок на всю ширину. Надеюсь, это поможет:)

0 голосов
/ 12 июля 2013

Также работают следующие работы: $("#slider").hide(); Это потому, что #slider является компонентом текстового поля слайдера.

...