Question

Jquery ui滑块可以单侧 enter image description here

如果较大箭头移动一侧无法在反向位置拖动，则在拖动箭头后如何解决此问题。

例如，一旦它达到2但不能为1，它想要移动3和3以上。

这是我的代码：

<html>
    <head>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                function update() {
                    var tasks_time = $('#tasks_time').slider('value');
                    var tasks_done = $('#tasks_done').slider('value');
                    var total_cost = (tasks_time * 4 * tasks_done) / (tasks_done * 3);
                    var credits_needed = Math.round((total_cost / 10) + 1);
                    $("#total_cost").text(total_cost.toFixed(2));
                    $("#curr-tasks_time").text(tasks_time);
                    $("#curr-tasks_done").text(tasks_done);
                    $("#credits_needed").text(credits_needed.toFixed(0));
                }
                $("#tasks_time").slider({
                    value: 1,
                    min: 0,
                    max: 72,
                    step: 1,
                    slide: function() {
                        update();
                    }
                });
            });
        </script>
        <style>
            .ui-widget-content { border: 1px solid #ccc; background: #ff9900 url(images/ui-bg_flat_100_ff9900_40x100.png) 50% 50% repeat-x; color: #222222; }
            .ui-widget-header { border: 1px solid #aaaaaa; background: #797979 url(images/ui-bg_highlight-soft_75_797979_1x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; }
            .ui-slider { position: relative; text-align: left; }
            .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
            .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }
            .ui-slider-horizontal { height: .8em; }
            .ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
            .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%;  }
            .ui-slider-horizontal .ui-slider-range-min { left: 0;  }
            .ui-slider-horizontal .ui-slider-range-max { right: 0;}
        </style>
    </head>
    <body>
        Finish these items in <span id="curr-tasks_time" class="calc_number">1</span> hours
        <div id="tasks_time">
        </div>
    </body>
</html>

JSFiddle

Answer 1

我用以下逻辑更新了你的小提琴：

拖动滑块时注册starting value
执行滑动时，请检查current value是否大于starting value，
如果current value小于starting value，请锁定滑块。

参见演示： http://jsfiddle.net/EAaLK/906/

$(document).ready(function(){

        function update() {
            var tasks_time = $('#tasks_time').slider('value');
            var tasks_done = $('#tasks_done').slider('value');
            var total_cost = (tasks_time * 4 * tasks_done) / (tasks_done * 3);
            var credits_needed = Math.round((total_cost / 10)+1);
            var startVal; //Register the value when dragging is starting.
           $("#total_cost").text(total_cost.toFixed(2));
            $("#curr-tasks_time").text(tasks_time);
            $("#curr-tasks_done").text(tasks_done);
            $("#credits_needed").text(credits_needed.toFixed(0));

        }

        $("#tasks_time").slider({
            value: 1,
            min: 0,
            max: 72,
            step: 1,
            start: function(e, ui){
                startVal = ui.value;
            },
            slide: function(e, ui) {
                if(ui.value < startVal){
                   //Temporarily disable to slider
                   $(this).slider('disable');
                }else{
                    update();
                }
            },
            stop: function(){
                //Check if slider has been disabled
                if($(this).slider( "option", "disabled" )){
                   //If Yes then reset value to starting value 
                   //and then re-enable slider
                   $(this).slider('value', startVal);                       
                   $(this).slider('enable');
                }
            }
        });


    });

Ui滑块一次侧滑块

1 个答案: