我有一个为新项目创建的 jquery ui 滑块。我需要知道是否有办法在滑块“手柄”的左右某个点之后禁用滑动，因为我根据来自数据库的信息使滑块的左/右变灰。它基本上是一个复杂的搜索功能，并且根据其他用户定义的选择，用户可以使用滑块的整个宽度，或者部分显示为灰色，以便他们只能选择一小部分。我在这里添加了一张图片：
http://demos.frodo.wilson-cooke.co.uk/varley-118345/stackoverflowimage.jpg
所以我所做的是在滑块顶部放置一个 div 并更新 CSS 以显示“块”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 代码，这有点超出我的想象（目前，我确信我可以理解它)
但是，是的，感谢您的帮助。
干杯
安迪