javascript - 我怎样才能始终在我的 jquery 移动 slider 上显示弹出窗口

Question

我在 jquery mobile 中有一个带有两个 handle 的 slider :

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

当用户点击 slider handle 时，我能够创建一个漂亮的弹出窗口:

但是，我想一直显示此弹出窗口，而不是仅在单击时显示。我试图删除 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 .