创建一个jquery UI滑块,在特定点停止滑动

时间:2012-06-18 13:07:01

标签: html jquery-ui slider

我有一个jquery ui滑块,我正在为一个新项目创建。我需要知道是否有一种方法可以在滑块“处理”的左右两侧之后禁用滑动,因为我根据来自数据库的信息使滑块左/右变灰。它基本上是一个复杂的搜索功能,并且根据其他用户定义的选择,用户可以使用滑块的整个宽度,或者它的一部分将显示为灰色,这样它们只能选择一小部分。我在这里添加了一张图片:

http://demos.frodo.wilson-cooke.co.uk/varley-118345/stackoverflowimage.jpg

所以我所做的就是在滑块顶部放置一个div并更新CSS,以便显示“block”div。如果一切正常,则这些都是绿色,您可以选择整个滑块。但是,如果设置了一个范围,那么一些框会显示为灰色,并且您只能从该范围内选择(请参阅灰色框内的绿色 - 这将是可选范围,白色将是所选范围)

然而,没有办法说'我不希望你能够滑过特定点' - 所以在这个例子中它将是'我不希望你能够滑过左边= 26.6667%'或其他。

有没有人对如何实现这一点有任何想法?我在下面粘贴了所有代码。

/* CONTENT 
---------------------------------------------------------


-------------------------------------------------------- */ 


$(document).ready(function(){
    var rangenumleft = 0;
    var rangenumright = 240;
    var curleftval = 0;

    wheelDiameterValues = new Array();

    wheelDiameterValues[0] = 0;
    wheelDiameterValues[1] = 50;
    wheelDiameterValues[2] = 75;
    wheelDiameterValues[3] = 100;
    wheelDiameterValues[4] = 125;
    wheelDiameterValues[5] = 150;
    wheelDiameterValues[6] = 175;
    wheelDiameterValues[7] = 200;
    wheelDiameterValues[8] = 225;
    wheelDiameterValues[9] = 250;
    wheelDiameterValues[10] = 275;
    wheelDiameterValues[11] = 300;
    wheelDiameterValues[12] = 350;
    wheelDiameterValues[13] = 400;
    wheelDiameterValues[14] = 450;
    wheelDiameterValues[15] = 500;

    // when you click the go button on search, this shows the example functionality.

    $('#gobutton').click(function() {
       var value1 = 40;
       var value2 = 100;
       lightblocks('#diameter-overslider', value1, value2);
       createSlider('#diameter-slider', value1, value2);
    });


    var initValue1 = 0;
    var initValue2 = 150;
    createSlider('#diameter-slider', initValue1, initValue2);
    createSlider('#load-slider', initValue1, initValue2);









})



function recalcRangeNumbers(slider, numA, numB) {
    $(slider).find('#leftrangenumber').html(numA);
    $(slider).find('#rightrangenumber').html(numB);
}

function createSlider(slider, value1, value2) {

    $(slider).slider({
        range: true,
        min: 0,
        max: 150,
        step: 10,
        values: [ value1, value2 ],
        create: function(event, ui) {
            //lightblocks();
            var startval = $(this).slider( "values", 0 );
            startval = wheelDiameterValues[startval / 10];
            var endval = $(this).slider( "values", 1 );
            console.log(endval);
            endval = wheelDiameterValues[endval / 10]
            console.log(endval);
            $(this).children('.ui-slider-handle').each(function(index, domEle) {
                if(index == 0) {
                    $(this).addClass('leftHandle');
                }
                else
                {
                    $(this).addClass('rightHandle');
                }

                if($(this).hasClass('leftHandle')) {
                    $(this).append('<div class="leftslider"><p class="range-number" id="leftrangenumber">'+startval+'</p></div>');
                }
                else if($(this).hasClass('rightHandle')) {
                    $(this).append('<div class="rightslider"><p class="range-number" id="rightrangenumber">'+endval+'</p></div>');
                }

            });
        },
        slide: function( event, ui ) {
            var value = ui.value;
            var value1 = ui.values[0];
            var value2 = ui.values[1];

            if(value == value1)
            {
                direction = 'left';
            }
            else if(value == value2)
            {
                direction = 'right';
            }
            //lightblocks(value, direction);
            var startval = ui.values[0];
            startval = wheelDiameterValues[startval / 10];
            var endval = ui.values[1];
            endval = wheelDiameterValues[endval / 10];
            recalcRangeNumbers(slider, startval, endval);
            //$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        }
    });
}

function lightblocks(slider, value1, value2) {
    /*changeval = value / 10;
    if(direction == 'left')
    {
        for(i = 0; i < changeval; i++){
            changevalselector = '#'+i;

            $(changevalselector).addClass('block-green');
        }
    }
    else if (direction == 'right')
    {
        for(i = 15; i >= changeval; i--){
            changevalselector = '#'+i;

            $(changevalselector).addClass('block-green');
        }
    }
    */
    console.log("slider name="+slider+" value1 = "+value1+" value2 = "+value2);

    value1 = value1 / 10;
    value2 = value2 / 10;

    console.log("slider name="+slider+" value1 = "+value1+" value2 = "+value2);

    for(i = 0; i < value1; i++)
    {
        changevalselector = '#'+i;
        $(slider).find(changevalselector).removeClass('block-green');
        $(slider).find(changevalselector).addClass('block-grey');
    }
    for(i = 15; i >= value2; i--)
    {
        changevalselector = '#'+i;
        $(slider).find(changevalselector).removeClass('block-green');
        $(slider).find(changevalselector).addClass('block-grey');
    }

然后HTML

<div class="section" id="bigconfig-spec">
                <h2> Specifications <img class="info-icon tooltip" src="images/info-icon.png" alt="information icon" title="This is some product type information" /></h2>
                <p class="slider-label"> Wheel Diameter (mm) </p>
                <div class="slider" id="diameter-slider"></div>

                <div class="overslider" id="diameter-overslider">
                    <?php for($i = 0; $i <= 14; $i++) { ?>
                    <div class="sliderblock block-green" id="<?php echo $i; ?>"></div>
                    <?php } ?>
                </div>

                <p class="slider-label"> Load Capacity (each, kg) </p>
                <div class="slider" id="load-slider"></div>

                <div class="overslider" id="load-overslider">
                    <?php for($i = 0; $i <= 14; $i++) { ?>
                    <div class="sliderblock block-green" id="<?php echo $i; ?>"></div>
                    <?php } ?>
                </div>
            </div>

无论如何,任何想法都会非常感激,因为我能看到的唯一方法是开始搞乱jquery ui代码,这有点过头了(此刻,我确信我可以得到我的绕过它)

但是,谢谢你的帮助。

干杯

安迪

1 个答案:

答案 0 :(得分:1)

你有没有看过这个问题:

jquery slider, time picker and reserved times..

这个想法很相似,我相信这就是你要找的东西。