删除jQuery Mobile中滑块控件中的Text Box

Question

我正在使用此JQM链接

<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-accessible” 没有在滑块旁边显示文本框但在此版本中它不起作用。我该如何删除此文本框。我的代码

    <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"/>

我应该使用其他版本吗？或以任何方式克服这个问题。

由于

Answer 1

<style type=text/css>
    input.ui-slider-input {
        display : none !important;
    }
</style>

http://the-jquerymobile-tutorial.org/jquery-mobile-tutorial-CH19.php

另见

  

hiding the slider input box in jquery

Answer 2

从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

Answer 3

我已将滑块放在我自己的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;
}

第一个规则隐藏文本框，第二个规则使滑块全宽。希望它有所帮助：）

Answer 4

此外，以下作品：$("#slider").hide(); 这是因为#slider是滑块的文本框组件。

Answer 5

对于Rangeslider，这是解决方案（来自Pascal）：

        input.ui-slider-input {
            display: none;
        }

        .ui-rangeslider .ui-rangeslider-sliders {
            margin: 0px;