Question

使用两个jquery滑块“steps”和“step-a-step”我想控制“div”的高度。高度应该是这两个滑块值相乘的结果。请帮我解释一下代码。感谢

Answer 1

我刚刚掀起：

http://jsfiddle.net/richbradshaw/KKhYU/4/

非常自我解释，使用jQuery我们可以使用：

$(function() {
    // cache things we'll need many times.
    var $box = $("#box"),
    $step = $("#step"),
    $height-of-step = $("#height-of-step");

    $('input').on('change', function() {
        // set the width of box to the product of the two things.
        $box.css('height', $step.val() * $height-of-step.val());
    });
});

我使用的是宽度而不是高度，因此在这个简单的演示中它不会移动滑块。

我正在使用内置范围输入，请注意它在旧浏览器中的支持，并且莫名其妙地，Firefox版本少于23（从第一个建议开始实施仅用了7年......）。 http://caniuse.com/#feat=input-range

Answer 2

HTML：

<div id='flexible' style='width:200px; height:100px; background-color:green'></div>

<div id='steps' class='ui-slider-1' style="margin:10px;">
<div class='ui-slider-handle'></div>    
</div>

<div id='height-of-step' class='ui-slider-1' style="margin:10px;">
<div class='ui-slider-handle'></div>    
</div>

JS：

$('#steps').slider( { slide: moveStepsSlider } );
$('#height-of-step').slider( {slide: moveHeightSlider} );

function moveStepsSlider( e, ui ) 
{
    $('#flexible').height(ui.value * $('#height-of-step').slider("option", "value") );
}

function moveHeightSlider( e, ui ) 
{
   $('#flexible').height(ui.value * $('#steps').slider("option", "value") );
}

两个滑块控制一个值

2 个答案: