Question

我正在尝试将jqm滑块元素作为＆＃34; pan＆＃34;放大器上的命令，以便：

范围是从减去某个值到某个值（通过＆＃34; min =＆＃34; -50＆＃34; max =＆＃34; 50＆＃34;＆＃34;）; < / LI>
加载到中心位置，对应于零（由＆＃34;值= 0＆＃34;实现）
滑块背景在零值时不存在，但在向左/向右移动（仍然打开问题）时仅实现形式的中心（0值）

如果可能的话，有什么线索？

谢谢你。扬科

Answer 1

这是一种方法：

给定标准滑块标记，其中最小值和初始值设置为您指定的值：

<label for="pan">Pan:</label>
<input type="range" name="pan" id="pan" min="-50" max="50" value="0" />

在pagecreate上，将相对定位的DIV插入滑块轨道，然后在滑块的change事件上设置其尺寸：

$(document).on("pagecreate", "#page1", function(){

    var colorback  = '<div class="sliderBackColor"></div>'
    $( "#pan" ).closest(".ui-slider").find(".ui-slider-track").prepend(colorback);


    $("#pan").on("change", function(){
        var v = parseInt($(this).val());
        var $highlight = $(this).closest(".ui-slider").find(".sliderBackColor");
        var l = v + 50;
        var w = Math.abs(v);
        if (v > 0){
            l = 50;            
        } 
        $highlight.css({"left": l + "%",  "width": w + "%"});
    });

});

高亮显示的CSS确保DIV使用相对定位，将高度设置为轨道的100％，设置背景颜色并将宽度初始化为0;

.sliderBackColor {
    position: relative;
    height: 100%;
    left: 50%;
    width: 0%; 
    background-color: #8A9B0F;
}

每次滑块改变值时，我们计算高亮显示的新左侧位置和宽度，使一端保持在50％，另一端保持当前值。所以对于负值，左边设置为负值加50％;而对于正值，左边与50％挂钩。那么宽度就是当前值的绝对值。

这是一个有效的 DEMO

如果您使用的是早于1.4的jQM版本，请将pagecreate更改为pageinit，并且相同的解决方案应该有效：

<强> 1.3 DEMO

另外，请参阅此文章，了解滑块可以执行的其他有趣操作：

http://jqmtricks.wordpress.com/2014/04/21/fun-with-the-slider-widget/

例如，当平底锅远离中心时，您可以更改高亮颜色：

<强> Color Change Demo

有没有办法让jqm滑块元素以两种方式工作（左向右兰德），具有中心值？

1 个答案: