我有一个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代码，这有点过头了（此刻，我确信我可以得到我的绕过它）
但是，谢谢你的帮助。
干杯
安迪
答案 0 :(得分：1)