javascript - 禁用 slider 鼠标控制？

Question

如何删除 slider 上的鼠标交互，但在单击按钮并更改颜色时保持功能减少？ (仅在 jquery mobile 和 jquery 中)

因此，如果我按下 slider ，则不会发生任何事情，只有当我按下按钮时才会发生。

slider 也可以反方向减小吗？从左到右？

这是代码:

HTML:

<div id='slider' class='sliderBar'></div>
<button>Remove 10%</button>

CSS:

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#slider {
    height:20px;
    max-height:20px;
}

.sliderBar-progress {
        background:rgb(0, 255, 0);
        transition-duration: 0.5s;
        -webkit-transition-duration: 0.5s; /* for Safari */;
    }

JS:

$('#slider').sliderBar({
    start: 100,
    onChange: function (val) {
        var red = 0,
            green = 0;
        if (val >= 50) {
            red = 255 - Math.round(((val - 50) / 50) * 255);
            green = 255;
        } else {
            red = 255;
            green = Math.round(((val) / 50) * 255);

        }
        $('.sliderBar-progress').css({
            background: "rgb(" + red + "," + green + ",0)"
        });
    }
});

$('button').on('click', function () {
 $('#slider').setsliderBar($('#slider').getsliderBar()-10, true);
});

谢谢!

Answer 1

您真正需要的是进度条，而不是 slider 。在您的示例中，您似乎正在为 slider 使用第三方插件；因此消除鼠标交互和获得从右到左的功能将涉及更改插件代码。

或者，您也可以很容易地推出自己的功能，只包含您需要的功能。

Here is a DEMO

对于标记，您只需要 2 个 div:

<div id="slider" class="progressBar">
    <div class="progress"></div>
</div>

然后 2 条 CSS 规则使轨道和栏看起来像您想要的样子(根据您的喜好调整)。将进度 div 的位置设置为 right: 0 将使其从左向右移动。

.progressBar{
    position: relative;
    box-sizing: border-box;
    box-shadow: 1px 1px 3px #777 inset  ;
    -webkit-box-shadow: 1px 1px 6px #777 inset;
    height: 24px;
    max-height: 24px;
    overflow: hidden;
    width: 100%;
    border: 1px solid rgb(193, 193, 193);
    background-color: rgb(224, 224, 224);
    border-radius: 6px;
}

.progress {
    position: absolute;
    box-sizing: border-box;
    box-shadow: inset 0px 0 5px 0 #777;
    -webkit-box-shadow: inset 0px 0 5px 0 #777;
    right: 0px;
    height: 24px;
    margin-top: 0px;
    background-color: orange; 
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;   
    transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s; /* for Safari */;
}

要获取和设置进度/颜色，请添加以下函数:

function GetProgress(){
    var val = $("#slider .progress").outerWidth();
    var tot = $("#slider").outerWidth();
    if (tot <= 0) return 0;
    return Math.floor(val * 100 / tot);
}
function SetProgress(val){
    if (val < 0) val = 0;
    if (val > 100) vall = 100;
    var color = GetColorForVal(val);
    $("#slider .progress").css({"background": color, "width": val + "%"});
}
function GetColorForVal(val){
    var red = 0,
        green = 0;
    if (val >= 50) {
        red = 255 - Math.round(((val - 50) / 50) * 255);
        green = 255;
    } else {
        red = 255;
        green = Math.round(((val) / 50) * 255);
    }
    return  "rgb(" + red + "," + green + ",0)";
}

然后您可以通过调用这些函数来获取和设置进度:

$('#subtract').on('click', function () {
    var curVal = GetProgress() - 10;
    SetProgress(curVal);
});

更新:计算当前宽度可能存在舍入误差，因此我们可以从样式中读取它:

function GetProgress(){
    var curWid = $("#slider .progress")[0].style.width || 100;
    return parseInt(curWid);
}

Updated DEMO