隱藏jQuery中的滑塊輸入框

我有這個html代碼。

<label for="slider" class="ui-hidden-accessible"> 
    Input slider: 
</label> 
<input type="range" name="slider" id="@(Model.QuestionNo)_slider" value="25" min="0" max="100" />

它呈現這樣的： enter image description here

但我想刪除紅色標記的部分。我只想顯示滑塊部分。

這怎麼辦？

來源

2012-01-18 Chakradhar

如果你只是想擺脫上/下箭頭，你可以用輸入與指定寬度/高度和overflow : hidden元素：

$(".ui-slider-input").wrap($('<div />').css({ 
    position : 'relative', 
    display : 'inline-block', 
    height : '36px', 
    width : '45px', 
    overflow : 'hidden' 
}));

或者正如弗雷德裏克·哈米迪說，你可以只隱藏元素一起，只有一個滑塊是可見的。

這裏是上面的代碼演示：http://jsfiddle.net/EWQ6n/1/

您也可以隱藏與CSS的輸入元素（這是很好的，因爲你喜歡你用JS做沒有時間的CSS的執行）：

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

這裏是一個演示使用CSS：http://jsfiddle.net/EWQ6n/2/

更新

除了使用!important關鍵字外，您還可以製作更具體的CSS規則，以便用於jQuery Mobile類。一個例子是：

.ui-mobile .ui-page .ui-slider-input, 
.ui-mobile .ui-dialog .ui-slider-input { 
    display : none; 
}

來源

2012-01-18 16:58:27 Jasper

與CSS的.ui滑塊輸入{ 顯示完成：無重要; }它爲我工作 – Chakradhar 2012-01-19 09:05:23

謝謝Jasper - 「！重要」部分實際上是關鍵，否則它不起作用。（在Chrome中，至少） – Anthony 2012-03-12 03:37:38

@賈斯珀，很好的回答....另外，如果我想要顯示輸入框高於滑塊在中心？ – 2014-07-18 06:34:11

可以隱藏手動輸入控制：

$("#yourPage").live("pageinit", function() { 
    $(".ui-slider-input").hide(); 
});

來源

2012-01-18 15:35:55

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

來源

2012-01-26 22:08:50 TMB

如果你只是想擺脫向上/向下箭頭的使用type="text" data-type="range"

<input type="text" data-type="range" name="slider" id="@(Model.QuestionNo)_slider" value="25" min="0" max="100" />

來源

2012-12-02 11:51:44

當您使用CSS方法它這樣做，你可以把輸入提交其他人。因此，將class="ui-hidden-accessible"類添加到輸入以隱藏它。

從label中刪除此class="ui-hidden-accessible"。

您的方法是正確的。但是您需要將class="ui-hidden-accessible"添加到input而不是label。

您的代碼應該是這樣的：

<label for="slider">Input slider:</label> 
<input type="range" name="slider" id="@(Model.QuestionNo)_slider" 
    value="25" min="0" max="100" class="ui-hidden-accessible"/>

入住這SAMPLE DEMO

來源

2013-07-18 07:00:41 Praveen

該解決方案的問題在於它仍然保留左側的空間（即使輸入框已隱藏）。 – Muis 2014-03-27 15:07:37

<input type="range" name="slider_sodio" id="slider_sodio" value="0" min="0" max="3" step="1" class="ui-hidden-accessible" />

但看看那anoy偏移

.ui-slider-track { 
    margin: 0 15px 0 68px; ----> change to 10 
}

來源

2014-03-27 22:00:20 Seyacat

實際顯示舊代碼，然後在其中進行適當編輯的新代碼會更有幫助。 – Kevin 2014-03-27 22:24:38

我想這樣做，但我卻也希望空間消失。我以這種方式完成了這個工作（我正在使用範圍滑塊）：

<div data-role="rangeslider" data-mini="true" class="no-number"> 
    <input type="range" name="Morn" id="Morn" data-mini="true" value="720" min="0" max="1439"> 
    <input type="range" name="Night" id="Night" data-mini="true" value="10800" min="0" max="1439"> 
</div>

注意我將.no號碼添加到div。

然後在CSS：

/* Used to remove the number next to the slider.*/ 
.no-number .ui-slider-input 
{ 
    display : none; 
    width: 0px; 
} 

/* Used to remove the space where the number was. */ 
.no-number .ui-rangeslider-sliders 
{ 
    margin: 0 5px; !important 
}

我做的這一切都爲一個更大的問題，這是我想使用的時間，而不是數字的範圍滑塊的一部分，所以我替換的帶有標題的元素可以通過函數更改以顯示時間。

這可能不是一個完美的選擇，但我沒有看到哪裏能找回空間，所以我想我會把它放在這裏。

來源

2015-01-02 20:57:40 Jeffeb3

可以去掉輸入滑塊如下：

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


    .ui-slider-track { 
     margin: 0 15px 0 15px !important; 
    }

來源

2015-06-28 10:52:41 Novin

隱藏jQuery中的滑塊輸入框

回答

相關問題