使用jQuery UI范围滑块

我在我的网站中使用jQuery UI范围滑块，我需要为用户增加范围时创建一个函数，当用户减小范围时需要另外一个，我该怎么做？
感谢使用jQuery UI范围滑块

function createRangeSliderOutOfIframe(kinorid) { 
//alert("in edit"); 
var addRangeSlider = '<div class="rangeSlider"><p><label for="amount' + kinorid + '">Increase Range of Selection:</label></p><div id="slider-range' + kinorid + '"></div>'; //Jquery UI slider 
$('#trackingInfo').append(addRangeSlider); 
//$("#slider-range" + kinorid, window.parent.document).show(); 
var count = 0; 
var result = $(this).parent(); 
var i; 
$("#slider-range" + kinorid).slider({ 
    animate: true, 
    step: 1, 
    min: 0, 
    max: 10, 
    value: 5, 

    change: function (event, ui) { 
     var currentValue = ui.value; 
     alert(currentValue + "original"); 
     var value = $("#slider-range" + kinorid).slider("option", "value"); 
     alert(value+"new"); 
     if (ui.value >= 5) { 
      //if (!$(getSelectionParentElement).parent().prev().hasClass('kSelectedA') || !$(getSelectionParentElement).children().next().hasClass('rangeSlider')) { 
      alert(count); 
      var add = '<span class="kSelectedA">Link</span>'; 

      $("#myFrame").contents().find('*').each(function() { 
       if ($(this).attr('kinorid') == kinorid) { 
        //alert("change"); 
        if (count == 0) { 
         $(result).parent().before(add); 
         count += 1; 
        } 
        else if (count <= 5 && count != 0) { 
         result = $(this).parent(); 
         for (i = 0; i < count; i++) { 
          result = $(result).parent(); 
          //test += 1; 
         } 
         $(result).parent().before(add); 
         count += 1; 
         $('#trackingInfo').append('The range of the selection was increased<br/> '); 
         alert(count); 
        } 

       } 
      }); 

     } 
     if (ui.value < 5) { 
      //if (!$(getSelectionParentElement).parent().prev().hasClass('kSelectedA') || !$(getSelectionParentElement).children().next().hasClass('rangeSlider')) { 
      count -= 1; 
      alert("in if out"); 
      if ($(result).children().hasClass('kSelectedA')) { 
       alert("in if"); 
       $(result + '.kSelectedA').remove(); 
      } 
      //alert("second if"); 
      //$('.kSelectedA').remove(); 
     } 

    } 
}); 
/* $("#amount" + cId, window.parent.document).val($("#slider-range" + cId, window.parent.document).slider("values", 0) + 
" - " + $("#slider-range" + cId, window.parent.document).slider("values", 1));*/

}

来源

2011-06-05 Ovi

从jQuery UI网站摘自：

此事件被触发动过程中，每一个鼠标移动。使用ui.value（单处理滑块）获取当前句柄的值$（..）。slider（'value'，index）以获取另一个句柄的值。

根据ui.value返回false以防止幻灯片。

代码示例

供应一个回调函数来处理所述滑动事件进行选择。

$(".selector").slider({ 
    slide: function(event, ui) { ... } 
}); 
Bind to the slide event by type: slide. 
$(".selector").bind("slide", function(event, ui) { 
    ... 
});

来源

2011-06-05 09:07:50

谢谢。我也看到了这在jQuery UI的网站，但我不明白我怎么能有2个不同的功能，当范围变得更高或更低。 – Ovi 2011-06-05 09:17:09

@Ovi，在该函数内，创建一个变量来保存滑块的当前值，然后编写一个if块，根据幻灯片的值是变大还是变小，将其委托给两个函数之一。 – 2011-06-05 20:41:43

我无法得到这个工作。如果我做'var currentValue = ui.value;'我在变化后得到价值，我不知道如何获得旧价值，以便它变得更低或更高。我通过编辑将我的孔功能添加到原始问题。请帮忙。谢谢 – Ovi 2011-06-13 12:43:18

使用为您提供的change event。

来源

2011-06-05 09:04:27 mcgrailm

这并不回答我的问题。 – Ovi 2011-06-05 09:51:52

回答

相关问题