如何始终在我的jquery移动滑块上显示弹出窗口

Question

我在jquery mobile中有一个带有两个句柄的滑块：

<div data-role="rangeslider" data-mini="true;">
    <label for="range-1a" style="font-weight: bold; font-size: 15px;">Dates:</label>
    <input name="range-1a" id="range-1a" min="1994" max="2015" value="1994" type="range" onchange="chk()" data-popup-enabled="true"/>
    <label for="range-1b">Rangeslider:</label>
    <input name="range-1b" id="range-1b" min="1994" max="2015" value="2015" type="range" onchange="chk()" data-popup-enabled="true"/>
</div>

添加属性：

data-popup-enabled="true"

当用户点击滑块手柄时，我能够创建一个漂亮的弹出窗口：

但是，我想一直显示这个弹出窗口，而不是只点击一下。我试图删除display：none css属性而没有任何运气：

$(".ui-slider-popup").css("display", "");

我还希望两端的文本框是静态的。这样，用户就可以知道他们拥有的范围，并通过常量弹出窗口显示他们选择的内容。这可能吗？

Answer 1

为了让弹出窗口始终显示，我添加了以下CSS：

.ui-slider-popup {
    display: block !important;
}

同样要覆盖通过jQuery应用于弹出窗口的任何样式，您只需输入样式属性，然后输入!important，就像我上面所做的那样。

此外，要使输入字段为静态，您可以使用readonly标记内的<input>属性，这是您修改后的HTML结构：

<div data-role="rangeslider" data-mini="true;">
    <label for="range-1a" style="font-weight: bold; font-size: 15px;">Dates:</label>
    <input name="range-1a" id="range-1a" min="1994" max="2015" value="1994" type="range" onchange="chk()" data-popup-enabled="true" readonly />
    <label for="range-1b">Rangeslider:</label>
    <input name="range-1b" id="range-1b" min="1994" max="2015" value="2015" type="range" onchange="chk()" data-popup-enabled="true" readonly />
</div>

这是 jsFiddle Demo 。