在jQuery中隐藏滑块输入框 [英] hiding the slider input box in jquery
问题描述
我正在使用jquery Mobile 1.0.
I am using jquery Mobile 1.0.
我有这个html代码.
I have this html code.
<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" />
其渲染如下:
但是我要删除红色标记的部分.我只想显示滑块部分.
But I want to remove the red marked part. I want to show only slider part.
这怎么办?
推荐答案
如果只想摆脱上/下箭头,则可以将输入包装在具有指定宽度/高度和overflow : hidden
的元素中:
If you just want to get rid of the up/down arrows, you can wrap the input in an element with a specified width/height and overflow : hidden
:
$(".ui-slider-input").wrap($('<div />').css({
position : 'relative',
display : 'inline-block',
height : '36px',
width : '45px',
overflow : 'hidden'
}));
或者如Frederic Hamidi所说,您可以将元素全部隐藏在一起,只有一个滑块可见.
Or as Frederic Hamidi stated, you can just hide the element all together and only a slider will be visible.
这里是上述代码的演示: http://jsfiddle.net/EWQ6n/1/
Here is a demo of the above code: http://jsfiddle.net/EWQ6n/1/
您还可以使用CSS隐藏输入元素(这很好,因为您不必像使用JS那样计时CSS的执行时间)
Also you can hide the input element with CSS (which is nice because you don't have to time the execution of the CSS like you do with JS):
.ui-slider-input {
display : none !important;
}
以下是使用CSS的演示: http://jsfiddle.net/EWQ6n/2/
Here is a demo using CSS: http://jsfiddle.net/EWQ6n/2/
更新
除了使用!important
关键字之外,您还可以制定更具体的CSS规则,以便在jQuery Mobile类上使用它.一个例子是:
Instead of using the !important
keyword, you can also make a more specific CSS rule so it is used over the jQuery Mobile classes. An example would be:
.ui-mobile .ui-page .ui-slider-input,
.ui-mobile .ui-dialog .ui-slider-input {
display : none;
}
这篇关于在jQuery中隐藏滑块输入框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!