新しいプロジェクト用に作成している jquery ui スライダーがあります。データベースからの情報に応じてスライダーの左右をグレー表示しているため、スライダーの「ハンドル」の左右の特定のポイントの後にスライドを無効にする方法があるかどうかを知る必要があります。これは基本的に複雑な検索機能であり、他のユーザー定義の選択に応じて、ユーザーはスライダーの幅全体を使用するか、一部をグレー表示して小さな部分のみを選択できるようにすることができます。ここに画像を追加しました：
http://demos.frodo.wilson-cooke.co.uk/varley-118345/stackoverflowimage.jpg
そこで、スライダーの上部に div を配置し、「ブロック」div が表示されるように CSS を更新しました。すべてが正常な場合、これらはすべて緑色になり、スライダー全体を選択できます。ただし、範囲が設定されている場合は、一部のボックスがグレー表示され、その範囲内からのみ選択できます (グレーのボックス内の緑を参照してください。それが選択可能な範囲であり、白が選択された範囲になります)。 )
ただし、「特定のポイントを超えてスライドさせたくない」と言う方法はないため、この例では「左を超えてスライドさせたくない = 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 コードをいじり始めることです。 )
しかし、ええ、助けてくれてありがとう。
乾杯
アンディ