使用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

回答

相關問題