Question

如何在滑块上移除鼠标交互，但是当我单击按钮并更改颜色时，将功能保持在哪里？（仅在jquery mobile和jquery中）

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

滑块也可以向相反方向减小吗？从左到右？

这是代码：

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

你真正想要的是进度条，而不是滑块。在您的示例中，您似乎使用滑块的第三方插件;因此，消除鼠标交互并从右到左功能将涉及更改插件代码。

或者，只需使用您需要的功能就可以轻松推出自己的功能。

这是 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);
}

更新了 DEMO

滑块鼠标控制？

1 个答案: